Shadcn.io is not affiliated with official shadcn/ui
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
Credit card-style grouping makes some codes more readable—pairs of digits easier to verify than triplets. This React InputOTP uses three InputOTPGroup components with 2 slots each and two InputOTPSeparator components creating XX-XX-XX visual pattern. Built with shadcn/ui InputOTP with flexible separator placement, it's perfect for PIN-style codes, credit card verification, specific code formats requiring pair grouping, or any verification flow where 2-2-2 chunking matches code generation format or improves user verification accuracy.
OTP with Multiple Separators preview
Installation
Related Components
Standard OTP Input
OTP with 3-3 grouping
Controlled OTP Input
OTP with state management
OTP with Pattern Validation
OTP accepting letters and digits
Auto-submit OTP
OTP with automatic submission
Standard Input
Basic input component
OTP in Form with Validation
OTP with React Hook Form
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Controlled OTP Input
A controlled 6-digit OTP input displaying entered value in real-time below the input using React useState with shadcn/ui InputOTP