127 Components
Spring Pin Input
InputsTactile OTP verification code input with per-digit spring impulse bounce, staggered completion wave, and harmonic error shake.
Verification Code
Type digits, paste code, or press non-numeric key to test shake
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/spring-pin-input.json"
Props
TypeScript props supported by <SpringPinInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | 6 | Number of verification code character slots. |
| defaultValue | string | "482" | Initial digits pre-populated in the verification slots. |
| stiffness | number | 420 | Spring stiffness coefficient for keystroke slot bounce. |
| damping | number | 22 | Spring damping coefficient controlling slot oscillation decay. |
| onComplete | (pin: string) => void | — | Callback executed once all PIN code digits are filled |
Key Features
- Auto-advancing numeric slots with Hooke's Law vertical bounce on each keystroke.
- Staggered completion wave across all slots when the final digit is entered, plus full clipboard paste support.
- Damped horizontal harmonic shake when a non-numeric key is pressed.
Keyboard & Accessibility
- Wraps slots in role='group' with individual aria-label='Digit X of N' attributes and inputMode='numeric'.
- Supports Backspace auto-retreat, ArrowLeft/ArrowRight navigation, and multi-digit clipboard paste.
- Disables vertical bounce and horizontal error shake when prefers-reduced-motion is enabled.