184 Components
Tilt Pin Input
InputsTactile OTP digit pin input with spring keystroke lifts, auto-advance focus, paste parsing, and harmonic error shake mechanics.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/tilt-pin-input.json"
Props
TypeScript props supported by <TiltPinInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 4 | Total number of code digits. |
| onComplete | (pin: string) => void | — | Callback fired when all digits are entered. |
| onChange | (pin: string) => void | — | Callback fired on every digit entry. |
| hasError | boolean | false | Triggers harmonic error shake when true. |
| masked | boolean | false | Masks numbers with dots for sensitive pins. |
Key Features
- Harmonic shake animation across digit boxes upon invalid code submission.
- Spring-pressured vertical lift and scaling on active focused digits.
- Smart clipboard paste parsing that distributes code across boxes seamlessly.
- Full backspace backwards navigation and keyboard controls.
Keyboard & Accessibility
- Individual digit boxes labeled with aria-label='Digit X of Y'.
- Numeric inputMode='numeric' optimized for mobile virtual keypads.
- Respects prefers-reduced-motion for shake effects.