3
8
1
Tactile OTP Input
A physical PIN/OTP verification component powered by an invisible native input, floating lens focus tracking, and vertical tumbler digit animations.
Dependencies
motionclsxtailwind-merge
Interaction
Single hidden native input drives multi-slot visualization. A high-contrast floating lens frame glides across digit slots with layout spring physics. Digits flip into view with vertical spring tumbler transitions.
Props
| Prop | Type | Description |
|---|---|---|
| length | number | Number of digit slots in the OTP input. |
| initialValues | string[] | Initial preset values for live showcase display. |
| onComplete | (code: string) => void | Callback fired when all slots are populated. |
| className | string | Additional classes applied to container. |
MIT License. Free to use in personal and commercial projects. Built for Peel UI.