Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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 keyboard on mobile devices.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Input OTP - Transaction Confirmation
A React transaction confirmation flow with AlertTriangle, Alert component, OTP input, and cancel option built with shadcn/ui InputOTP
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