Chip Toggle Group

Related components

Combines the Toggle Group radix component with the Chip primitive styling

Used as a method for filtering a collection of data. Acts like multiple or single selection. Each chip toggles between selected and unselected. When selected, a checkmark appears as the leading icon.

<ChipToggleGroup
  type="multiple"
  defaultValue={['a', 'b']}
  onValueChange={(value) => {
    console.log(value)
  }}
>
  <ChipToggleGroup.Item value="a">A</ChipToggleGroup.Item>
  <ChipToggleGroup.Item value="b" disabled>
    B
  </ChipToggleGroup.Item>
  <ChipToggleGroup.Item value="c">C</ChipToggleGroup.Item>
  <ChipToggleGroup.Item value="d" disabled>
    D
  </ChipToggleGroup.Item>
</ChipToggleGroup>

Appearance

appearance="standard | modern"

The standard appearance uses the primary brand colours. The modern appearance uses neutral grey tones — unselected chips have no border, and selected chips use bold text.

<ChipGroup gap={2} orientation="vertical">
  <ChipToggleGroup
    type="multiple"
    defaultValue={['a']}
  >
    <ChipToggleGroup.Item value="a" appearance="standard">Standard selected</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" appearance="standard">Standard unselected</ChipToggleGroup.Item>
  </ChipToggleGroup>
  <ChipToggleGroup
    type="multiple"
    defaultValue={['a']}
  >
    <ChipToggleGroup.Item value="a" appearance="modern">Modern selected</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" appearance="modern">Modern unselected</ChipToggleGroup.Item>
  </ChipToggleGroup>
</ChipGroup>

API Reference

ChipToggleGroup.Item

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	`md`	-
`value`	`string`	-