Styling Modes in ASP.NET MVC OTP Input control

13 Jun 20241 minute to read

Styling modes specify the style variants for the input fields in the OTP Input component. These modes allows you to customize the appearance of the OTP input fields.

Outline mode

You can use the outline style by setting the StylingMode property to Outlined. The default styling mode is Outlined.

CSHTML

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").StylingMode(OtpInputStyle.Outlined).Render()
</div>

Default.cs

public ActionResult Default()
{
    return View();
}

Filled mode

You can use the filled style by setting the StylingMode property to Filled.

CSHTML

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").StylingMode(OtpInputStyle.Filled).Render()
</div>

Default.cs

public ActionResult Default()
{
    return View();
}

Underline mode

You can use the underline style by setting the StylingMode property to Underlined.

CSHTML

@using Syncfusion.EJ2.Inputs

<div id='container' style="width: 350px;">
    @Html.EJS().OtpInput("otpInput").StylingMode(OtpInputStyle.Underlined).Render()
</div>

Default.cs

public ActionResult Default()
{
    return View();
}