Bekreftelseskoder skal være raske å skrive inn. OtpInput viser én boks per tegn, går videre mens du skriver, går tilbake med Backspace og godtar en innlimt kode.
Hvorfor det hjelper
- Én boks per tegn
- Smidig inntasting og liming
- Kjent utseende for bekreftelseskode
Hvor det passer
- Totrinnspålogging
- Bekreftelse via e-post og telefon
- Leveringskoder
Eksempel
<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;
}Et kort utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.