Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
OTP inputs frustrate users who click slots expecting direct input—focus is on hidden field not visible slots. This React pattern wraps InputOTP in clickable div with cursor-text and onClick focusing ref-attached input—clicking anywhere activates typing. Built with shadcn/ui InputOTP, React useRef, and useState for controlled value, it's perfect for mobile-friendly OTP entry, touch-optimized verification forms, or any OTP flow where enlarged hit areas improve usability and reduce user confusion about where to tap.
Click anywhere on the input to focus and type.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Controlled OTP Input
OTP with state management
Standard OTP Input
Basic OTP without focus wrapper
Auto-submit OTP
OTP with automatic submission
OTP with Paste Optimization
OTP with paste button
Standard Input
Basic input component
Form with Validation
Complete form patterns
Questions you might have
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
React Input OTP - OTP with Paste Optimization
A React OTP input with dedicated paste button using Clipboard API to read and filter pasted codes built with shadcn/ui InputOTP and Button