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 outlined chips: selected chips use the primary brand colours, unselected chips have a grey-600 border on a white background.

The modern appearance has no borders. Selected chips use a light primary background with primary text. Use the theme prop to pick the unselected background so chips stay visible against the surface they sit on:

theme="grey" (default) — grey-100 background, for use on white surfaces.
theme="white" — white background, for use on grey surfaces.

theme only applies to the modern appearance.

<div style={{ display: "flex", flexDirection: "column", gap: 16, background: "white", padding: 16, borderRadius: 8 }}>
  <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" theme="grey">Modern grey selected</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" appearance="modern" theme="grey">Modern grey unselected</ChipToggleGroup.Item>
  </ChipToggleGroup>
  <div style={{ background: "var(--color-grey-100)", padding: 16, borderRadius: 8 }}>
    <ChipToggleGroup
      type="multiple"
      defaultValue={['a']}
    >
      <ChipToggleGroup.Item value="a" appearance="modern" theme="white">Modern white selected</ChipToggleGroup.Item>
      <ChipToggleGroup.Item value="b" appearance="modern" theme="white">Modern white unselected</ChipToggleGroup.Item>
    </ChipToggleGroup>
  </div>
</div>

Size

size="sm | md | lg"

<div style={{ display: "flex", flexDirection: "column", gap: 16, background: "white", padding: 16, borderRadius: 8 }}>
  <ChipToggleGroup type="multiple" defaultValue={['a']}>
    <ChipToggleGroup.Item value="a" size="sm" appearance="modern">Small</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" size="sm" appearance="modern">Small</ChipToggleGroup.Item>
  </ChipToggleGroup>
  <ChipToggleGroup type="multiple" defaultValue={['a']}>
    <ChipToggleGroup.Item value="a" size="md" appearance="modern">Medium</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" size="md" appearance="modern">Medium</ChipToggleGroup.Item>
  </ChipToggleGroup>
  <ChipToggleGroup type="multiple" defaultValue={['a']}>
    <ChipToggleGroup.Item value="a" size="lg" appearance="modern">Large</ChipToggleGroup.Item>
    <ChipToggleGroup.Item value="b" size="lg" appearance="modern">Large</ChipToggleGroup.Item>
  </ChipToggleGroup>
</div>

API Reference

ChipToggleGroup.Item

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