All components
Otp Input
InputsA one-time-code input where focus auto-advances as you type.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/otp-input.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/otp-input.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 4 | Number of digits. |
| value | string | "" | Initial code. |
| onChange | (code: string) => void | - | Called with the full code on every change. |
Accessibility
- Each box carries an aria-label naming its position.
- Backspace on an empty box moves focus back, matching expectations.
- inputMode=numeric brings up the number pad on mobile.
Dependencies
motionclsxtailwind-merge