shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Behavior
OTP with Enhanced Focus Management Input OTP for React
A one-time code field wrapped in a label, so a click anywhere on it focuses the code.
Small boxes are easy to miss. This example wraps the field in a Label, so a click anywhere on it, including the gaps and the separator, focuses the code and people can start typing. A hidden label text names the field for screen readers.
Preview
Installation
FAQ
How does a click anywhere focus the field?
A label sends a click on itself to the first field inside it. Wrapping InputOTP in Label makes the whole area, gaps included, a click target for the code.
How is the field named for screen readers?
A span with sr-only inside the label reads One-time password, which becomes the field's accessible name.
What happens when I click a box directly?
The slots are drawn over one input that covers the field, so a click on any box focuses it and the caret goes to the next empty slot.
Related
- Controlled OTP Input Input OTPA controlled one-time code field that
- Standard OTP Input Input OTPA six-digit one-time code field split
- Auto-submit OTP Input OTPA one-time code form that submits on its
- OTP with Paste Optimization Input OTPA one-time code field with a Paste Code
- Input with LabelA text input with a label above it
- Required Field Validation FormA name and an email field marked with