Data Display
Chip Group
A collection of compact interactive chips for filtering or selecting options. Supports Filter (multi-select) and Choice (single-select) types, horizontal and wrapped layouts, and overflow handling for both desktop and mobile contexts.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features3 checks
- Uses role="group" with aria-label
- Individual chips are focusable with keyboard
- Active state announced to screen readers
When to use this component
✓Do's
- •Filtering content by multiple categories
- •Selecting one option from a small set
- •Displaying active filter selections
✗Don'ts
- •You have more than 10 options, use Select
- •Options are mutually exclusive with many items, use Radio
- •Navigation actions, use Tabs
Do's and Don'ts
✓ Do's
AllPendingApproved
Use short, clear labels. Choice chips should have a clearly visible active state with solid brand fill.
✗ Don'ts
Don't use long labels, keep chips concise (1-3 words). Don't have more than 8 chips; use a dropdown instead.