Shadcn.io is not affiliated with official shadcn/ui
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
Alphanumeric keyboards slow down code entry on mobile. This React pattern shows InputOTP with REGEXP_ONLY_DIGITS pattern and inputMode set to numeric—triggers mobile numeric keypad for faster entry. Built with shadcn/ui InputOTP and input-otp REGEXP_ONLY_DIGITS constant, it's perfect for SMS verification, email codes, numeric PINs, authenticator apps, banking codes, or any verification where codes are digits-only and mobile-optimized keyboard improves speed and reduces errors.
Numeric Only OTP preview
Installation
Related Components
Masked OTP Input
OTP with blur and visibility toggle
Different Length OTP
4-digit, 6-digit, and 8-digit variants
SMS Verification
Phone verification with countdown
Email Verification
Email code verification flow
Numeric Input
Standard numeric input field
Error OTP State
OTP with error validation
FAQ
Was this page helpful?
Sign in to leave feedback.
Transaction Confirmation
A React transaction confirmation flow with AlertTriangle, Alert component, OTP input, and cancel option built with shadcn/ui InputOTP
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