shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · States
Disabled OTP Input Input OTP for React
A disabled one-time code field with a note saying it's disabled.
Sometimes a code field must wait, for example until a code has been sent or while another step finishes. This example sets disabled on InputOTP: the slots are dimmed, can't be focused, and ignore typing and paste. A note under the field says it's disabled.
Preview
Installation
FAQ
What does disabled do?
The slots can't be focused or edited, they're skipped by Tab, and the whole field is dimmed with opacity-50. A disabled field isn't submitted with its form.
When should I disable the code field?
Until a code has been sent, while a code is being verified, or after it's accepted, as the Success State example does. Say why next to the field so the state isn't confusing.
How do I enable it later?
Pass disabled a boolean from state instead of the bare attribute, and set it to false when the field should accept input.
Can a disabled field show a code?
Yes. Give it a default value and the slots show it, dimmed; the docs page's Disabled demo does that.
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
- Input with Character CounterA field that counts the characters typed
- Required Field Validation FormA name and an email field marked with
- Transaction Confirmation Input OTPA payment confirmation screen with a
- OTP with Error State Input OTPA one-time code field that turns invalid