shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Use Cases
Two-Factor Authentication Input OTP for React
A two-factor sign-in screen with an authenticator code and a switch to a backup code.
Two-factor sign-in needs a way out when the phone is lost. This example asks for the six-digit code from an authenticator app and offers Use backup code instead, which swaps the code field for a text input labeled Backup Code. The same Verify button submits either one.
Preview
Installation
FAQ
How does the backup code switch work?
Whether the backup code is used lives in state. The link-style Button with a KeyIcon flips it, and the form renders either the code field or the backup input.
How is the backup field built?
A Field with the label Backup Code, a text Input and the description Enter one of your backup codes.
How is the code validated?
The authenticator code must have six characters, or FieldError shows Authentication code must be 6 characters.. The backup code is passed through; check it on the server.
What happens after Verify?
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. Here it says which method was used and echoes the code.
Related
- Email Verification Flow Input OTPAn email verification screen with a
- SMS Verification Input OTPA phone verification screen with a
- 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
- Required Field Validation FormA name and an email field marked with
- Transaction Confirmation Input OTPA payment confirmation screen with a