Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Input OTP - Auto-submit OTP
A React OTP input that automatically submits the form when all 6 digits are entered using shadcn/ui InputOTP with React Hook Form
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Users expect OTP codes to submit automatically—no submit button needed. This React pattern watches InputOTP value length with onChange triggering form.handleSubmit when 6 digits entered—instant verification flow. Built with shadcn/ui InputOTP, React Hook Form, Zod validation, and Sonner toast, it's perfect for two-factor authentication, phone verification, email confirmation codes, or any security flow where immediate submission improves UX and matches user expectations from SMS auto-fill behavior.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
OTP in Form with Validation
OTP with manual submit button
OTP with Resend Flow
OTP with countdown timer
Controlled OTP Input
OTP with state display
Form with Validation
Complete form patterns
OTP with Paste Optimization
OTP with paste button
Standard Input
Basic input component
Questions you might have
React Input Group - API Key Info
A React API key input with info icon tooltip explaining where to find the key built with shadcn/ui InputGroup and Tooltip
React Input OTP - OTP with Enhanced Focus Management
A React OTP input with enhanced focus management allowing clicks anywhere on the container to focus the input using shadcn/ui InputOTP with useRef