Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - Masked OTP Input
A React OTP input with blur-sm masking and Eye/EyeOff toggle button for showing or hiding sensitive codes built with shadcn/ui InputOTP
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Public spaces require code privacy during entry. This React pattern shows InputOTP with blur-sm and select-none masking code visibility, plus Eye/EyeOff toggle button switching between hidden and visible states—protects from shoulder surfing. Built with shadcn/ui InputOTP, Button, and Lucide React icons with absolute positioning, it's perfect for sensitive verification, public computer use, shared device authentication, banking codes, or any OTP entry where privacy matters and revealing codes temporarily helps accuracy without permanent exposure.
Toggle visibility to show/hide the entered code.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Numeric Only OTP
OTP with numeric keyboard
Different Length OTP
4-digit, 6-digit, and 8-digit variants
Password Actions
Password with visibility toggle
Two-Factor Auth
2FA authentication flow
Success OTP State
OTP with success indicator
Icon Button
Button with icon only
Questions you might have
React Input OTP - Numeric Only OTP
A React numeric-only OTP input with REGEXP_ONLY_DIGITS pattern and inputMode numeric for mobile keyboard optimization built with shadcn/ui InputOTP
React Input OTP - Different Length OTP Variants
React OTP inputs showing 4-digit, 6-digit, and 8-digit length variations with different grouping patterns built with shadcn/ui InputOTP