Shadcn.io is not affiliated with official shadcn/ui
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
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.
Masked OTP Input preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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