Shadcn.io is not affiliated with official shadcn/ui
Standard OTP Input
A basic 6-digit OTP input with separator dividing two 3-digit groups built with shadcn/ui InputOTP components
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.
Standard OTP Input preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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