One-time code
Single-character cells that auto-advance, step back on Backspace and accept a pasted code.
Examples
OTP
Anatomy
.otp | Inline row of cells. |
> input | One per character, with maxlength="1" and placeholder=" ". A filled, valid cell takes an accent tint. |
> hr | Optional separator between groups of cells. Skipped by the focus movement. |
API
| Attribute | Values | Description |
|---|---|---|
placeholder | | Required for the filled tint: a cell tints once its placeholder is no longer shown and its value is valid. |
pattern | <regex> | Native: a cell whose character does not match stays untinted. |
maxlength | 1 | Native: one character per cell. |
inputmode | numeric | Native: brings up the number pad on touch keyboards. |
Behaviour
Typing a character moves focus to the next cell, skipping the <hr>; Backspace in an empty cell moves back. A paste keeps only the digits, spreads them across the cells from the first, and focuses the last one filled. Without aequitas.js the cells are independent inputs.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Label each cell ("Digit 1") and wrap the row in an element with
role="group"and anaria-labelthat names the code. - Add
autocomplete="one-time-code"to the first cell so the browser can offer a code from SMS. - The paste handler drops everything but digits, so it only suits numeric codes.
| Key | Effect |
|---|---|
| Backspace | In an empty cell: moves focus to the previous cell. |
| CtrlV / ⌘V | Pastes the code across all cells. |