Eingabefelder

OTP code boxes

Eine Reihe von Einzelzeichenfeldern zur Eingabe eines Bestätigungscodes, eine Ziffer pro Feld, wobei der Cursor automatisch vorrückt.

Enter the 4-digit code

We sent a sign-in code to your phone ending in 41.

Masked entry

OTP code boxes verwenden

Eine Reihe von Einzelzeichenfeldern zur Eingabe eines Bestätigungscodes, eine Ziffer pro Feld, wobei der Cursor automatisch vorrückt.

Teste die Vorschau mit Maus und Tastatur. Prüfe den sichtbaren Fokus und das Layout auf schmalen Bildschirmen in deiner eigenen Seite. Nenne deinem Agenten die Nummer oder den Bezeichner, um diese Komponente abzurufen.

Eigenschaften: length, accent, masked

Welche Frameworks sind verfügbar?

Der Katalog enthält diese Versionen: react, vue, svelte, astro, html. Die Vorschau auf dieser Seite verwendet React.

Wie greife ich auf die Implementierung zu?

Vorschau und Beschreibung sind öffentlich. Melde dich mit einem berechtigten Konto an, um Code, Framework-Versionen und Installation zu öffnen.

Verbinde deinen Agenten

Ähnliche Komponenten

2297Addon Input GroupEingabefelderEin Textfeld, das von einer umrandeten Hülle umgeben ist, die ein führendes Symbol, eine nachgestellte Schaltfläche oder Text enthalten kann und einen gemeinsamen Fokusring für die gesamte Gruppe aufweist.

2108Appointment Range CardEingabefelderEine Karte, die ein Datumsraster für einen Monat mit einem Feld für Startzeit und Endzeit darunter kombiniert, um einen Tag und ein Zeitfenster in einem kompakten Block auszuwählen.

2109Appointment Scheduler CardEingabefelderEine einzelne Datumsauswahl, eingerahmt in einer betitelten Karte mit einer Schaltfläche „Zu heute springen“ in der Ecke, gestaltet für die Buchung eines Termins.

2792Auto Grow TextareaEingabefelderEin mehrzeiliges Textfeld, das größer wird, wenn die Person mehr tippt, anstatt in einem festen Feld zu scrollen.

2805Autosize text fieldEingabefelderEine mehrzeilige Texteingabe, die größer wird, wenn die Person tippt, bis zu einer großzügigen Grenze, mit einem Akzentfokusring und einem deaktivierten Status.

2757Avatar profile pickerEingabefelderEine Profil-Setup-Karte: eine Avatar-Bühne, deren Leuchtring sich je nach Auswahl ändert, ein Miniaturbildstreifen zum Wechseln des Avatars und ein validiertes Benutzernamenfeld.