Controls

OTP Input

A one-time-code input with blur-roll digit entry, an animated caret, error shake with auto-clear, and a staggered success pop — paste-friendly and fully accessible.

All components

Try 123456 — or a wrong code for the shake.

Installation

Coming soon. Components will be available via the registry once checkout goes live.

Usage

<OtpInput
  length={6}
  correctCode="123456"
  onComplete={(code) => verify(code)}
/>

Props

Prop	Type	Default	Description
length	number	6	Number of code digits.
onComplete	(code: string) => void	—	Fired when all digits are filled (and valid, if correctCode is set).
correctCode	string	"123456"	Optional expected code — wrong entries shake and clear, correct ones pop green.
autoFocus	boolean	true	Focus the input on mount.
successResetDelay	number \| null	1600	ms to show the verified state before clearing for re-entry. Pass null to stay verified.
className	string	—	Tailwind classes on the root.

Use cases

Two-factor auth
SMS / authenticator code entry with paste support and one-time-code autofill.
Email verification
Signup confirmation codes with built-in success and error feedback.
Payment confirmation
Bank-grade 3DS code prompts that feel trustworthy.
Device pairing
Short pairing codes for TV or IoT login flows.