Class SfOtpInput

Inheritance

System.Object

SfBaseComponent

SfOtpInput

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

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

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfOtpInput : SfBaseComponent

Constructors

SfOtpInput()

Declaration

public SfOtpInput()

Properties

AriaLabels

Gets or sets the ARIA-label attribute for each input field in the SfOtpInput component.

Declaration

public string[] AriaLabels { get; set; }

Property Value

Type	Description
System.String[]	An array of strings where each string corresponds to the ARIA-label attribute for each input field.

Remarks

The ARIA-label attribute is used to provide an accessible label for each input field in the SfOtpInput component.

Examples

<SfOtpInput AriaLabels=@customLabel></SfOtpInput>
@code{
    private string[] customLabel = ["otp-input-1", "otp-input-2", "otp-input-3", "otp-input-4"];
}

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 raised when the rendering of the SfOtpInput component is completed.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event callback function.

Remarks

This event is raised when the rendering of the SfOtpInput component is completed.

CssClass

Gets or sets one or more CSS classes to customize the appearance of the SfOtpInput.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts a CSS class string separated by space to customize the appearance of the SfOtpInput. The default value is String.Empty.

Disabled

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

Declaration

public bool Disabled { get; set; }

Property Value

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

Remarks

A disabled SfOtpInput is not interactive and cannot update values.

HtmlAttributes

Gets or sets additional HTML attributes for the SfOtpInput.

Declaration

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

Property Value

Type	Description
System.Collections.Generic.Dictionary<System.String, System.Object>	A dictionary containing the HTML attributes and their values.

Remarks

These attributes will be added to the HTML element of the SfOtpInput component.

Examples

<SfOtpInput HtmlAttributes=@CustomAttribute></SfOtpInput>
@code{
    Dictionary<string, object> CustomAttribute = new Dictionary<string, object>()
    {
        { "name", "otp-input" }
    };
}

ID

Sets id attribute for the Otp input element.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

Length

Gets or sets a value indicating the number of Otp input in SfOtpInput.

Declaration

public int Length { get; set; }

Property Value

Type	Description
System.Int32	4 If the count is not set; otherwise The default input count will be considered.

Remarks

The user can control the number of OTP input fields to be rendered.

Examples

<SfOtpInput Length=4></SfOtpInput>

OnBlur

Gets or sets an event callback that is raised when the SfOtpInput component loses focus.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpFocusOutEventArgs>	An event callback function.

Remarks

This event is raised when the SfOtpInput component loses focus.

OnFocus

Gets or sets an event callback that is raised when the SfOtpInput component receives focus.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpFocusInEventArgs>	An event callback function.

Remarks

This event is raised when the SfOtpInput component receives focus.

OnInput

Gets or sets an event callback that is raised each time the value of each Otp input field is changed.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<OtpInputEventArgs>	An event callback function.

Remarks

This event is raised each time the value of each Otp input field is changed.

Placeholder

Gets or sets the text that is shown as a hint/placeholder until the user focuses on or enters a value in SfOtpInput.

Declaration

public string Placeholder { get; set; }

Property Value

Type	Description
System.String	A string representing the placeholder text. If a single character is provided, it will be used for all input fields; otherwise, each character of text will be used for each field.

Remarks

The placeholder is used to provide a hint or placeholder text for the Otp inputs. If text is exceeded the Otp input Length, not considered the provided exceeded character.

Examples

<SfOtpInput Placeholder="x"></SfOtpInput>

Separator

Gets or sets the separator for the Otp input in SfOtpInput.

Declaration

public string Separator { get; set; }

Property Value

Type	Description
System.String	A string representing the separator added between the input fields. The default value is an empty string.

Remarks

The separator can be used to add unique characters between the Otp input fields, such as dashes or hyphen.

Examples

<SfOtpInput Separator="/"></SfOtpInput>

StylingMode

Gets or sets the style variant for the input fields in SfOtpInput.

Declaration

public OtpInputStyle StylingMode { get; set; }

Property Value

Type	Description
OtpInputStyle	An OtpInputStyle value representing the style of the Otp input. The default value is Outlined.

Remarks

The StylingMode can be used to change the display style of the Otp input fields, which can be one of the following:

• Filled
• Outlined
• Underlined

Examples

<SfOtpInput StylingMode="OtpInputStyle.Outlined"></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 type of the Otp input in SfOtpInput.

Declaration

public OtpInputType Type { get; set; }

Property Value

Type	Description
OtpInputType	A OtpInputType value representing the type of the Otp input. The default value is Number.

Remarks

The type indicates the input type of the Otp inputs, which can be one of the following:

• Number
• Text
• Password

Examples

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

Value

Gets or sets the value for the Otp input in SfOtpInput. Supports two-way binding.

Declaration

public string Value { get; set; }

Property Value

Type	Description
System.String	A string representing the value of the input. The default value is an empty string.

Remarks

The value can be used to update the Otp input value dynamically. Define @bind-Value to use two-way binding.

Examples

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

ValueChanged

Gets or sets an event callback that is raised when the Value property is changed.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An event callback function.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

FocusAsync()

Sets the focus to the Otp input for interaction.

Declaration

public void FocusAsync()

FocusOutAsync()

Remove the focus from Otp input if is in focus state.

Declaration

public void FocusOutAsync()

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