Checkbox Group

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Manage several selections on one topic. The group drives the mixed state of a parent select-all checkbox. Pass every child value in allValues.

Don't store the parent checkbox state separately from its children. Keep allValues in sync with the children's values instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Fieldset → CheckboxGroup(allValues) → parent checkbox + value checkboxes

Keyboard and accessibility

Tab moves to each checkbox. Space toggles it. The parent selects or clears all items. It shows as mixed when only some are selected.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { CheckboxGroup, Checkbox, ChoiceLabel } from '@surflane/ui'

<CheckboxGroup
  allValues={['staging', 'production']}
  defaultValue={['staging']}
  aria-label='Environments'
>
  <ChoiceLabel
    control={
      <Checkbox.Root parent>
        <Checkbox.Indicator />
      </Checkbox.Root>
    }
  >
    All environments
  </ChoiceLabel>
  {['staging', 'production'].map((value) => (
    <ChoiceLabel
      key={value}
      control={
        <Checkbox.Root name='environments' value={value}>
          <Checkbox.Indicator />
        </Checkbox.Root>
      }
    >
      {value}
    </ChoiceLabel>
  ))}
</CheckboxGroup>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens