Version: latest

Universell einsetzbar

InputOtp funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/input-otp) — die Library erkennt die Umgebung automatisch.

InputOTP

InputOTP rendert eine OTP-Eingabe mit separaten Eingabefeldern pro Stelle, automatischem Fokus-Handling und sauberer Tastaturnavigation.

Übersicht

import { InputOTP } from "@prokodo/ui/input-otp"
;<InputOTP
  length={6}
  label="Verification code"
  onComplete={code => verifyCode(code)}
/>

Live PreviewOpen in Storybook ↗

Import

import { InputOTP } from "@prokodo/ui/input-otp"

CSS:

import "@prokodo/ui/input-otp.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`name`	`string`	—	✅	Versteckter Input-Name für Formular-Submit.
`length`	`number`	`6`	—	Anzahl der OTP-Eingabefelder.
`label`	`string`	—	—	Gruppen-Label-Text.
`groupLabel`	`string`	—	—	Zugängliches Gruppen-Label für das OTP-Fieldset.
`groupInstruction`	`string`	—	—	Screenreader-Instruktionstext für die Gruppe.
`disabled`	`boolean`	`false`	—	Alle Eingabefelder deaktivieren.
`errorText`	`string`	—	—	Fehlermeldung unterhalb der Eingaben.
`onChange`	`(value: string) => void`	—	—	Wird mit kombiniertem Wert bei jeder Eingabe aufgerufen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/inputOTP/InputOTP.model.ts für den vollständigen InputOTPProps-Typ.

Design-Tokens

Passe InputOTP über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-otp-gap`	`var(--pk-space-sm)`	Abstand zwischen OTP-Zellen
`--pk-otp-cell-size`	`2.75rem`	Breite und Höhe jeder Zelle
`--pk-otp-cell-radius`	`var(--pk-radius-pill)`	Zellen-Eckenradius
`--pk-otp-gradient-from`	`var(--pk-color-brand)`	Verlauf Start (aktive Zelle)
`--pk-otp-gradient-to`	`var(--pk-color-accent)`	Verlauf Ende (aktive Zelle)

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.5	Eingabezweck identifizieren (AA)	🔍 Manuell prüfen	Formularfelder, die persönliche Daten erfassen, müssen ihren Zweck via HTML-autocomplete-Attribut kommunizieren.
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
3.3.2	Bezeichnungen oder Anweisungen (A)	✅ Erfüllt	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
3.3.7	Redundante Eingabe (A)	🔍 Manuell prüfen	Bereits in derselben Sitzung/demselben Prozess eingegebene Informationen dürfen nicht erneut abgefragt werden, sofern die Wiederholung keinen eigenständigen Zweck erfüllt.
3.3.8	Zugängliche Authentifizierung (Min.) (AA)	🔍 Manuell prüfen	Ein kognitiver Funktionstest (z. B. CAPTCHA, Gedächtnisaufgabe) darf nicht der einzige Authentifizierungsmechanismus sein.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 3 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 InputOTP in Storybook öffnen

Quellcode

src/components/inputOTP/InputOTP.model.ts