The answer
After each change, check if all values are filled: if (newValues.every(v => v) && onComplete) onComplete(newValues.join('')). This calls the parent's callback with the full OTP string when all inputs are complete.
OTP Input Component in React
How do you trigger onComplete in a React OTP input?
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.