shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Variants
Numeric Only OTP Input OTP for React
A six-digit code field that accepts digits only and opens the numeric keyboard on phones.
Most verification codes are digits. This example accepts only digits in its six slots and asks phones for the numeric keyboard, so people never have to switch keyboards to type the code. A line under the field says so.
Preview
Installation
FAQ
How is the field limited to digits?
pattern is ^\d+$, a regular expression string that every character must match.
How does the phone show the number pad?
inputMode is numeric on InputOTP, which passes it to its input.
What happens when a code with spaces is pasted?
Characters that aren't digits are rejected, so paste a clean code. The Paste Optimization example strips everything but the digits before filling the field.
Can phones fill in the code from an SMS?
Yes, when the field has autocomplete one-time-code, which the component sets, iOS and Android offer the code from a recent message.
Related
- Masked OTP Input Input OTPA one-time code field blurred until you
- Different Length OTP Variants Input OTPFour-, six- and eight-digit code fields
- SMS Verification Input OTPA phone verification screen with a
- Email Verification Flow Input OTPAn email verification screen with a
- Required Field InputA required field with an asterisk in its
- OTP with Error State Input OTPA one-time code field that turns invalid