One-Time Code Input Form Block for React

The block takes the paste before the field sees it: it keeps only the digits of what was on the clipboard, drops any beyond six and fills the slots, then checks. That makes "428 193", "428-193" and a code copied with a trailing newline all work the same on every version, which a field that validates each paste against its own pattern would refuse. The slots are marked autocomplete="one-time-code" and numeric, so a phone can offer the code from a text message too.

After a short beat, so you see what you typed, every slot is marked aria-invalid, the line under them says "That code does not match. 2 attempts remain.", the slots are emptied and focus goes to the first, so the next try starts from the start of the field. The foot says the same once in its polite status. After three wrong codes the field stops taking digits, the sentence says why and focus goes to the button, which now reads Request a new code.

Digits fill and advance, Backspace clears the slot and steps back, the arrow keys, Home and End move between slots, and Enter checks or says what is missing. The slots are drawn over one real input, so a screen reader reads a single field and the caret moves across the drawn slots. The slots read left to right even on a right-to-left page, as codes are typed.

Pressing it starts a 30 second count: its label counts down, a fill drains behind it, and it stays focusable but ignores presses until the time is up. It also gives a fresh code: all attempts come back, the slots empty and focus returns to the first one. Nothing is sent in this demo; in your app send the code from the click handler and set the wait from your server's own limit.

The code is 428193, typed in the file and printed once in the hint, and it is compared in the browser. Nothing is sent, unlocked or stored. In your app post the digits to your server, count attempts there (the page's count is only a courtesy), expire codes after minutes and never reveal the code in the page; keep the status line for the server's answer.

Hold the six digits as one string in the form. With react-hook-form, wrap the field in Controller, call field.onChange with the digits from the same handler and run the check in handleSubmit, resetting the field with resetField on a wrong code. With TanStack Form, validate the length on change, check the code in onSubmitAsync and call field.setValue("") on a refusal.