Class SfOtpInput

The SfOtpInput component provides a secure and user-friendly interface for entering one-time passwords (OTP) with individual input fields for each character.

Inheritance

System.Object

SfBaseComponent

SfOtpInput

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfOtpInput : SfBaseComponent

Remarks

The SfOtpInput component supports various input types including numbers, text, and password characters. It offers features like auto-focus, keyboard navigation, paste functionality, and customizable styling options. The component is fully accessible and supports ARIA labels for screen readers.

Examples

A basic OTP input component with 4 digits.

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

Constructors

SfOtpInput()

Declaration

public SfOtpInput()

Properties

AriaLabels

Gets or sets custom ARIA label text for each input field to enhance accessibility.

Declaration

public string[] AriaLabels { get; set; }

Property Value

Type	Description
System.String[]	An array of strings where each element provides the ARIA label for the corresponding input field. The default value is `null`.

Remarks

This property improves accessibility by providing descriptive labels for screen readers and other assistive technologies.

Each array element corresponds to one input field in sequence.
If the array length is less than Length, remaining fields use default labels.
If not specified, default ARIA labels will be automatically generated.

Proper ARIA labeling is essential for users who rely on screen readers to understand the purpose of each input field.

Examples

<SfOtpInput AriaLabels="@otpLabels" Length="4"></SfOtpInput>
@code{
    private string[] otpLabels = 
    {
        "First digit of verification code",
        "Second digit of verification code", 
        "Third digit of verification code",
        "Fourth digit of verification code"
    };
}

AutoFocus

Gets or sets a value indicating whether the SfOtpInput field should automatically receive focus when the component is rendered.

Declaration

