Scale — Input PIN

Install

Examples

4 digits

length sets the number of cells (default 4).

6 digits

Sizes

Two sizes — l (default) and xl.

Negative

Positive

Disabled

Guidelines

Usage

verification codes, 2FA, and short PIN entry. Form-associated — the host submits the joined value and fires a complete event when every cell is filled. For general text, use Input.

Do

Match length to the real code length so paste fills cleanly.
Tell users where the code came from in help-text.
Use state="negative" with a message when a code is wrong.

Don’t

Don’t use split cells for long or alphanumeric input — use Input.
Don’t block paste; many users paste codes from another app.
Don’t rely on colour alone for the error — keep the help text.

Accessibility

Grouping: the cells sit in a role="group" labelled by the field label and described by the help text.
Per-cell label: each cell announces “Digit N of M”; the first cell carries autocomplete="one-time-code" so OS code suggestions work.
Keyboard: typing auto-advances; Backspace clears and steps back; ←/→, Home/End move between cells; paste distributes digits.
Input mode: inputmode="numeric" brings up the number pad on mobile.
Form: form-associated — required sets valueMissing until all cells are filled; emits input, change, and complete.

Properties

Input — single-line text and general form fields.
Help Text — the hint and validation copy below the cells.
Text Area — multi-line text entry.

Input PIN