OTPInput

The OTPInput component allows users to enter a one-time password (OTP) in a secure and user-friendly manner. The component is designed to enhance the user experience by providing a visually appealing and functional input field for OTP entry.

API Documentation

Example #

Entered OTP: 
<OTPInput OnOTPChanged="HandleOtpChanged"
          OnOTPCompleted="HandleOtpCompleted" />

<div class="mt-3">Entered OTP: @enteredOTP</div>

@code {
    private string? enteredOTP = null;

    private void HandleOtpChanged(string otp)
    {
        enteredOTP = otp;
    }

    private void HandleOtpCompleted(string otp)
    {
        Console.WriteLine($"OTP Completed: {otp}");
        enteredOTP = otp;
    }
}

Length #

To change the length of the OTP input, you can use the Length parameter. This allows you to specify how many characters the OTP input should accept. For example, if you want to create a 5-digit OTP input, you can set the Length parameter to 5.
Entered OTP: 
<OTPInput Length="5"
          OnOTPChanged="HandleOtpChanged"
          OnOTPCompleted="HandleOtpCompleted" />

<div class="mt-3">Entered OTP: @enteredOTP</div>

@code {
    private string? enteredOTP = null;

    private void HandleOtpChanged(string otp)
    {
        enteredOTP = otp;
    }

    private void HandleOtpCompleted(string otp)
    {
        Console.WriteLine($"OTP Completed: {otp}");
        enteredOTP = otp;
    }
}
If you like BlazorExpress.Bulma, give it a star on GitHub!