shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Standard
OTP in Form with Validation Input OTP for React
A one-time code form that checks the code has six characters when it's submitted.
A code field in a real form needs a label, a description and an error. This example wraps InputOTP in a Field with One-Time Password, a description saying where the code was sent, and a FieldError that shows Your one-time password must be 6 characters. when the form is submitted too early.
Preview
Installation
FAQ
How is the code validated?
On submit: the handler stops the page from reloading, joins the code, and sets an error when it's shorter than six characters. Otherwise it accepts the code.
How is the error shown?
invalid on Field follows the error and FieldError shows the message. Editing the code clears it.
Can I use a form library instead?
Yes. Set invalid from the library's field state and put its message in FieldError; the field doesn't depend on how you validate.
What happens after a valid submit?
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 reads You submitted the following values: and the code.
Related
- Auto-submit OTP Input OTPA one-time code form that submits on its
- Controlled OTP Input Input OTPA controlled one-time code field that
- Standard OTP Input Input OTPA six-digit one-time code field split
- Required Field Validation FormA name and an email field marked with
- OTP with Resend Flow Input OTPA one-time code field with a 60-second
- Button with Text (Standard)The one filled action