Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Simple OTP verification needs no bells and whistles—just 6 slots and clear visual grouping. This React pattern uses InputOTP with two InputOTPGroup components of 3 slots each separated by InputOTPSeparator creating familiar XXX-XXX format matching SMS codes. Built with shadcn/ui InputOTP primitives and uncontrolled state, it's perfect for basic two-factor authentication, phone verification, email confirmation, or any verification flow where standard OTP entry without extra features provides clean focused user experience.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Controlled OTP Input
OTP with state management
OTP in Form with Validation
OTP with React Hook Form
Auto-submit OTP
OTP with automatic submission
OTP with Pattern Validation
OTP accepting letters and digits
OTP with Multiple Separators
OTP with 2-2-2 grouping
Standard Input
Basic input component
Questions you might have
React Input OTP - OTP with Resend Flow
A React OTP input with countdown timer and resend button preventing spam while allowing code re-requests built with shadcn/ui InputOTP and Button
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