Chip Group

A wrapping layout container for related chips.

Component

Use fd-chip-group when several dismissible chips belong to one visible set, such as active filters or selected tokens. The group manages layout and optional group labeling; it does not add keyboard roving or collection state.

When to use

• Active-filter sets — when users may remove one filter at a time from a visible row.
• Selected-token summaries — when multiple chosen items need consistent spacing and wrapping.
• Responsive pill layouts — when you want a source-of-truth wrapper instead of ad hoc flex markup.

When not to use

• Single chips — one chip does not need a grouping wrapper.
• Toolbar-style action bars — fd-chip-group does not provide composite-widget keyboard behavior.
• Mixed unrelated content — keep the group focused on chips that belong to the same conceptual set.

Examples

Chip groups wrap related removable chips and can expose an optional shared label. View in Storybook →

Properties

Name	Type	Default	Description
label	string | undefined	undefined	Adds role="group" and aria-label when the chip set benefits from a shared accessible name.

Slots

Name	Description
(default)	One or more fd-chip elements.

CSS custom properties

Name	Default	Description
--fd-chip-group-gap	var(--fdic-spacing-2xs, 4px)	Gap between chips in the wrapping layout.

Shadow parts

Name	Description
container	Internal wrapping flex container.

Best practices

Do

Use a group label when the set needs a shared name

Labels like “Active filters” help screen reader users understand the purpose of the chip set.

Don't

Assume the group changes chip behavior

The group only manages layout and optional semantics. Each chip still owns its own remove button.

Content guidelines

• Keep the set concept clear. If the chips do not describe one coherent list, separate them into smaller groups.
• Use short group labels. Shared labels such as “Active filters” or “Selected tags” work better than long sentences.

Accessibility

• fd-chip-group is presentational by default.
• When label is provided, the internal wrapper gets role="group" and aria-label.
• The component does not add arrow-key navigation, roving tabindex, or listitem roles in v1.
• Wrapping preserves DOM order, so keyboard and reading order remain stable as the layout reflows.

Known limitations

• fd-chip-group does not enforce that every child is an fd-chip.
• The component does not manage chip removal or focus recovery after a chip is removed.
• v1 is a layout wrapper only; selection and toolbar behavior are out of scope.

Related components

• Chip — dismissible pill used inside the group
• Badge Group — equivalent layout wrapper for static badges
• Alert — use alerts instead when the information is time-sensitive or requires attention