Bestätigungscodes sollten schnell einzugeben sein. OtpInput zeigt ein Feld pro Zeichen, springt beim Tippen weiter, geht mit der Rücktaste zurück und akzeptiert einen eingefügten Code.
Warum es hilft
- Ein Feld pro Zeichen
- Flüssiges Tippen und Einfügen
- Vertrautes Aussehen eines Bestätigungscodes
Wo es passt
- Anmeldung in zwei Schritten
- Bestätigung per E-Mail und Telefon
- Lieferpins
Beispiel
<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;
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.