shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Use Cases
Email Verification Flow Input OTP for React
An email verification screen with a six-digit code, a verify button and a link to resend the code.
A complete check-your-email screen: a mail icon in a tinted circle, a heading, the address the code went to, the six-digit field, a Verify Email button that shows Verifying... while it works, and a Resend code link for codes that never arrived.
Preview
Installation
FAQ
How is the header built?
A MailIcon in a size-12 circle with bg-primary/10, a heading, and a line naming the address in font-medium. The icon has aria-hidden.
What happens when Verify Email is pressed early?
A code shorter than six shows Verification code must be 6 characters. in FieldError, centered under the field.
How does the button show progress?
While verifying, the button is disabled and reads Verifying...; a timer stands in for the request. The example shows the result in a status line under the form instead of calling an API. Replace that with your request, and show its error in FieldError when the code is rejected.
What does Resend code do?
It clears the field and any error and says a new code is on its way. Call your API there, and add a countdown as the SMS Verification example does.
Related
- SMS Verification Input OTPA phone verification screen with a
- Two-Factor Authentication Input OTPA two-factor sign-in screen with an
- OTP with Loading State Input OTPA one-time code field that shows a
- Required Field Validation FormA name and an email field marked with
- Transaction Confirmation Input OTPA payment confirmation screen with a
- Auto-submit OTP Input OTPA one-time code form that submits on its