shadcn.io is not affiliated with official shadcn/ui
Input OTP examples · Variants
Masked OTP Input Input OTP for React
A one-time code field blurred until you press the eye button to reveal it.
Codes typed in public can be read over a shoulder. This example blurs the whole field until you press the eye button beside it, which reveals the digits and switches to an eye-off icon to hide them again. Use it for PINs and codes on shared screens.
Preview
Installation
FAQ
How is the code hidden?
The field's wrapper gets blur-sm and select-none while the code is hidden. The digits are still typed normally; they're just unreadable on screen.
How does the eye button work?
Whether the code is shown lives in state. The ghost Button at size icon-md flips it and swaps EyeIcon for EyeOffIcon.
How do screen readers know what the button does?
Its aria-label follows the state: Show code while hidden, Hide code while shown. The icons have aria-hidden.
Can the slots show dots instead?
The slots draw the typed characters, so blurring the field, as here, is the simplest way to hide them.
Related
- Numeric Only OTP Input OTPA six-digit code field that accepts
- Different Length OTP Variants Input OTPFour-, six- and eight-digit code fields
- Password Actions Input GroupA password input with a show/hide button
- Two-Factor Authentication Input OTPA two-factor sign-in screen with an
- OTP with Success State Input OTPA one-time code field that locks and
- Auto-submit OTP Input OTPA one-time code form that submits on its