ChipGroup

Use the ChipGroup component to group multiple Chips in an expandable container.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles

• Do verify that the trigger's visible text matches its accessible name.

Keyboard accessibility and focus

ChipGroup handles focus management out of the box. When the trigger is activated, focus stays on the trigger and the hidden chips expand in place. The user tabs into the revealed chips when ready.

• Do verify that revealed chips appear immediately after the trigger in reading order, so Tab moves into them naturally.
• Don't move focus into the revealed chips on activation. Doing so would suppress the state announcement and screen reader users wouldn't know that the content opened.

State announcements

ChipGroup handles state announcements out of the box: aria-expanded="true" when expanded; aria-expanded="false" when collapsed.

• Do ensure that the revealed chips follow in a logical tab order so users can navigate into them after the state is announced.