i

Checkbox group

Choosing · researched

A labelled set of checkboxes from which a person chooses any number of options.

molecule · Carbon: CheckboxGroup · contains checkbox, fieldset

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.Group native: partly antd 6.6.5
Variants
—
Sizes
—
States documented
disabled
Accessibility guidance
no

Wraps options in a div with role=group; each option is a native input[type=checkbox] (Checkbox). Accepts an options array or child Checkbox elements.

1 corrected on re-read
  • states_documented: null → ["disabled"] API table: disabled "If disable all checkboxes"

docs ↗ · code ↗

Carbon

CheckboxGroup native: yes @carbon/react 1.117.0
Variants
horizontal, vertical
Sizes
—
States documented
disabled, error
Accessibility guidance
yes

Renders fieldset + legend (React source). Orientation values are the prop values; invalid, warn, readOnly and disabled props present. Docs describe it inside the Checkbox page.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/checkbox/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CheckboxGroup"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/checkbox/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/CheckboxGroup"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/checkbox/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

Checkboxes native: yes govuk-frontend 6.5.1
Variants
Checkbox items with hints, Add an option for ‘none’, Conditionally revealing a related question
Sizes
Smaller checkboxes
States documented
default, hover, focus, disabled, error
Accessibility guidance
no

Macro renders a fieldset with legend and native input type=checkbox items; includes conditional reveal and an exclusive 'None' option. Docs page headings list no accessibility section.

3 corrected on re-read
  • variants: null → ["Checkbox items with hints","Add an option for ‘none’","Conditionally revealing a related question"] Page headings under How it works; no variant prop in macro-options
  • sizes: null → ["Smaller checkboxes"] Page heading "Smaller checkboxes" (govuk-checkboxes--small)
  • states_documented: ["default","focus","disabled","error"] → ["default","hover","focus","disabled","error"] Page has error examples; disabled item option in macro-options; scss has :hover, :focus, :disabled

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No group element; checkbox.md documents single md-checkbox only. radio.md and checkbox.md leave grouping to the author (role=radiogroup).

Primer

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

Primer React. Built on internal CheckboxOrRadioGroup, which renders a fieldset with legend when a label is given (else a div); children are native checkbox inputs. Status ready.

1 corrected on re-read
  • states_documented: null → ["disabled","error"] Props table has disabled; examples With a validation message (error/success)

docs ↗ · code ↗

Spectrum

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

Implementations: React Spectrum S2 and v3 only (rsp page); SWC has no checkbox-group element (sp-field-group only lays out sp-checkbox children) and spectrum-css has none. S2 builds on React Aria Checkbox, which renders a native input type=checkbox. Not available as a group in installed SWC 1.12.4 (checkbox and field-group are installed separately).

1 corrected on re-read
  • builds_on_native: "yes" → "partly" Group wrapper is a div with role (RAC useCheckboxGroup role=group / RadioGroup radiogroup); items are native input elements

docs ↗ · code ↗

USWDS

Checkbox subset native: yes @uswds/uswds 3.14.0
Variants
default, tile (usa-checkbox__input--tile)
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Index said not shipped; the Checkbox page's own examples are a fieldset with a legend and several checkboxes, using Fieldset and Legend classes. No separate group component or group-level API; the group is the fieldset pattern.

docs ↗ · code ↗

Platform facts

Native elementfieldset with legend containing input type=checkboxAPG Checkbox page: 'If a set of checkboxes is presented as a logical group with a visible label, the checkboxes are included in an element with role group that has the property aria-labelledby'; its mixed-state example uses an HTML fieldset. Spec: fieldset 'represents a set of form controls (or other content) grouped together, optionally with a caption'. MDN fieldset implicit role: group. Tri-state 'select all' checkbox is described in the APG page (aria-checked=mixed) and is optional.
Baseline—
APG patterncheckbox
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. group label (legend) — HTML fieldset: 'The caption is given by the first legend element that is a child of the fieldset'. APG Checkbox: a logical group with a visible label uses role group with aria-labelledby pointing at the label.
  2. checkbox — APG: each checkbox has role checkbox and an accessible label; HTML input type=checkbox.
  3. description text optional — APG Checkbox: additional descriptive static text for a checkbox or checkbox group is referenced with aria-describedby.

Keys the APG binds

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

The seven states

default Each checkbox checked or not checked; APG adds a partially checked state (aria-checked mixed) for a parent checkbox.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Focus is on an individual checkbox; the group container is not focusable.
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled on the fieldset disables all descendant form controls except those in its legend (spec, MDN).
error Inference: MDN input checkbox says validation applies per checkbox (required gives valueMissing on that checkbox); there is no group-level required in HTML for checkboxes, so a group error message is the author's.
loading n/a — Not defined by APG or HTML.

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