One time code input

Use it for

• Verifying a phone or email with a short code
• Payment or booking confirmation steps

Avoid

• Codes longer than eight characters
• Letting the boxes hide which digit has focus

How it works

Digits live in one array in state. Typing writes the digit and focuses the next box; backspace in an empty box clears and focuses the previous one; paste or one time code autofill spreads every digit from the current box onward. Each box gets data-filled, and a CSS keyframe on that attribute gives the small pop. When all six are filled the boxes turn accent with a staggered wave.

Accessibility

The boxes sit in a fieldset with a legend, each has a label like Digit 3 of 6, numeric input mode and one-time-code autocomplete on the first. Arrow keys move between boxes. The result is announced through a polite live region. Reduced motion drops the pop and wave.