Skip to main content
Back to Home

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.

Select your interests
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.

Notification preferences

CheckboxGroup Props

NameTypeDefaultDescription
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
disabledbooleanfalseDisable all checkboxes in the group
errorstring-Error message to display
classNamestring-Optional CSS class for the fieldset

CheckboxOption Props

NameTypeDefaultDescription
value*string-Value of the checkbox option
label*string-Label text for the checkbox
descriptionstring-Optional description text shown below the label

Accessibility Features

  • Uses fieldset and legend for 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