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.
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:
This demo illustrates the basic usage of the OTPInput component, including event handling for OTP entry and completion.
How to use:
- Add the
OTPInputcomponent to your page. - Handle the
OnOTPChangedevent to capture the OTP value as the user types. - Handle the
OnOTPCompletedevent to respond when the user has entered the complete OTP. - Bind the entered OTP to a variable for display or further processing as needed.
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:
This demo demonstrates how to configure the OTPInput component for a custom OTP length and handle user input accordingly.
How to use:
- Set the
Lengthparameter to define how many digits or characters the OTP should have (e.g.,Length="5"). - Handle the
OnOTPChangedandOnOTPCompletedevents as shown in the demo to process the OTP input. - Display or use the entered OTP value as needed in your application.
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;
}
}