Eingabe für sechsstelligen Code
Sechs Kästchen für einen Einmalcode, die von selbst zum nächsten springen; das aktive pulsiert sanft.
Einstellungen
Code
<div class="uv-in2o"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"><input maxlength="1" inputmode="numeric"></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Das ist der Bildschirm nach „Wir haben dir einen Code geschickt“: die Zwei-Faktor-Anmeldung in einer Banking-App, die Bestätigung der Handynummer bei der Registrierung oder die E-Mail-Prüfung vor dem Passwort-Reset. Jedes Kästchen nimmt eine Ziffer, Buchstaben werden ignoriert, mit Rücktaste geht es zurück. Ein OTP-Input in HTML, CSS und etwas JavaScript.
Fügt man einen ganzen Code aus einer SMS ein, landet in dieser Version nur die erste Ziffer. Ergänz das Einfügen, wenn deine Nutzer oft Codes kopieren. Am Handy öffnet sich automatisch der Ziffernblock.