shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · States
OTP with Error State Input OTP for React
A one-time code field that turns invalid and shows an error when the code is wrong.
A wrong code should be obvious at once. This example checks the code when the sixth digit is typed; anything but 123456 marks the slots invalid, with destructive borders, and shows Invalid code. Please try again under the field. Editing the code clears the error.
Preview
Installation
FAQ
When is the code checked?
In the change handler, once the code has six characters. A shorter code clears the error, so it disappears as soon as people start correcting.
How do the slots turn red?
Each InputOTPSlot gets aria-invalid while there is an error, which its styles turn destructive.
How is the error shown?
A paragraph in text-destructive with role alert, rendered only while there's an error, so screen readers announce it when it appears.
Which code is accepted?
123456, the VALID_CODE constant, as the hint under the field says. In your app, send the code to the server and show its error instead.
Related
- OTP with Loading State Input OTPA one-time code field that shows a
- OTP with Success State Input OTPA one-time code field that locks and
- Min/Max Length Validation FormA username of 3 to 20 characters and a
- Optional Field InputA field whose label marks it as optional
- SMS Verification Input OTPA phone verification screen with a
- Disabled OTP Input Input OTPA disabled one-time code field with a