OTP Input
An accessible one-time-passcode input made of auto-advancing digit boxes, each with a spring-driven pop animation on entry, built with Framer Motion and Tailwind CSS.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/otp-input
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of digit boxes to render |
| value | string | undefined | Controlled value; omit to let the component manage its own state |
| onChange | (value: string) => void | undefined | Called with the joined code whenever any digit changes |
| onComplete | (value: string) => void | undefined | Called once with the full code when every box is filled |
| autoFocus | boolean | false | Focuses the first box on mount |
| disabled | boolean | false | Disables all digit boxes |
| className | string | undefined | Classes applied to the wrapping group element |
| boxClassName | string | undefined | Classes applied to each individual digit box |