Input Types in Blazor OTP Input component

25 Jun 20241 minute to read

Types

This section explains the the various types of OTP (One-Time Password) input component, 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.Blazor.Inputs

<SfOtpInput Value="1234" Type="OtpInputType.Number"></SfOtpInput>

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.Blazor.Inputs

<SfOtpInput Value="e3c7" Type="OtpInputType.Text"></SfOtpInput>

Password type

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

@using Syncfusion.Blazor.Inputs

<SfOtpInput Value="e3c7" Type="OtpInputType.Password"></SfOtpInput>

Value

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

@using Syncfusion.Blazor.Inputs

<SfOtpInput Value="1234"></SfOtpInput>