Usage
import { OtpInput } from "@/registry/components/otp-input/otp-input";
<OtpInput />Props
| Name | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of boxes |
| separator | boolean | number | false | A small dash between the boxes – true puts it in the middle, a number after that many boxes |
| numeric | boolean | true | Digits only with the numeric keyboard on phones; false allows letters too, shown in capitals |
| value | string | The code – makes the field controlled | |
| defaultValue | string | "" | Starting code when uncontrolled |
| onChange | (code: string) => void | Every change: typing, Backspace, paste, autofill and the clearing after an error | |
| onComplete | (code: string) => void | Called once the last box is filled by the user – the place to start verifying | |
| status | "idle" | "verifying" | "error" | "success" | "idle" | Verifying shimmers and locks the field, error shakes and shows the message, success morphs into the pill |
| errorMessage | ReactNode | "That code didn't work. Try again." | Shown below the boxes after an error, until the user types again |
| clearOnError | boolean | true | Clears the boxes shortly after the shake, ready for the next try |
| successLabel | string | "Verified" | Text in the pill on success |
| onResend | () => void | Shows "Didn't get a code?" below the boxes with a countdown that becomes a Resend button; clicking restarts the countdown | |
| resendIn | number | 30 | Seconds until the code can be resent |
| align | "start" | "center" | "start" | Where the boxes and the lines below them sit |
| disabled | boolean | false | Dims the field and ignores input |
| autoFocus | boolean | false | Focuses the field on mount (without scrolling) |
| label | string | "Verification code" | Accessible name; the number of digits is added |
| className | string | Extra class on the root |
When to use
- Two-step sign-in, email or phone verification, confirming a sensitive action with a one-time code - Any short code people copy from an email or SMS – paste and autofill fill every box at once
When not to use
Passwords or free text; codes longer than ~8 characters.