Chip

MD3 chips in the four variants — assist, filter, input and suggestion — plus ChipSet, which lays chips out in a wrapping row and makes the whole set a single Tab stop.

Variants

<Chip variant="assist" label="Add to calendar" icon={<EventIcon />} onClick={add} />

Elevated

elevated swaps the outline for a shadow. MD3 defines elevated assist, filter and suggestion chips only.

Filter chips

Filter chips toggle selection: selected / onChange(event, selected) (controlled) or defaultSelected (uncontrolled). A selected filter chip shows a leading check unless showSelectedIcon={false}.

<Chip
  variant="filter"
  label="Vegan"
  selected={selected}
  onChange={(event, next) => setSelected(next)}
/>

Input chips

Input chips represent user-entered items. removable adds a trailing remove button; onRemove(event) fires on its click and on Backspace / Delete while the chip has focus. When you unmount the removed chip, focus moves to its neighbour. avatar renders a 24dp circular leading avatar (it takes precedence over icon).

<ChipSet aria-label="Recipients">
  {people.map((person) => (
    <Chip
      key={person.id}
      variant="input"
      label={person.name}
      avatar={<img src={person.photo} alt="" />}
      removable
      onRemove={() => remove(person.id)}
    />
  ))}
</ChipSet>

Selectable input chips

Input chips opt into the filter-chip selection API — they become selectable (aria-pressed) when you pass selected, defaultSelected or onChange.

<Chip variant="input" label="Ada" selected={selected} onChange={(e, next) => setSelected(next)} />

ChipSet

Wrap related chips in a ChipSet to lay them out 8dp apart and make the set one Tab stop: arrow keys move between chips (and between a chip's primary and remove actions). Chips may be wrapped in other elements, such as a Tooltip.

<ChipSet aria-label="Suggestions">
  <Chip variant="suggestion" label="Sounds good" />
  <Chip variant="suggestion" label="See you then" />
</ChipSet>

Disabled

Accessibility

• The primary action is a native <button>; selectable chips (filter, and input chips that opt in) expose their state with aria-pressed. The forwarded ref points at the root <span>; other props land on the primary button.
• The remove button is named Remove {label} by default — override it (for example to translate it) with getRemoveLabel(label). It is not in the Tab order; reach it with the arrow keys.
• Inside a chip, ← / → step between the primary and remove actions; Backspace / Delete on a removable chip call onRemove.
• ChipSet renders role="toolbar" with a roving tab index: Tab enters the set on the last-focused chip, ← / → (mirrored in RTL) move between chips, Home / End jump to the ends, and disabled chips are skipped. Give it an accessible name with aria-label / aria-labelledby.
• Long labels truncate with an ellipsis; the full label remains the accessible name.

Props

Prop	Type	Default	Description
avatar	ReactNode	—	Leading avatar (input chips only) — rendered 24dp and clipped to a circle, e.g. an `<img>`. Takes precedence over `icon`.
defaultSelected	boolean	false	Uncontrolled initial selected state (filter / input chips).
dragged	boolean	false	Apply the MD3 dragged appearance (state layer + elevation) — for drag-and-drop.
elevated	boolean	false	Whether the chip uses elevated styling (no outline, shadow). MD3 defines elevated assist / filter / suggestion chips only.
getRemoveLabel	((label: string) => string)	(label: string) => `Remove ${label}`	Accessible name of the remove button, from the chip label.
icon	ReactNode	—	Leading icon (18dp).
label *	string	—	Chip label text. Truncated with an ellipsis when the chip is narrower than it.
onChange	((event: MouseEvent<HTMLButtonElement, MouseEvent>, selected: boolean) => void)	—	Fires with the triggering event and the next selected state (filter / input chips).
onRemove	((event: ChipRemoveEvent) => void)	—	Fires when the chip asks to be removed: a click on the remove button, or Backspace / Delete while the chip has focus. When the parent then unmounts the chip, focus moves to the next chip (or the previous one).
removable	boolean	false	Whether a trailing remove button is shown (input / filter removable).
selected	boolean	—	Controlled selected state. Filter chips are always selectable; input chips become selectable when `selected`, `defaultSelected` or `onChange` is given.
showSelectedIcon	boolean	true	Whether to show a leading checkmark when selected (filter chip).
variant	enum	assist	Visual variant.

ChipSet

Prop	Type	Default	Description
children	ReactNode	—	The chips. They may be wrapped in other elements (e.g. a Tooltip).