Styling Modes in Blazor OTP Input component

25 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.

@using Syncfusion.Blazor.Inputs

<SfOtpInput StylingMode="OtpInputStyle.Outlined"></SfOtpInput>

Blazor OTP Input Component with Outline Mode

Filled mode

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

@using Syncfusion.Blazor.Inputs

<SfOtpInput StylingMode="OtpInputStyle.Filled"></SfOtpInput>

Blazor OTP Input Component with Filled Mode

Underline mode

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

@using Syncfusion.Blazor.Inputs

<SfOtpInput StylingMode="OtpInputStyle.Underlined"></SfOtpInput>

Blazor OTP Input Component with Underlined Mode