shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Standard
Standard OTP Input Input OTP for React
A six-digit one-time code field split into two groups of three.
The classic verification code field. This example renders six InputOTPSlot boxes in two InputOTPGroup blocks of three with an InputOTPSeparator between them, matching how codes like 123-456 arrive in messages. Focus moves from box to box as people type, and pasting a whole code fills every box.
Preview
Installation
FAQ
How are the two groups made?
Each InputOTPGroup joins its slots into one block, and InputOTPSeparator draws a minus between blocks. The separator isn't a character, and index counts straight through the groups, 0 to 5.
How does focus move between the boxes?
Typing a character fills the current box and moves to the next; Backspace clears and moves back, and the arrow keys move between boxes. Pasting a full code fills them all at once.
Does it accept letters?
Yes: without a pattern, any character is accepted. Pass a digits-only pattern, as the Numeric Only example does.
Related
- Controlled OTP Input Input OTPA controlled one-time code field that
- OTP in Form with Validation Input OTPA one-time code form that checks the code
- Auto-submit OTP Input OTPA one-time code form that submits on its
- OTP with Pattern Validation Input OTPA six-character code field that accepts
- OTP with Multiple Separators Input OTPA six-digit code field split into three
- Input with LabelA text input with a label above it