Accessibility

The checkbox follows the WAI-ARIA Checkbox pattern — a control that toggles independently between checked and unchecked (and, when needed, a third mixed state) — and meets WCAG 2.1 AA. Built on a native <input type="checkbox">, an accessible checkbox is reachable and operable from the keyboard, carries a label that names the option it toggles, and reports its checked state to assistive technology — so the choice is clear whether the user is looking at it, listening to it, or tabbing through it.

For designers

• All states (default, hover, selected, disabled, focus) must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
• The checked state must never rely on colour alone — pair it with the check mark, so it survives for colour-blind users. Source: WCAG 1.4.1 Use of Color.
• Focus styles must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover. Source: WCAG 2.4.7 Focus Visible.
• Use semantic colour tokens (e.g. foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.

For developers

Build on a native <input type="checkbox"> and never recreate the control from <div> or <span> — the native element brings the role, state, and keyboard operability that assistive technology relies on. Visible focus is handled by the tng-focus-within utility. When checkboxes are presented in a list, keep sufficient spacing between them to avoid accidental activation. Each box is its own tab stop — unlike a radio group, checkboxes share no roving tabindex, so every box in a group is individually reachable. The per-element roles, names, and states are in the Labelling elements section below.

Keyboard interaction

Key	Action
Tab / Shift + Tab	Move focus to the next / previous checkbox
Space	Toggle the focused checkbox between checked and unchecked

Interactive targets — the box plus its label — must be at least 44 px high for comfortable touch use, comfortably clearing the WCAG AA minimum. Source: WCAG 2.5.8 Target Size (Minimum).

Labelling elements

Give every element the role, name, and state assistive technology needs.

Checkbox

A native <input type="checkbox"> exposes the checkbox role and its checked / unchecked state automatically. Set the third state with the indeterminate JavaScript property — announced as “mixed” — and convey a non-interactive box with the native disabled attribute. Don’t move state to aria-* when the native attribute already carries it.

Label

The checkbox takes its accessible name from the associated <label>, wired with for/id or by wrapping the input. Keep the label visible and self-describing — never leave the name to a title or placeholder, and never replace it with an icon-only control.

Group

<legend> names the <fieldset>, so screen readers announce the shared group label before each option (“Notification preferences, Email, checkbox, not checked”). Use it whenever related checkboxes belong to one question.

Supporting text

Connect helper or error text to the input with aria-describedby so it’s announced after the label. Keep error copy programmatic, not colour-only, so the failure is conveyed to assistive technology too.

Source: WCAG 4.1.2 Name, Role, Value.