Events in Blazor OTP Input

14 Aug 20262 minutes to read

This section describes the OTP Input events triggered by user interaction and component lifecycle. The following events are available in the OTP Input component.

Created

The OTP Input component triggers the Created event when component rendering is completed. Use this event to perform initialization tasks such as focusing the first input or loading related data.

@using Syncfusion.Blazor.Inputs

<SfOtpInput Created="Created"></SfOtpInput>

@code{
    public void Created()
    {
        // Here, you can customize your code.
    }
}

OnFocus

The OTP Input component triggers the OnFocus event when an OTP input field receives focus. The OtpFocusInEventArgs event argument provides details about the focus-in action, including the Index of the focused field, the IsInteracted flag indicating whether the focus was triggered by direct user interaction, and the current complete Value of the OTP input component.

@using Syncfusion.Blazor.Inputs

<SfOtpInput OnFocus="OnFocus"></SfOtpInput>

@code{
    public void OnFocus(OtpFocusInEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnBlur

The OTP Input component triggers the OnBlur event when focus leaves an OTP input field or the component. The OtpFocusOutEventArgs event argument provides details about the blur action. Since OtpFocusOutEventArgs inherits from OtpFocusInEventArgs, it exposes the same properties: the Index of the field that lost focus, the IsInteracted flag indicating whether the blur was triggered by direct user interaction, and the current complete Value of the OTP input component.

@using Syncfusion.Blazor.Inputs

<SfOtpInput OnBlur="OnBlur"></SfOtpInput>

@code{
    public void OnBlur(OtpFocusOutEventArgs args)
    {
        // Here, you can customize your code.
    }
}

OnInput

The OTP Input component triggers the OnInput event when the value of an individual OTP input field changes. The OtpInputEventArgs event argument provides details about the change, including the Index of the field that triggered the change, the PreviousValue of the OTP input component before the change (or null if this is the first input), and the current complete Value of the OTP input component after the change.

@using Syncfusion.Blazor.Inputs

<SfOtpInput OnInput="OnInput"></SfOtpInput>

@code{
    public void OnInput(OtpInputEventArgs args)
    {
        // Here, you can customize your code.
    }
}

See also