Input OTP
A one-time-passcode input rendered as a row of single-character slots. Auto-advances on input, supports paste-fill across all slots, and emits onComplete once filled.
-
Anatomy
- InputOTP — Root.
- InputOTPGroup — A horizontal cluster of slots.
- InputOTPSlot — A single character cell with a fake caret indicator.
- InputOTPSeparator — A small dot between groups.
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 6 | Number of slots. |
value | string | — | Controlled current value. |
onChange | (value: string) => void | — | Called as the user types. |
onComplete | (value: string) => void | — | Called when the value reaches length. |
mask | boolean | false | Display dots instead of digits. |
autoFocus | boolean | false | Focus the first slot on mount. |