Códigos de verificação devem ser rápidos de digitar. OtpInput mostra uma caixa por caractere, avança enquanto você digita, volta com Backspace e aceita um código colado.
Por que ajuda
- Uma caixa por caractere
- Digitação e colagem suaves
- Visual familiar de código de verificação
Onde se encaixa
- Login em duas etapas
- Confirmação por e-mail e telefone
- Códigos de entrega
Exemplo
<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;
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.