i

Checkbox

Choosing · researched

A box a person ticks to turn an option on or off, or to pick several items from a list.

atom

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Checkbox native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
no

Docs describe native input elements; indeterminate state demonstrated. Docs page lists no size or variant names.

2 corrected on re-read
  • states_documented: ["default","disabled","error"] → ["default","disabled"] disabled prop; indeterminate prop; no status/error prop documented
  • a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance

docs ↗ · code ↗

Carbon

Checkbox native: yes @carbon/react 1.117.0
Variants
unselected, selected, indeterminate
Sizes
—
States documented
focus, disabled, error
Accessibility guidance
yes

Source renders native input type=checkbox. Also documents read-only and warning states and a nested/group form.

docs ↗ · code ↗

GOV.UK

Checkboxes superset native: yes govuk-frontend 6.5.1
Variants
—
Sizes
small
States documented
default, error, disabled
Accessibility guidance
no

Documented as a group component only; no standalone single checkbox. Options include conditional reveal and an exclusive 'None' behaviour.

docs ↗ · code ↗

Material Web

Checkbox native: yes @material/web 2.5.0
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Source renders <input type=checkbox>. Docs show checked and indeterminate states; the page notes standalone checkboxes need an aria-label.

docs ↗ · code ↗

Primer

Checkbox native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Native input confirmed in source (Checkbox.tsx). Page directs validation to CheckboxGroup; has indeterminate prop and validationStatus error/success.

1 corrected on re-read
  • a11y_documented: "unread" → "yes" Read /accessibility/: Accessibility and usability expectations, Keyboard, Screen reader, Built-in features

docs ↗ · code ↗

Spectrum

Checkbox native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, active, focus, disabled, error
Accessibility guidance
yes

Docs page is the React Spectrum-labelled page; sizes from its Checkbox data file, which has an isEmphasized boolean but no named variants. Native check is Spectrum Web Components 1st-gen, which renders an <input>.

docs ↗ · code ↗

USWDS

Checkbox native: yes @uswds/uswds 3.14.0
Variants
default, tile
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Native input is visually moved off-screen and restyled via label.

docs ↗ · code ↗

Platform facts

Native elementinput type=checkboxNative checkbox supports checked, required, disabled and a script-only indeterminate property for the mixed state.
Baselinewidely · 2015-07-29
APG patterncheckbox
ARIA rolecheckbox
Shipped by7 of 7 systems

Anatomy

  1. control — The checkbox itself (role checkbox); APG gives no part names beyond role and group.
  2. label — Accessible name via label element, aria-labelledby or aria-label.
  3. group optional — APG: elements with role group and aria-labelledby pointing at the group label. fieldset/legend is the HTML equivalent (stated in the APG switch page, not the checkbox page).
  4. description optional — aria-describedby text, optional.

Keys the APG binds

  • SpaceWhen the checkbox has focus, pressing the Space key changes the state of the checkbox.

The seven states

default Unchecked (aria-checked false) unless checked attribute is set.
hover Pointer-only CSS state; not defined by the sources.
focus Tab focus; Space toggles.
active Momentary press state (CSS :active); the checked/mixed state is the persistent one, not 'active'.
disabled disabled attribute; value not submitted.
error A required unchecked checkbox fails validation (valueMissing).
loading n/a — Not defined by APG or HTML; a checkbox records a choice and does not load.

Every cell was read twice, the second time from raw sources by a separate pass. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.