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