Checkbox Group
An accessible checkbox group component for multi-select scenarios. Uses fieldset/legend for proper grouping and supports individual checkbox descriptions.
Basic Usage
Simple checkbox group with multiple options.
Selected: design
import { useState } from 'react';
import { AccessibleCheckboxGroup } from '@a13y/react';
function Example() {
const [values, setValues] = useState<string[]>(['option1']);
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
return (
<AccessibleCheckboxGroup
legend="Select options"
options={options}
value={values}
onChange={setValues}
/>
);
}With Descriptions
Add descriptions to provide more context for each option.
CheckboxGroup Props
| Name | Type | Default | Description |
|---|---|---|---|
legend* | string | - | Label for the checkbox group (rendered as fieldset legend) |
options* | CheckboxOption[] | - | Array of checkbox options |
value* | string[] | - | Array of currently selected values |
onChange* | (value: string[]) => void | - | Callback fired when selection changes |
disabled | boolean | false | Disable all checkboxes in the group |
error | string | - | Error message to display |
className | string | - | Optional CSS class for the fieldset |
CheckboxOption Props
| Name | Type | Default | Description |
|---|---|---|---|
value* | string | - | Value of the checkbox option |
label* | string | - | Label text for the checkbox |
description | string | - | Optional description text shown below the label |
Accessibility Features
- ✓Uses
fieldsetandlegendfor semantic grouping - ✓Each checkbox properly associated with its label via
for/id - ✓Descriptions linked via aria-describedby
- ✓Error messages announced to screen readers
- ✓Keyboard accessible with Space to toggle