Verificatiecodes moeten snel in te voeren zijn. OtpInput toont één vak per teken, gaat verder terwijl je typt, stapt terug met Backspace en accepteert een geplakte code.
Waarom het helpt
- Eén vak per teken
- Soepel typen en plakken
- Vertrouwde uitstraling van een verificatiecode
Waar het past
- Tweestapsaanmelding
- Bevestiging per e-mail en telefoon
- Bezorgcodes
Voorbeeld
<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;
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.