Back to Forms & Inputs
OTP Input
A 6-slot one-time-code field driven by a single invisible input — real focus, paste, and autofill behavior with a blinking caret in the active slot and a primary-ringed complete state.
Enter the 6-digit code we sent to your phone.
Forms & Inputsotpverificationone-time-codeauth
Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.
Dependencies: lucide-react
Overview
Architecture
One invisible input, six visual slots — never six real inputs
Active slot
border-ring + ring-3 ring-ring/50, blinking caret when empty
Complete
All slots swap to border-primary/40; helper becomes 'Code verified'
Autofill
autoComplete="one-time-code" + inputMode="numeric" for SMS codes