Events in Blazor OTP Input component

4 Nov 20251 minute 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.

@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, such as the focused input.

@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, such as the input that lost focus.

@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, such as the input index and the current value.

@using Syncfusion.Blazor.Inputs

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

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