Form input
OTP input
Paste, autofill, edit, and group a code without multi-input focus traps.OTP input at a glance
A one-time-code field: a row of cells in front of one real input, so paste, SMS autofill and the caret work as in any text field.
- One inputThe cells are decoration. The value lives in a single input with `autocomplete="one-time-code"`, and assistive technology meets one field.
- Alphabet and length`length` sets how many characters the code has, `mode` accepts digits or letters and digits, and `groups` splits the row visually, for example `[3, 3]`.
- Completion`complete` fires once, when the last character arrives — the moment to verify — and `clear` fires when the field is emptied.
A quick look
The default field: six digits with the label above.
Verify on complete
Listen to `complete` rather than watching the model's length: it fires on the transition to full, not on every change.
Name it
The kit ships no default label. Pass `label` or fill `#label`; `labelPlacement="hidden"` hides it visually and keeps the field named.