Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - OTP with Pattern Validation
A 6-character OTP input accepting both letters and digits using pattern validation with REGEXP_ONLY_DIGITS_AND_CHARS from input-otp library
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some OTP systems send alphanumeric codes mixing letters and numbers—restricting to digits only breaks verification. This React InputOTP uses pattern prop with REGEXP_ONLY_DIGITS_AND_CHARS from input-otp library accepting A-Z, a-z, 0-9 creating flexible code entry. Built with shadcn/ui InputOTP without separator creating continuous 6-slot input, it's perfect for backup codes, recovery keys, alphanumeric verification tokens, or any authentication flow using mixed-character codes requiring both letter and digit support for security or uniqueness.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Standard OTP Input
Basic digit-only OTP
Controlled OTP Input
OTP with state management
OTP in Form with Validation
OTP with React Hook Form
Auto-submit OTP
OTP with automatic submission
Input with Validation
Input validation patterns
Standard Input
Basic input component
Questions you might have
React Input OTP - Standard OTP Input
A basic 6-digit OTP input with separator dividing two 3-digit groups built with shadcn/ui InputOTP components
React Input OTP - OTP with Multiple Separators
A 6-digit OTP input with multiple separators creating three 2-digit groups in XX-XX-XX format built with shadcn/ui InputOTP