shadcn.io is not affiliated with official shadcn/ui
Dialog examples · Standard
OTP Code Dialog for React
A verification dialog with a six-digit code field and a Verify button that waits for every digit.
A one-time code in a plain text box feels clumsy. This React dialog uses shadcn.io's Input OTP with six slots that move focus as people type, and keeps Verify disabled until the code is complete. It's built on shadcn.io's Dialog on Base UI.
Preview
Installation
FAQ
Should it submit on the sixth digit?
Only if verification is instant and errors are rare. Otherwise enable Verify at six digits, as here, and let Enter submit.
Can people paste the code?
Yes. Pasting a code fills the slots at once, so people can copy it from an email or a text message.
How is the value read?
The field is controlled, and Verify checks that all six digits are there. The value is a string, from onChange, with maxLength of 6.
Should Resend have a cooldown?
Yes: disable it for 30 to 60 seconds after a send and show the countdown. Resend is a link-style Button here; wire it to your request.
Related
- Standard OTP Input Input OTPA six-digit one-time code field split
- Standard DialogA share dialog with a read-only link, a
- Input with LabelA text input with a label above it
- Button with Text (Standard)The one filled action
- Delete Confirmation DialogA delete account dialog whose delete
- Required LabelA label with a destructive asterisk that