Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Kit parts
OTP input
A one-time code in separate boxes: six by default, digits only unless you ask for letters too. One real input holds the code and sits over the boxes, so a screen reader finds one labelled field. Paste a whole code and every box fills; Backspace steps back; the arrow keys move.
Anatomy
The boxes are drawn from the field’s own well, inset and corner, so they follow every finish and the Quiet volume; nothing new is coloured. The script adds the boxes after the input, lays the input over them with transparent text and caret, and keeps the active box where the caret is. A typed character replaces the one in the active box (the caret selects it).
Variants
- Six digits · typing
- Four digits
- Letters and digits
- Complete
States
- Empty
- Typing
- Complete
- Error
- Disabled
Props and options
| Name | Kind | Description |
|---|---|---|
| value | property | Reads or sets the code; whatever does not belong is dropped. |
| otpClean(raw, length, alphanumeric) | function | What the field keeps of a typed or pasted string: digits (or letters and digits), cut to length. |
Usage notes
Backspace steps back; ← and → move the active box.
Accessibility
- Keyboard: Tab reaches the one field; a typed character fills the active box and moves on; Backspace deletes and steps back; ArrowLeft and ArrowRight move one box, Home and End go to the first and last; pasting a whole code fills every box.
- One labelled input, not six: the boxes are aria-hidden and only show what the input holds, so a screen reader hears “Code from your email, edit text” and the characters as they are typed.
- The active box carries the kit’s focus ring and a caret while the field has the focus; the caret stops blinking under reduced motion.
- An error is the field’s own. Disabled is the input’s own disabled.
- Without the script it is a plain field in its well, and a code can still be typed and posted.
Related parts
Password field
The field’s well with a louvred shutter drawn across its characters and a peek key at the end. Press the key and the shutter slides off to the right, the characters stand open, and the key stays down; press it again and the shutter closes. The key says Show or Hide, and the caret never leaves where it was.
Phone field
A country key and a number in one well, for a contact number. It opens a card with a search box and a list of countries; the number beside it is a plain telephone input that sets itself out in the country’s own grouping as you type, and keeps the caret where it was. Paste an international number and the country follows it. It checks length and shape, not whether a line exists.
Form validation
A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes.