shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Use Cases
Transaction Confirmation Input OTP for React
A payment confirmation screen with a security notice, a six-digit code and cancel and confirm buttons.
Sensitive actions deserve a second factor. This example asks for a code before sending $1,250.00 to John Doe: a heading with the amount and the recipient, an Alert titled Security Check explaining why, the six-digit field, and Cancel and Confirm Transaction buttons side by side.
Preview
Installation
FAQ
How is the security notice built?
An Alert with a TriangleAlertIcon, an AlertTitle reading Security Check and an AlertDescription that says where the code was sent.
How are the two buttons laid out?
In a row with gap-2, each flex-1 so they share the width: an outline Cancel of type button and a Confirm Transaction submit button.
What does Confirm Transaction do?
With a full code, it disables itself and reads Confirming... while a timer stands in for the request, then reports success. A short code shows Confirmation code must be 6 characters. in FieldError.
What does Cancel do?
It clears the code and any error and reports Transaction cancelled. In your app, close the dialog or go back.
Related
- Two-Factor Authentication Input OTPA two-factor sign-in screen with an
- Email Verification Flow Input OTPAn email verification screen with a
- OTP with Loading State Input OTPA one-time code field that shows a
- Warning with Title AlertA warning alert with only a title, for a
- SMS Verification Input OTPA phone verification screen with a
- Auto-submit OTP Input OTPA one-time code form that submits on its