OTP Input
One-time code input with paste support, grouping, masking and keyboard navigation.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
OtpInputProps
Also accepts all props of Omit<React.ComponentProps<"div">, "onChange" | "defaultValue">
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | — |
| value | string | — | — |
| defaultValue | string | "" | — |
| onChange | (value: string) => void | — | — |
| onComplete | (value: string) => void | — | Called once every slot is filled |
| groupSize | number | 3 | Insert a separator after every N slots, 0 for none |
| mask | boolean | false | Show dots instead of the digits |
| alphanumeric | boolean | false | Accept letters as well as digits |
| invalid | boolean | false | — |
| disabled | boolean | false | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/otp-input.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.