OTP Input Component
Build a 6-digit OTP (One-Time Password) input where each digit has its own box. The input should feel native — like SMS verification forms.
Requirements
- Render 6 individual single-character input boxes
- Typing a digit auto-focuses the next box
- Backspace on an empty box moves focus to the previous box
- Pasting a 6-digit string fills all boxes automatically
- Only allow numeric digits (0–9)
- A Verify button shows the assembled OTP
Key Patterns
useRef array for input referencesinputRefs.current[i].focus()e.key === "Backspace" checkonPaste + clipboardData.getDataArray of state (otp: string[])
Important
Interview Tip
Use useRef<HTMLInputElement[]>([]) to store refs for all 6 inputs. On every change, after updating state, imperatively call inputRefs.current[nextIndex]?.focus(). Paste handling: split the pasted string, fill the array, then focus the last filled index.
Enter verification code
We sent a 6-digit code to your phone.