Product UI

CheckboxGroup

CheckboxGroup renders a set of Checkboxes.

Page navigation navigation

React examples

Default

Choices

Choice one

Choice two

Choice three

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

With a caption

ChoicesCaption about the choices

Choice one

Choice two

Choice three

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <CheckboxGroup.Caption>Caption about the choices</CheckboxGroup.Caption>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <CheckboxGroup.Caption>Caption about the choices</CheckboxGroup.Caption>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

With a validation message

See the form pattern documentation for more information on form validation patterns.

ChoicesSomething went wrong

Choice one

Choice two

Choice three

Something went wrong

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
  <CheckboxGroup.Validation variant="error">Something went wrong</CheckboxGroup.Validation>
</CheckboxGroup>

<CheckboxGroup>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
  <CheckboxGroup.Validation variant="error">Something went wrong</CheckboxGroup.Validation>
</CheckboxGroup>

More code examples

See the CheckboxGroup Storybook stories

Selection required

Choices

Choice one

Choice two

Choice three

<CheckboxGroup required>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

<CheckboxGroup required>
  <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
  <FormControl>
    <Checkbox value="one" />
    <FormControl.Label>Choice one</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="two" />
    <FormControl.Label>Choice two</FormControl.Label>
  </FormControl>
  <FormControl>
    <Checkbox value="three" />
    <FormControl.Label>Choice three</FormControl.Label>
  </FormControl>
</CheckboxGroup>

Props

Loading data for checkbox_group...