Los códigos de verificación deben introducirse rápido. OtpInput muestra una casilla por carácter, avanza al escribir, retrocede con Retroceso y acepta un código pegado.
Por qué ayuda
- Una casilla por carácter
- Escritura y pegado fluidos
- Aspecto familiar de código de verificación
Dónde encaja
- Inicio de sesión en dos pasos
- Confirmación por correo y teléfono
- Códigos de entrega
Ejemplo
<OtpInput @bind-Value="_code" Label="Verification code" Length="6" Completed="@(code => _done = code)" />
<OtpInput Label="PIN (hidden)" Length="4" Mask="true" />
<span>Code: @(_code ?? "") @(_done is null ? "" : "(complete)")</span>
@code {
private string? _code;
private string? _done;
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.