Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
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
React Input OTP - 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