Filter Chip
Description
The Filter Chip component displays a currently active filter selection. Filter chips appear after a user has selected a filter value — typically via a dropdown — and serve as a visual confirmation of that selection.
Their only interaction is removal: clicking the chip deselects the filter and removes the chip from the interface. Filter chips are always shown with a close icon to make this affordance explicit.
The filter bar and the dropdown controls used to select filters are described separately.
Use Cases
- When displaying currently active filters that the user has applied.
- When individual filters need to be removable without clearing all selections at once.
Usage
Rules & Guidelines
Semantic element: Use a <button> element to ensure keyboard and screen reader accessibility.
Always show the close icon: Filter chips always carry the close icon (.icon--close-16) — it is the primary affordance indicating the chip can be removed. A filter chip without a close icon is not a valid state.
State indicator: Filter chips must show hover, active, and focused states clearly.
Color usage: Filter chips are visually neutral (Gainsboro). Do not apply semantic colors.
Label: Display the selected filter value as the chip label. Keep it short and avoid truncation where possible.
HTML Structure
<button class="filter-chip filter-chip-icon icon--close-16" aria-label="Remove filter: Location">
Location
</button>
Accessibility
- ARIA label: Use
aria-labelto communicate both the action and the filter value (e.g.,aria-label="Remove filter: Location"). The visible label alone does not convey the removal intent. - Keyboard navigation: Filter chips must be reachable via
Taband activatable viaEnterorSpace. - Visible focus state: A clearly visible focus ring must be present at all times for keyboard users.
- Screen reader compatibility: Tested with NVDA and VoiceOver. The button role and
aria-labelmust clearly communicate the remove action. - Color contrast: Chip text must meet WCAG 2.1 AA contrast ratio of 4.5 against the chip background. UI element borders must meet 3.
- Lighthouse validation: Run a Lighthouse accessibility audit on any view using filter chips.
Compliance with the Barrierefreiheitsstärkungsgesetz (2025) requires all interactive elements, including filter chips, to be fully keyboard-operable and screen reader accessible.