Input Types in ASP.NET MVC OTP Input control

13 Jun 20242 minutes to read

Types

This section explains the the various types of OTP (One-Time Password) input controls, explaining their default behaviors and appropriate use cases.

Number type

You can set the Type property to Number to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default Type property is Number.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Value("1234").Type(OtpInputType.Number).Render()
</div>
public ActionResult Default()
{
    return View();
}

ASP.NET MVC OTP Input Control as Number

Text type

You can set the Type property to Text to use this input type as text. This is suitable when the OTP input need to include both letters and numbers.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Value("e3ct").Type(OtpInputType.Text).Render()
</div>
public ActionResult Default()
{
    return View();
}

ASP.NET MVC OTP Input Control as Text

Password type

You can set the Type property to Password to use this input type as password in the otp Input.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Value("1234").Type(OtpInputType.Password).Render()
</div>
public ActionResult Default()
{
    return View();
}

ASP.NET MVC OTP Input Control as Password

Value

You can specify the value of OTP Input by using the Value property.

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").Value("1234").Render()
</div>
public ActionResult Default()
{
    return View();
}

ASP.NET MVC OTP Input Control with Value