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

How it works #

The OTPInput component provides a user-friendly interface for entering one-time passwords (OTP), commonly used for authentication and verification flows.

How to use:

Add the OTPInput component to your page.
Handle the OnOTPChanged event to capture the OTP value as the user types.
Handle the OnOTPCompleted event to respond when the user has entered the complete OTP.
Bind the entered OTP to a variable for display or further processing as needed.

This demo illustrates the basic usage of the OTPInput component, including event handling for OTP entry and completion.

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 #

The OTPInput component allows you to specify the required OTP length, adapting the number of input fields accordingly.

How to use:

Set the Length parameter to define how many digits or characters the OTP should have (e.g., Length="5").
Handle the OnOTPChanged and OnOTPCompleted events as shown in the demo to process the OTP input.
Display or use the entered OTP value as needed in your application.

This demo demonstrates how to configure the OTPInput component for a custom OTP length and handle user input accordingly.

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 Blazor Bootstrap, give it a star on GitHub!

OTPInput

How it works #

Length #

Links

Guides

Community

Other Libraries