Role and semantics
Section titled “Role and semantics”Base UI OTP Field renders one <input> per character; the first is bound to the label, the others to a position name (“Digit 2 of 6”). The form receives one hidden value. The separator is aria-hidden. The error and description are read through aria-describedby; while invalid every box has aria-invalid.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Enters and leaves the code in one stop (roving tab index). |
| Left and right arrow | Move between boxes. |
| Home, End | Go to the first box, or past the last filled one. |
| Backspace | Deletes a character and goes back a box. |
The active box has a 2 px color-focus-ring ring. After a paste, focus moves to the last filled box.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| First box | “Verification code, edit text” |
| Second box | “Digit 2 of 6, edit text” |
| Error | “The code is wrong. Try again.” |
Contrast
Section titled “Contrast”The box border has at least 3:1; characters in color-text-default have 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How OtpInput meets it | What product teams must do |
|---|---|---|
| 1.3.5 Identify input purpose | autocomplete="one-time-code". |
— |
| 2.1.1 Keyboard | One tab stop, arrow keys between boxes. | — |
| 2.2.1 Timing adjustable | — | Offer a resend when the code expires. |
| 3.3.8 Accessible authentication (minimum) | Paste and autofill work. | Do not block paste. |