role group
Checkbox group draft v0.1.0
Lets people pick any number of options from a short, visible set, under one legend.
A checkbox group shows every option at once, with a legend naming the choice, and lets people check any number of them, including none. It is the grouped form of the Checkbox: the group carries the legend, the shared help text and the error message, and each option its own label, description, value and checked state. Exactly one choice is a Radio group; a long list is a Select.
Decisions
From decisions in packages/components/specs/components/checkbox-group.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.
Anatomy
-
The component is the whole group: a legend, optional help text, the options as a repeated part (label, value, description, checked, disabled) and an error message, on the model of the Radio group. On the web it is a fieldset of native checkboxes sharing one name; a single option stays the Checkbox.
group-of-native-checkboxes· 2026-10-03 · v0.1.0
Color
-
The boxes follow the Checkbox's selection control colors.
selection-control-colors· 2026-10-03 · v0.1.0checkbox-group.control.background.*checkbox-group.control.border-color.*checkbox-group.control.color.*
Layout
-
Options stack vertically by default, 8 px apart; the horizontal orientation puts them on one wrapping line, 16 px apart, as the Radio group.
orientations· 2026-10-03 · v0.1.0checkbox-group.container.gap.*
Size
-
Two sizes as the Checkbox: small (16 px box, 2 px corners, 14 px label) and medium (20 px box, 4 px corners, 16 px label, the default); the box border is 1.2 px.
sizes· 2026-10-03 · v0.1.0checkbox-group.control.size.*checkbox-group.control.border-radius.*checkbox-group.control.border-widthcheckbox-group.option-label.typography.*