shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · States
OTP with Loading State Input OTP for React
A one-time code field that shows a spinner while a complete code is verified.
Verification takes a moment, and silence looks like nothing happened. This example starts verifying as soon as the sixth digit is typed and shows a Spinner with Verifying code... under the field for two seconds, standing in for the request to your server.
Preview
Installation
FAQ
What starts the verification?
The field's completion callback, which fires once every slot is filled.
onComplete fires when the code reaches maxLength.
How is the loading state shown?
A row with our Spinner and the text Verifying code..., rendered only while verifying. The row has role status, so the message is announced.
Is there a real request?
No. A two-second timer stands in for it. Replace it with your API call and turn the loading state off when it settles.
Should the field be locked while verifying?
Often, yes: pass disabled from the same loading state so the code can't change mid-request. The Success State example disables the field once the code is accepted.
Related
- Disabled OTP Input Input OTPA disabled one-time code field with a
- OTP with Error State Input OTPA one-time code field that turns invalid
- OTP with Success State Input OTPA one-time code field that locks and
- Inline with Text SpinnerA spinner beside a Loading data
- Email Verification Flow Input OTPAn email verification screen with a
- Auto-submit OTP Input OTPA one-time code form that submits on its