shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Standard
OTP with Multiple Separators Input OTP for React
A six-digit code field split into three pairs by two separators.
Some codes are printed in pairs, like 12-34-56. This example splits six slots into three InputOTPGroup blocks of two with an InputOTPSeparator between each, so the field matches the code's printed shape and is easier to copy by eye.
Preview
Installation
FAQ
How are the pairs made?
Three InputOTPGroup parts with two slots each, and an InputOTPSeparator between them. The separators are visual only; the code is still six characters.
How do the slot indexes work across groups?
index counts through the whole code, 0 to 5: 0 and 1 in the first pair, 2 and 3 in the second, 4 and 5 in the third. Don't restart it in each group.
When should I group in pairs?
When your codes are shown in pairs, in an SMS, an email or an authenticator. Matching the field to the printed format makes the code quicker to copy; for codes shown without grouping, one group of six is clearer.
Related
- Standard OTP Input Input OTPA six-digit one-time code field split
- Controlled OTP Input Input OTPA controlled one-time code field that
- OTP with Pattern Validation Input OTPA six-character code field that accepts
- Auto-submit OTP Input OTPA one-time code form that submits on its
- Input with LabelA text input with a label above it
- OTP in Form with Validation Input OTPA one-time code form that checks the code