How do you handle paste in a React OTP input?
Add onPaste handler. preventDefault, get the pasted text from e.clipboardData.getData('text'), filter to numeric, split into characters, and update the values array starting from the current index. Focus the last filled input.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in OTP Input Component in React
Use useState for the values array (e.g., ['', '', '', '']). Use useRef for input references (for focus management). Handle onChange (auto-focus next), onKeyDown (backspace to previous), and onPaste (fill multiple). Call onComplete when all inputs are filled.
Use useRef to store references to each input: inputsRef.current[index]. To focus the next input: inputsRef.current[index + 1].focus(). To focus the previous: inputsRef.current[index - 1].focus().
Use useState with an array: const [values, setValues] = useState(Array(length).fill('')). On change, update the specific index: const newValues = [...values]; newValues[index] = digit; setValues(newValues).
Still have questions?
Browse all our FAQs or reach out to our support team