Skip to content

Checkbox group

Shared state for a set of checkboxes — multi-select lists, permissions, and select-all parents.

Examples

Basic

Protocols

Parent

Overview

Checkbox group holds a string[] value. Child checkboxes use value matching that array. Pass allValues and parent on a checkbox for select-all with an indeterminate state.

tsx

import { Checkbox, CheckboxGroup } from "@standard-ui/react"

<CheckboxGroup defaultValue={["https"]}>
  <label>
    <Checkbox value="http" />
    HTTP
  </label>
  <label>
    <Checkbox value="https" />
    HTTPS
  </label>
</CheckboxGroup>

API

PartRole
CheckboxGroupRoot value state for child checkboxes.
CheckboxUse value for items; parent for select-all.

Guidelines

Do

  • Label the group with a legend, heading, or aria-labelledby
  • Use parent + allValues when select-all is expected

Don't

  • Don't use a group for a single independent checkbox
  • Don't omit value on children inside a controlled group