Chip Dismissible Group

Related components

Combines the DismissibleGroup logic with the Chip styling. Use it to show values people have added or applied, such as filters or the classes an assessment is set for, and let them remove each one.

<div style={{ background: "white", padding: 16, borderRadius: 8 }}>
<ChipDismissibleGroup
  onDismiss={(value) => {
    alert(`dismiss ${value}`)
  }}
>
  <ChipDismissibleGroup.Item value="a" appearance="modern" dismissActionLabel="Remove Amira Khan">
    <Icon is={Person} />
    Amira Khan
  </ChipDismissibleGroup.Item>
  <ChipDismissibleGroup.Item value="b" appearance="modern" dismissActionLabel="Remove Year 5">
    Year 5
  </ChipDismissibleGroup.Item>
  <ChipDismissibleGroup.Item
    value="c"
    appearance="modern"
    dismissActionLabel="Remove Pupil Premium"
    disabled
  >
    Pupil Premium
  </ChipDismissibleGroup.Item>
</ChipDismissibleGroup>
</div>

Appearance

appearance="standard | modern" and, for modern, theme="grey | white"

<div style={{ display: "flex", flexDirection: "column", gap: 16, background: "white", padding: 16, borderRadius: 8 }}>
  <ChipDismissibleGroup onDismiss={() => {}}>
    <ChipDismissibleGroup.Item value="a" appearance="standard" dismissActionLabel="Remove Year 5">Year 5</ChipDismissibleGroup.Item>
    <ChipDismissibleGroup.Item value="b" appearance="standard" dismissActionLabel="Remove Maths">Maths</ChipDismissibleGroup.Item>
  </ChipDismissibleGroup>
  <ChipDismissibleGroup onDismiss={() => {}}>
    <ChipDismissibleGroup.Item value="a" appearance="modern" theme="grey" dismissActionLabel="Remove Year 5">Year 5</ChipDismissibleGroup.Item>
    <ChipDismissibleGroup.Item value="b" appearance="modern" theme="grey" dismissActionLabel="Remove Maths">Maths</ChipDismissibleGroup.Item>
  </ChipDismissibleGroup>
  <div style={{ background: "var(--color-grey-100)", padding: 16, borderRadius: 8 }}>
    <ChipDismissibleGroup onDismiss={() => {}}>
      <ChipDismissibleGroup.Item value="a" appearance="modern" theme="white" dismissActionLabel="Remove Year 5">Year 5</ChipDismissibleGroup.Item>
      <ChipDismissibleGroup.Item value="b" appearance="modern" theme="white" dismissActionLabel="Remove Maths">Maths</ChipDismissibleGroup.Item>
    </ChipDismissibleGroup>
  </div>
</div>

Size

size="sm | md | lg"

<div style={{ display: "flex", flexDirection: "column", gap: 16, background: "white", padding: 16, borderRadius: 8 }}>
  <ChipDismissibleGroup onDismiss={() => {}}>
    <ChipDismissibleGroup.Item value="a" size="sm" appearance="modern" dismissActionLabel="Remove Small">Small</ChipDismissibleGroup.Item>
  </ChipDismissibleGroup>
  <ChipDismissibleGroup onDismiss={() => {}}>
    <ChipDismissibleGroup.Item value="a" size="md" appearance="modern" dismissActionLabel="Remove Medium">Medium</ChipDismissibleGroup.Item>
  </ChipDismissibleGroup>
  <ChipDismissibleGroup onDismiss={() => {}}>
    <ChipDismissibleGroup.Item value="a" size="lg" appearance="modern" dismissActionLabel="Remove Large">Large</ChipDismissibleGroup.Item>
  </ChipDismissibleGroup>
</div>

API Reference

ChipDismissibleGroup.Item

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	`standard`	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`disabled`	`boolean`	-	-
`dismissActionLabel`	`string`	`Dismiss`	-
`dismissed`	`boolean`	-	-
`onDismiss`	`() => void`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	`md`	-
`theme`	`"white"` \| `"grey"`	`grey`	-
`value`	`string` \| `number`	-