Bekræftelseskoder bør være hurtige at indtaste. OtpInput viser ét felt pr. tegn, går videre, mens du skriver, træder tilbage med Backspace og accepterer en indsat kode.
Hvorfor det hjælper
- Ét felt pr. tegn
- Jævn skrivning og indsættelse
- Velkendt udseende for en bekræftelseskode
Hvor det passer
- To-trins-login
- Bekræftelse via e-mail 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 uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.
Inkluderet i RayCraft Free. Fungerende eksempler findes i GitHub-lager (MIT); det indeholder eksempel- og demokode, ikke bibliotekets kode.