public bool AutoFocus { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the SfOtpInput should automatically receive focus; otherwise, `false`. The default value is `false`.

Remarks

This property is useful for scenarios where the user needs to quickly start entering the OTP without manually focusing on the SfOtpInput field. When true, the SfOtpInput field will be focused automatically as soon as the component is rendered.

Created

Gets or sets an event callback that is invoked when the SfOtpInput component has finished rendering for the first time.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object that will be invoked on component creation.

Remarks

This event is triggered after the component has completed its initial rendering and all DOM elements are available. It provides an opportunity to perform initialization tasks that require the component to be fully rendered, such as setting up third-party integrations or focusing elements.

The event is only fired once during the component's lifecycle, specifically after the first render.

Examples

<SfOtpInput Created="@OnOtpCreated"></SfOtpInput>
@code {
    private void OnOtpCreated(object args)
    {
        // Component has been created and rendered
        Console.WriteLine("OTP Input component is ready");
    }
}

CssClass

Gets or sets additional CSS classes to apply to the SfOtpInput component for custom styling.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing space-separated CSS class names. The default value is `null`.

Remarks

This property allows you to apply custom CSS classes to modify the appearance of the OTP input component. Multiple class names should be separated by spaces. These classes are applied to the main container element of the component and can be used to override default styling or add additional visual effects.

Examples

<SfOtpInput CssClass="custom-otp large-size"></SfOtpInput>

Disabled

Gets or sets a value indicating whether the SfOtpInput component is disabled.

Declaration

public bool Disabled { get; set; }

Property Value

Type	Description
System.Boolean	`true` if the component is disabled; otherwise, `false`. The default value is `false`.

Remarks

When disabled, the OTP input component becomes non-interactive:

Users cannot enter or modify values in any input field.
Keyboard navigation and focus events are prevented.
The component receives a visual disabled state styling.
All event callbacks are suppressed.

This property is useful for scenarios where the OTP input should be temporarily unavailable.

Examples

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

HtmlAttributes

Gets or sets a dictionary of additional HTML attributes to apply to the SfOtpInput component.

Declaration

public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A System.Collections.Generic.Dictionary<, > where keys are attribute names and values are attribute values.

Remarks

This property allows you to add custom HTML attributes to the main container element of the component. Common use cases include adding accessibility attributes, data attributes, or other HTML5 attributes.

Note: If a "name" attribute is provided, it will be applied to the hidden input element used for form submission rather than the container element.

Examples

<SfOtpInput HtmlAttributes="@htmlAttributes"></SfOtpInput>
@code{
    private Dictionary<string, object> htmlAttributes = new Dictionary<string, object>
    {
        { "data-testid", "otp-component" },
        { "role", "group" },
        { "aria-labelledby", "otp-label" }
    };
}

ID

Gets or sets the unique identifier for the SfOtpInput component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string representing the HTML ID attribute. If not specified, a unique ID will be automatically generated.

Remarks

This property sets the HTML id attribute for the OTP input container element. If no ID is provided, the component will generate a unique identifier automatically.

Examples

<SfOtpInput ID="my-otp-input"></SfOtpInput>

Length

Gets or sets the number of input fields to be rendered in the SfOtpInput component.

Declaration

public int Length { get; set; }

Property Value

Type	Description
System.Int32	An integer representing the number of OTP input fields. The default value is `4`.

Remarks

This property controls how many individual input fields will be displayed in the OTP component. The value must be a positive integer. When changed, the component will re-render with the new number of input fields.

Examples

<SfOtpInput Length="6"></SfOtpInput>

OnBlur

Gets or sets an event callback that is invoked when any input field in the SfOtpInput component loses focus.

Declaration

public EventCallback<OtpFocusOutEventArgs> OnBlur { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpFocusOutEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type OtpFocusOutEventArgs that provides blur event details.

Remarks

This event is triggered whenever a user leaves an OTP input field by clicking elsewhere, navigating with Tab key, or through programmatic focus changes. The event provides information about which specific input field lost focus and the current state of the component.

This event is useful for implementing validation, triggering form submissions when OTP is complete, or updating UI elements based on focus changes.

Examples

<SfOtpInput OnBlur="@HandleBlur"></SfOtpInput>
@code {
    private void HandleBlur(OtpFocusOutEventArgs args)
    {
        Console.WriteLine($"Input field {args.Index} lost focus. Current value: {args.Value}");
        if (!string.IsNullOrEmpty(args.Value) && args.Value.Length == 4)
        {
            ValidateOtp(args.Value);
        }
    }
}

OnFocus

Gets or sets an event callback that is invoked when any input field in the SfOtpInput component receives focus.

Declaration

public EventCallback<OtpFocusInEventArgs> OnFocus { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpFocusInEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type OtpFocusInEventArgs that provides focus event details.

Remarks

This event is triggered whenever a user focuses on any of the OTP input fields through mouse click, keyboard navigation, or programmatic focus calls. The event provides information about which specific input field received focus and the current state of the component.

The event arguments include the current value, the index of the focused field, and whether the focus was initiated by user interaction.

Examples

<SfOtpInput OnFocus="@HandleFocus"></SfOtpInput>
@code {
    private void HandleFocus(OtpFocusInEventArgs args)
    {
        Console.WriteLine($"Input field {args.Index} focused. Current value: {args.Value}");
    }
}

OnInput

Gets or sets an event callback that is invoked whenever the value of any input field changes.

Declaration

public EventCallback<OtpInputEventArgs> OnInput { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpInputEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type OtpInputEventArgs that provides input change details.

Remarks

This event is triggered in real-time as users type, delete, or paste characters in any of the OTP input fields. It provides both the previous and current values, along with the index of the field that changed.

This event is ideal for implementing real-time validation, progress indicators, or triggering actions when the OTP reaches a certain length. It fires before the ValueChanged event.

The event includes information about which specific input field triggered the change, making it useful for field-specific logic or validation.

Examples

<SfOtpInput OnInput="@HandleInput"></SfOtpInput>
@code {
    private void HandleInput(OtpInputEventArgs args)
    {
        Console.WriteLine($"Field {args.Index} changed from '{args.PreviousValue}' to '{args.Value}'");

        if (!string.IsNullOrEmpty(args.Value) && args.Value.Length == 4)
        {
            // OTP is complete, trigger validation
            _ = ValidateOtpAsync(args.Value);
        }
    }
}

Placeholder

Gets or sets the placeholder text displayed in the input fields when they are empty.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A string representing the placeholder text. The default value is System.String.Empty.

Remarks

This property provides visual hints to users about what to enter in each input field.

If a single character is provided, it will be displayed in all input fields.
If multiple characters are provided, each character will be used for the corresponding input field.
If the placeholder text exceeds the Length, extra characters are ignored.

The placeholder disappears when the user starts entering values in the input fields.

Examples

<!-- Single character for all fields -->
<SfOtpInput Placeholder="0" Length="4"></SfOtpInput>

<!-- Different character for each field -->
<SfOtpInput Placeholder="abcd" Length="4"></SfOtpInput>

Separator

Gets or sets the character or string displayed between input fields in the SfOtpInput component.

Declaration

public string Separator { get; set; }

Property Value

Type	Description
System.String	A string representing the separator character(s) displayed between input fields. The default value is System.String.Empty.

Remarks

This property allows you to add visual separators between OTP input fields to improve readability. Common separators include dashes (-), forward slashes (/), or dots (.). If no separator is specified, the input fields will be displayed without any separating characters.

Examples

<SfOtpInput Separator="-" Length="4"></SfOtpInput>
<!-- Displays as: □-□-□-□ -->

StylingMode

Gets or sets the visual styling mode for the input fields in the SfOtpInput component.

Declaration

public OtpInputStyle StylingMode { get; set; }

Property Value

Type	Description
OtpInputStyle	An OtpInputStyle enumeration value specifying the visual appearance. The default value is Outlined.

Remarks

This property controls the visual presentation of the OTP input fields:

Outlined - Input fields have a visible border outline.
Filled - Input fields have a filled background appearance.
Underlined - Input fields display only a bottom border line.

The styling mode affects the overall visual theme and user experience of the component.

Examples

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

TextTransform

Gets or sets the case transformation for the OTP input text in the SfOtpInput component.

Declaration

public TextTransform TextTransform { get; set; }

Property Value

Type	Description
TextTransform	One of the TextTransform enumeration values that specifies the case transformation: UppercaseTransforms the input text to uppercase. LowercaseTransforms the input text to lowercase. NoneNo case transformation is applied. The default value is None.

Remarks

Use this property to control the letter casing of the OTP input in the SfOtpInput component.

Type

Gets or sets the input type for all fields in the SfOtpInput component.

Declaration

public OtpInputType Type { get; set; }

Property Value

Type	Description
OtpInputType	An OtpInputType enumeration value specifying the input type. The default value is Number.

Remarks

This property determines what type of characters are accepted in the OTP input fields:

Number - Only numeric characters (0-9) are accepted.
Text - All alphanumeric characters are accepted.
Password - Characters are masked for security.

When set to Number, the component automatically filters out non-numeric characters.

Examples

<SfOtpInput Type="OtpInputType.Text" Length="6"></SfOtpInput>

Value

Gets or sets the current value of the SfOtpInput component. Supports two-way data binding.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	A string representing the complete OTP value entered by the user. The default value is System.String.Empty.

Remarks

This property contains the concatenated values from all input fields. When the input type is Number, only numeric characters are included in the value. Use @bind-Value for two-way data binding. The value is automatically updated as the user enters or modifies the OTP.

Examples

<SfOtpInput @bind-Value="@otpValue"></SfOtpInput>
@code {
    private string otpValue = "1234";
}

ValueChanged

Gets or sets an event callback that is invoked when the Value property changes, enabling two-way data binding.

Declaration

public EventCallback<string> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.String that receives the updated value.

Remarks

This event callback is automatically invoked by the Blazor framework to support two-way data binding with the @bind-Value syntax. It should not be used directly in most scenarios.

For custom value change handling, use the OnInput event instead, which provides more detailed information about the change including previous values and field indices.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

FocusAsync()

Asynchronously sets focus to the appropriate input field in the SfOtpInput component.

Declaration

public void FocusAsync()

Remarks

This method automatically determines the correct input field to focus:

If all fields are empty, focuses the first field.
If some fields have values, focuses the first empty field.
If all fields are filled, focuses the last field.

This method is useful for programmatically directing user attention to the OTP input, such as after displaying the component or when validation fails.

Examples

@code {
    private SfOtpInput otpRef;

    private async Task ShowOtpDialog()
    {
        // Show the OTP input dialog
        await Task.Delay(100); // Wait for render
        otpRef.FocusAsync(); // Focus the OTP input
    }
}
<SfOtpInput @ref="otpRef" Length="6"></SfOtpInput>

FocusOutAsync()

Asynchronously removes focus from all input fields in the SfOtpInput component.

Declaration

public void FocusOutAsync()

Remarks

This method programmatically removes focus from any currently focused input field within the component. It's useful for scenarios where you need to programmatically blur the OTP input, such as:

After successful OTP validation
When switching focus to other UI elements
During form submission or navigation

If no input field is currently focused, this method has no effect.

Examples

@code {
    private SfOtpInput otpRef;

    private async Task ValidateAndProceed(string otpValue)
    {
        if (await ValidateOtp(otpValue))
        {
            otpRef.FocusOutAsync(); // Remove focus after successful validation
            await NavigateToNextStep();
        }
    }
}
<SfOtpInput @ref="otpRef" OnInput="@((args) => ValidateAndProceed(args.Value))"></SfOtpInput>

OnAfterRenderAsync(Boolean)

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task