PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Build the challenge as six controlled, single-digit inputs backed by one six-character value. The key is to treat typing, backspace, arrow keys, paste, and reset as explicit transitions: update the value and move focus together. Derive the status from the value so it cannot drift out of sync.
What the React OTP input challenge requires
ReactChallenges labels challenge #65, “OTP Input,” as intermediate and estimates 60 minutes. Its objective is a six-field control that accepts one digit per field, moves focus as users type, accepts a pasted code, and checks the completed value against a demo code. This is a UI exercise, not a real authentication flow.
- Render six controlled inputs, each limited to one character.
- Focus the first input when the component mounts.
- Accept numeric digits and ignore non-numeric characters.
- Advance focus after a valid digit is entered.
- Support backspace, left and right arrow navigation, and multi-digit paste.
- Show a status based on whether the value is incomplete, matches the demo code, or is complete but incorrect.
- Reset values, focus, and status together.
See the ReactChallenges OTP Input challenge for the original requirements.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →How should OTP values and focus be represented?
Use six controlled inputs for this challenge
Keep the six displayed positions in React state, for example as a six-character string or an array of six strings. Each input displays the value at its index, and its change handler decides what may be stored. Controlled fields make the one-character and numeric rules explicit: reject or filter invalid input before updating state rather than allowing it to remain in the field.
#1 Best Overall
Keep references to the input elements in an array, indexed to match the values. State describes the code; refs let event handlers focus a particular field. Focus is a separate part of the interaction and should be updated alongside state when an action requires it.
How this differs from one input with segmented cells
A single underlying input styled to look like multiple cells can be a useful design in other interfaces, but it does not satisfy this exercise’s requirement to render six fields. For this challenge, use six actual controlled inputs and implement the focus behavior between them.
How do I move focus between OTP fields?
Initial focus and digit entry
On mount, focus the first input using its ref. When a valid digit is entered in a field, store that digit at the matching index and focus the next field when one exists. The final field has no next position, so focus should remain there. Filter out non-numeric characters; they should not become part of the controlled value or trigger an advance as if a digit had been entered.
Backspace depends on whether the field is empty
Handle the two backspace cases deliberately. If the active field contains a digit, clear that digit and keep focus in place. If it is already empty and there is a preceding field, clear the preceding digit and focus that field. This distinction is what makes correcting a code by keyboard feel predictable.
Arrow-key navigation
On ArrowLeft, focus the preceding input when one exists. On ArrowRight, focus the following input when one exists. At the first and last positions, respectively, there is no field in that direction to focus. Because the component owns these key interactions, the challenge recommends preventing the browser’s default behavior in the relevant keyboard handlers.
How do I handle pasting a one-time code?
A paste event may deliver several digits at once; do not rely on it arriving as a sequence of ordinary key presses. Handle the paste explicitly, prevent the default insertion, filter the pasted text to digits, and distribute those digits from the active position across the remaining fields. Stop at the sixth position and ignore any additional digits. Update the controlled values as one operation, then focus the next empty position if there is one, or the last filled position when the paste reaches the end.
This makes paste behavior consistent with the six-field model while avoiding overflow. The challenge explicitly includes pasting and truncating extra digits in its documented test list.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsHow should completion and verification status work?
Derive status from the current values instead of maintaining a separate status state. A separate status can become inconsistent when typing, deleting, pasting, or resetting changes the code. Apply the following decision order:
Best Value
- If fewer than six digits are present, show “Waiting for code…”
- If all six digits match the challenge’s demo code, show “Code verified”.
- If all six positions are filled but they do not match, show “Invalid code. Try again.”
The comparison is only against a demo value supplied for the exercise. It does not issue or verify a real one-time password with a server, and it establishes nothing about code expiry, rate limits, or authentication security.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What should reset do?
Reset is a coordinated state-and-focus transition: clear all six controlled values, focus the first input, and let the derived status return to “Waiting for code…”. Since status follows the values, there is no separate status variable to reset.
What helps on mobile, and what does it guarantee?
The challenge recommends inputMode="numeric" and autoComplete="one-time-code" on the first field. Numeric input mode can hint that a numeric keyboard is appropriate. MDN describes autocomplete as a hint about the expected information and identifies one-time-code as an OTP used for identity verification, commonly received by SMS, email, or an authenticator app. These attributes are browser assistance, not a guarantee that a particular device or browser will autofill the code. See MDN’s autocomplete documentation.
How can you check the interaction model?
The challenge’s documented tests cover the major state and focus transitions. Use them as a checklist when implementing or reviewing the component:
- Six fields render, the first receives initial focus, and the demo code is rendered as expected.
- Entering a digit stores it and advances focus; non-numeric input is filtered.
- Backspace clears the current digit without moving when occupied, and clears the preceding digit and moves focus when the current field is empty.
- ArrowLeft and ArrowRight navigate between available fields.
- Pasting distributes digits, can verify a matching code, and ignores digits beyond position six.
- A completed wrong code displays the invalid-code message.
- Reset clears values, restores first-field focus, and returns to the waiting status.
These are the challenge’s published test cases, not a claim of independent execution. The documented list is available on the challenge page.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
