OTP

The cells are paint. The "OTP-style input" everyone ships is six separate <input>s with a script moving focus between them, and it is one of the most reliably inaccessible patterns in form design — not because of one bug but because of six.

Paste puts the whole code in the first box or is dropped outright. Autofill has nowhere to go: autocomplete="one-time-code" names one field, so the code offered above the keyboard on iOS and Android cannot be accepted. The form receives six values where the server wants one. A screen reader announces "edit, blank, 1 of 6" six times and never announces the code as a value. Backspace at the start of a box, arrow keys across boxes, select-all and undo all have to be rebuilt by hand, and they are usually rebuilt wrong — Backspace crossing backwards is the one that is missing almost everywhere. And the auto-advance itself moves focus without the user asking, which is a WCAG 3.2.2 On Input problem before any of the rest of it. Every one of those is a defect introduced purely to obtain a visual, and the visual is available from CSS: one input, a monospace face, a letter-spacing on a fixed pitch, and a repeating gradient painting a cell under each character.

The number of cells is --otp-length and it must agree with maxlength; nothing can derive one from the other, because CSS cannot read an attribute into a number.

.otp-center is the one piece of placement this component ships: the field has a fixed content width and is almost always alone on a confirmation screen, so left-aligning it in a full-width form leaves a short row of cells with half a page beside them.