Role and semantics
Section titled “Role and semantics”CheckboxGroup renders a <fieldset> and <legend> through Base UI Fieldset; the group role is named by the legend. The help text and error are linked to the group with aria-describedby.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | Moves focus to each checkbox in turn. |
| Space | Toggles the focused box. |
Each item shows its own focus ring. The group itself takes no focus.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Entering the group | “Group label, group”, the help text, then the first item |
| With an error | The error text is read after the help text |
Contrast
Section titled “Contrast”The legend and help text have at least 4.5:1 contrast on the background. The error is reported in text, not by colour alone.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How CheckboxGroup meets it | What the product team does |
|---|---|---|
| 1.3.1 Info and relationships | <fieldset> and <legend>. |
Give every group a legend. |
| 3.3.1 Error identification | An error in text and aria-invalid on the items. |
Give the items invalid. |
| 3.3.2 Labels or instructions | Legend and help text. | State the rule in the help text. |