🚀 New React Challenge: OTP Input

One-time-password inputs look simple until you try to build one. Auto-advancing focus, paste handling, and keyboard navigation all have to work together - and that's exactly what this challenge asks you to wire up.

🧩 Overview

Build a six-field OTP input that moves focus as you type, accepts a pasted code, and validates it against a demo code. 👉 https://www.reactchallenges.com/challenges/otp-input

✅ Requirements

• Six single-character inputs are rendered, one per digit.
• The first input is focused on mount.
• Typing a digit fills the focused input and moves focus to the next input.
• Non-numeric characters are ignored.
• Backspace clears the current digit and stays in place.
• Backspace on an already-empty input clears the previous digit and moves focus to it.
• ArrowLeft and ArrowRight move focus between inputs.
• Pasting a code fills the inputs with the pasted digits; digits beyond six are ignored.
• The status text reads "Waiting for code…" while the code is incomplete.
• When all six digits are filled and match the demo code, the status reads "Code verified".
• When all six digits are filled but do not match, the status reads "Invalid code. Try again."
• The reset button clears all inputs, refocuses the first input, and resets the status.

💡 Notes

• The six inputs are controlled: whatever logic you run in the change handler decides what actually sticks in state, so invalid characters never persist.
• You need to move focus between inputs imperatively - plan how to keep a reference to each field.
• A single interaction can deliver more than one digit at once (pasting a full code), not just one keypress.
• Call preventDefault() on the keyboard and paste handlers so the browser doesn't also move the caret or insert text on its own.
• Prefer deriving the status from the current values instead of storing it as separate state that can drift out of sync.

🧪 Tests

• renders six inputs
• focuses the first input on mount
• renders the demo code
• types a digit and moves focus to the next input
• ignores non-numeric characters
• backspace clears the current digit and stays in place
• backspace on an empty input clears the previous digit
• arrow keys move focus between inputs
• pastes the demo code and verifies it
• shows an error for a wrong code
• truncates extra digits when pasting more than six
• reset clears the inputs and refocuses the first

Mastering imperative focus management and derived state in a tiny, familiar UI. That's the skill this challenge leaves you with - useful every time you build auth, 2FA, or payment flows. 🔥 Start the Challenge Now

One-time-password inputs look simple until you try to build one. Auto-advancing focus, paste handling, and keyboard navigation all have to work together - and that's exactly what this challenge asks you to wire up.

🧩 Overview

Build a six-field OTP input that moves focus as you type, accepts a pasted code, and validates it against a demo code. 👉 https://www.reactchallenges.com/challenges/otp-input

✅ Requirements

• Six single-character inputs are rendered, one per digit.
• The first input is focused on mount.
• Typing a digit fills the focused input and moves focus to the next input.
• Non-numeric characters are ignored.
• Backspace clears the current digit and stays in place.
• Backspace on an already-empty input clears the previous digit and moves focus to it.
• ArrowLeft and ArrowRight move focus between inputs.
• Pasting a code fills the inputs with the pasted digits; digits beyond six are ignored.
• The status text reads "Waiting for code…" while the code is incomplete.
• When all six digits are filled and match the demo code, the status reads "Code verified".
• When all six digits are filled but do not match, the status reads "Invalid code. Try again."
• The reset button clears all inputs, refocuses the first input, and resets the status.

💡 Notes

• The six inputs are controlled: whatever logic you run in the change handler decides what actually sticks in state, so invalid characters never persist.
• You need to move focus between inputs imperatively - plan how to keep a reference to each field.
• A single interaction can deliver more than one digit at once (pasting a full code), not just one keypress.
• Call preventDefault() on the keyboard and paste handlers so the browser doesn't also move the caret or insert text on its own.
• Prefer deriving the status from the current values instead of storing it as separate state that can drift out of sync.

🧪 Tests

• renders six inputs
• focuses the first input on mount
• renders the demo code
• types a digit and moves focus to the next input
• ignores non-numeric characters
• backspace clears the current digit and stays in place
• backspace on an empty input clears the previous digit
• arrow keys move focus between inputs
• pastes the demo code and verifies it
• shows an error for a wrong code
• truncates extra digits when pasting more than six
• reset clears the inputs and refocuses the first

Mastering imperative focus management and derived state in a tiny, familiar UI. That's the skill this challenge leaves you with - useful every time you build auth, 2FA, or payment flows. 🔥 Start the Challenge Now