OTP / PIN Input
Six-digit one-time passcode entry with auto-focus, auto-advance, backspace navigation, and paste support. For PINs, enable masking to show bullets.
Preview
0/6
0/6
0/4
Error state
Code expired. Request a new one.
Disabled
0/6
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of input boxes. |
onComplete | (value: string) => void | — | Called when all digits are filled. |
type | "numeric" | "alphanumeric" | "numeric" | Input mode and validation. |
mask | boolean | false | If true, shows bullets instead of digits. |
disabled | boolean | false | Disables all inputs. |
error | string | — | Error message shown below input. |
autoFocus | boolean | false | Focus first input on mount. |
Behavior notes
- →Auto-advances focus to next box after digit entry.
- →Backspace moves focus to previous box if current is empty.
- →Paste support: pasting '123456' fills all boxes automatically.
- →autoComplete='one-time-code' triggers SMS autofill on iOS/Android.