shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Use Cases
SMS Verification Input OTP for React
A phone verification screen with a six-digit code and a resend link that unlocks after a countdown.
SMS codes can be slow, so the resend link waits. This example shows a phone icon, the number the code went to, the six-digit field and a Verify Phone Number button, with a 60-second countdown that turns into a Resend code link when it reaches zero.
Preview
Installation
FAQ
How does the resend countdown work?
The seconds left live in state, starting at 60. An effect lowers them once a second and stops at zero, when the text is replaced by Didn’t receive a code? and the Resend code link.
What does Resend code do?
It restarts the countdown, clears the field and any error, and shows Verification code resent. Call your API there.
What happens when the code is too short?
Submitting shows Verification code must be 6 characters. in FieldError; a full code shows Phone number verified successfully!. 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.
How is the header built?
A SmartphoneIcon in a size-12 circle with bg-primary/10, the heading Verify your phone, and the number in font-medium.
Related
- Email Verification Flow Input OTPAn email 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
- OTP with Error State Input OTPA one-time code field that turns invalid
- Transaction Confirmation Input OTPA payment confirmation screen with a
- Auto-submit OTP Input OTPA one-time code form that submits on its