PIN input

Splitting a code into boxes is a formatting decision dressed as a component. The value is one string, and every box is a view of one character of it. That is the implementation rule the good versions follow: one logical value, with the cells either backed by a single hidden input or kept in strict sync, so the thing submitted is never assembled from four fields that drifted apart.

What the boxes buy is legibility. Six digits in one box are a smear; six digits in six boxes are countable at a glance, and the row shows progress without a counter. What they cost is every affordance a plain field has for free. Select all, arrow keys, backspace across a boundary, mobile autofill from an SMS, and paste all have to be rebuilt by hand, and paste is the one users reach for first, because the code is in a message they just read.

Keyboard behaviour is the whole review checklist. Typing fills the current box and moves on. Backspace clears the current box, and on an already empty box steps back and clears the previous one. Arrow keys move between boxes without eating the digits. Pasting a full code from anywhere in the row fills the row and leaves the caret at the end. Anything less and people who type quickly end up with the code scattered.

Announce it as one field. Each box carries its own label, but the group is what has a name and a purpose (role="group" with a label, or one visually hidden input that owns the value), and autocomplete="one-time-code" is what lets a phone offer the code from the message rather than asking someone to memorise six digits and switch apps.