Separate slots that behave like one input. Typing moves forward, paste fills every slot.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/input-otpPlayground
Patterns
Invalid and disabled
Verify step
Pattern
Icons animation
Invalid
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/input-otp
Patterns
Six digits split 3 and 3, a masked four digit PIN, or six letters and digits.
Invalid
Disabled
Motion
Accessibility
- One input with autocomplete one-time-code, split visually into slots.
- Digits are numeric on phones for digit patterns.
Motion
- Each digit drops 6 px into its slot in 120 ms and the ring hops forward.
- Paste fills left to right, 40 ms apart.
- With reduced motion, digits appear at once.
Responsive behavior
- 44 by 52 px slots on Web and 46 by 56 px on Mobile.
Performance
- One real input sits over plain spans, so slots add no event listeners.
- Only a changed character animates. The 40 ms stagger runs on paste alone.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
InputOTPfrom@/components/fetaui/input-otp. patternissix-digits,four-pinoralphanumeric. Keys that do not fit the pattern are dropped, and letters are uppercased.onCompletefires on the last character, typed or pasted. Verify on the server there.- For a whole verification card, use OTP Form, OTP Lock or OTP Vault. The demo's Verify button only checks the length.
Related
OTP FormComponentA one time code card. Verify waits for all six digits, and a wrong code keeps them to fix.OTP LockProBlockA padlock over a code field. It opens when the code is right.OTP VaultProBlockA code picked from a turning sphere of digits, or dialled on tumbler wheels.FieldComponentLabel, control and help text as one unit, so they read, validate and announce together.