CheckButton

A selectable Button for multiple selection.

One

Two

Three

Design guidance

When and how to use this

Use a CheckButton to represent a selection that has an immediate effect on the state of other interface items, such as a filter menu. It also works well for lists of tags or labels.

When to consider something else

If a user should only select one of a number of options, use a RadioButton. For forms, alongside other form controls, generally a standard Checkbox is more appropriate.

React

CheckButton composes the Button component and supports everything that Button does in addition to a selected state controlled by the isChecked prop.

<Stack direction="row" spacing="400">
  <CheckButton isChecked={false}>Idle</CheckButton>
  <CheckButton isChecked>Checked</CheckButton>
</Stack>

Prop	Description
`isChecked`	if `true`, the CheckButton will be checked. You'll need to pass `onChange` to update its value (since it is now controlled).
`isDisabled`	if `true`, the CheckButton will be disabled.

Group

Use a CheckButtonGroup to group a set of CheckButton components together that represent a single piece of state. This allows you to get and set state as an array of values and disable the entire group via isDisabled.

<Stack direction="row" spacing="400">
  <CheckButtonGroup defaultValue={['1']}>
    <CheckButton value="1">Button 1</CheckButton>
    <CheckButton value="2">Button 2</CheckButton>
    <CheckButton value="3">Button 3</CheckButton>
  </CheckButtonGroup>
</Stack>

Color Scheme

CheckButton supports color modes, but sometimes a design calls for the colorScheme to override the mode. Pass light or dark to set the color explicitly.

<Stack direction="row" spacing="400" bg="neutral.800" p="400" m="-400">
  <CheckButtonGroup colorScheme="light" defaultValue={['1']}>
    <CheckButton value="1">Light 1</CheckButton>
    <CheckButton value="2">Light 2</CheckButton>
    <CheckButton value="3">Light 3</CheckButton>
  </CheckButtonGroup>
</Stack>

Variant

By default, CheckButton uses the tertiary Button variant. It also supports primary and ghost.

Primary

<Stack direction="row" spacing="400">
  <CheckButtonGroup variant="primary" defaultValue={['1']}>
    <CheckButton value="1">Primary 1</CheckButton>
    <CheckButton value="2">Primary 2</CheckButton>
    <CheckButton value="3">Primary 3</CheckButton>
  </CheckButtonGroup>
</Stack>

Ghost

<Stack direction="row" spacing="400">
  <CheckButtonGroup variant="ghost" defaultValue={['1']}>
    <CheckButton value="1">Ghost 1</CheckButton>
    <CheckButton value="2">Ghost 2</CheckButton>
    <CheckButton value="3">Ghost 3</CheckButton>
  </CheckButtonGroup>
</Stack>

Minimal

Pass isMinimal for the minimal style of each variant which only ever renders a single pixel border.

<Stack direction="row" spacing="400">
  <CheckButtonGroup
    defaultValue="1"
    display="flex"
    flexDirection="row"
    gap="400"
    isMinimal
    variant="ghost"
  >
    <CheckButton value="1">Ghost 1</CheckButton>
    <CheckButton value="2">Ghost 2</CheckButton>
    <CheckButton value="3">Ghost 3</CheckButton>
  </CheckButtonGroup>
</Stack>

Checkbox

Code