Input OTP
Einmalcode aus einzelnen Ziffernfeldern mit automatischem Weiterspringen, Einfüge-Erkennung und einem Abschluss-Callback. Felder sind 48 px hoch und laden per autocomplete="one-time-code" den SMS-Vorschlag des Systems ein.
Grundform
Sechs Felder à 48 × 56 px mit tabellarischen Ziffern. Tippen springt weiter, die Rücktaste im leeren Feld geht zurück. Ein eingefügter Code füllt alle Felder.
Eingegeben: nichts
Gruppen und alphanumerisch
groups={[3, 3]} setzt einen Trenner nach der dritten Ziffer. Im alphanumerischen Modus sind Buchstaben und Ziffern erlaubt.
Gruppiert
Alphanumerisch
Zustände
invalid markiert alle Felder mit aria-invalid und schüttelt kurz; bei reduzierter Bewegung bleibt nur die Farbe. disabled bleibt sichtbar, ist aber nicht bedienbar.
Im Field
Beschreibung und Fehler werden mit allen Feldern verknüpft.
Den Code aus der SMS eingeben.
Playground
Zeichenvorrat und Zustand umschalten.
Barrierefreiheit
Das Feld trägt autocomplete=one-time-code und inputMode=numeric, damit iOS den SMS-Code vorschlagen kann. Jedes Feld hat die Beschriftung „Ziffer n von 6“; die Gruppe heißt „Einmalcode“. onComplete feuert genau einmal pro vollständigem Code.
Beim Einfügen werden Leerzeichen und Bindestriche entfernt; im numerischen Modus bleiben nur Ziffern übrig. Der Abschluss-Callback ist der richtige Ort für die Verifikation.