Pin Code
A segmented code entry field with automatic focus advancement. Used for OTP, verification codes, and PINs.
Keyboard interaction
| Key | Action |
|---|---|
| Tab | Moves focus to the first empty box (or last filled box). |
| Type a character | Fills the current box and automatically moves focus to the next box. |
| Backspace | Clears the current box. If the box is already empty, moves focus to the previous box. |
| ArrowLeft | Moves focus to the previous box. |
| ArrowRight | Moves focus to the next box. |
| Ctrl/Cmd + V | Pastes and distributes the clipboard text across all boxes starting from the first box. |
Screen reader behaviour
| Attribute / Property | Value / Behaviour |
|---|---|
role="group" (boxes container) | Groups the individual input boxes as a single logical control. |
aria-label (each box) | "Digit N of M" — identifies each box position for screen reader users. |
autocomplete="one-time-code" (first box) | Enables SMS OTP autofill on supported mobile browsers. |
aria-describedby (first box) | Points to the description or message element. |
WCAG 2.2 compliance
1.4.3 Contrast (Minimum) — AAPass
Input text and placeholder colours use design tokens meeting the 4.5:1 minimum contrast ratio against the field background in both themes.
1.4.11 Non-text Contrast — AAPass
The input box borders (--diwa-border) are validated to have ≥ 3:1 contrast against adjacent surface colours.
2.1.1 Keyboard — APass
All boxes are reachable via Tab. Typing fills and auto-advances. Backspace and arrow keys for correction are fully keyboard-operable.
2.4.7 Focus Visible — AAPass
A tokenized focus outline (var(--diwa-focus-ring-width) solid --diwa-border-focus) is shown on the focused input box via :focus-visible.
4.1.2 Name, Role, Value — APass
role="group" groups the boxes as a logical control. Each box has an aria-label of "Digit N of M" so screen reader users understand their position.
Best practices
- Reduced motion — all CSS transitions inside the shadow DOM respond to
prefers-reduced-motion: reduceand are suppressed automatically. - OTP autofill —
autocomplete="one-time-code"is automatically set on the first box, enabling SMS OTP autofill on supported mobile browsers. - Pin length — set the
lengthprop to exactly match the expected code length. Mismatched lengths confuse both sighted users and screen reader users who hear "… of N" in each box label.