Shadcn.io is not affiliated with official shadcn/ui
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
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.
Auto-submit OTP preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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