shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Standard
OTP with Pattern Validation Input OTP for React
A six-character code field that accepts letters and digits.
Not every code is numeric. This example accepts letters and digits in six slots, for codes like A7K2P9 from license keys, backup codes or invitations. Other characters are rejected as they're typed or pasted, so the field never holds an invalid code.
Preview
Installation
FAQ
How are letters and digits allowed?
pattern is a regular expression string, ^[a-zA-Z0-9]+$, that every character must match.
What happens to other characters?
They're ignored: a space or a symbol typed into a slot doesn't appear, and pasted text that doesn't match isn't entered.
Are letters case-sensitive?
The field keeps the case that was typed. If your codes aren't case-sensitive, convert the value to upper case before you check it.
Why one group of six?
Alphanumeric codes are usually shown without breaks, so the six slots sit in one InputOTPGroup. Add an InputOTPSeparator if your codes are printed in groups.
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 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
- Error State InputAn invalid email field with an error
- Input with LabelA text input with a label above it