Input Types in Blazor OTP Input

14 Aug 20261 minute to read

Types

This section explains the available types of the OTP (one-time password) input component, their default behaviors, and appropriate use cases.

Number type

Set the Type property to Number to accept only numeric characters. This is ideal for OTP scenarios with digit-only codes. The default Type is Number.

@using Syncfusion.Blazor.Inputs

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

Blazor OTP input component with number type

Text type

Set the Type property to Text to allow alphanumeric input. Use this when the OTP may include both letters and numbers.

@using Syncfusion.Blazor.Inputs

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

Blazor OTP input component with text type

Password type

Set the Type property to Password to mask entered characters for privacy while typing. The characters in the input fields are displayed as masked values, while the actual value retrieved from the component remains the unmasked text.

@using Syncfusion.Blazor.Inputs

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

Blazor OTP input component with password type

Value

Specify the initial OTP value by using the Value property. The component accepts a string whose length should not exceed the configured Length; extra characters beyond the length are ignored.

@using Syncfusion.Blazor.Inputs

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

Blazor OTP input component with value

See also