Checkbox

Role and semantics

Checkbox renders an element with role="checkbox" through Base UI Checkbox, plus a hidden <input> for forms. The box is named by the <label> around it. The state is reported through aria-checked as true, false or mixed.

Keyboard

Key	Behaviour
Tab	Moves focus to the box; skips it when disabled.
Space	Toggles the state.

Focus

On focus a 2 px color-focus-ring ring appears 2 px outside the box (focus-visible).

Screen reader output

Example	Output
Unchecked	“Option label, checkbox, not checked”
Mixed	“All, checkbox, partially checked”
With a description	The description is read after the name and state

Contrast

The color-border-strong border of an unchecked box has at least 3:1 contrast on the background. The check mark has at least 3:1 contrast on the fill.

WCAG 2.2

Criterion	How Checkbox meets it	What the product team does
1.3.1 Info and relationships	A wrapping <label> and aria-describedby.	Give every box a visible label.
1.4.11 Non-text contrast	Border and mark at 3:1.	Do not thin the border with className.
2.5.8 Target size (minimum)	Box and label are one click area.	Keep the label short but never empty.
4.1.2 Name, role, value	role="checkbox" and aria-checked.	Use the mixed state only on a parent.