Filter Bar
ProA horizontal bar of active filter chips with controls for adding, removing, and clearing filters. Each applied filter appears as a removable chip showing the filter name and value. Includes a trigger button (typically "+ Add filter") that opens a dropdown for selecting new filter criteria. Used above data tables and list views to give users control over displayed results.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Horizontal row of filter chips with an "Add filter" button and "Clear all" action. | Use above tables and list views where users need to apply multiple filter criteria. |
| With Tags | ||
| Collapsible | Filter bar that collapses into a summary chip showing the count of active filters. | Use in space-constrained layouts where the full chip row would cause wrapping. |
Usage Guidelines
Give each remove button a descriptive aria-label — e.g., aria-label="Remove filter: Status is Active".
Auto-apply filters on every keystroke for expensive queries — use an "Apply" action.
Provide a "Clear all" button when more than one filter is applied.
Remove the "Clear all" option — users need a quick reset.
Announce filter additions and removals via an aria-live region.
Show an empty filter bar when no filters are applied — hide it or show a placeholder.
Persist filter state in the URL so users can share and bookmark filtered views.
Use filter chips for non-removable, permanent constraints.
Code
Design Tokens
Accessibility
- Wrap the filter bar in role="region" with aria-label="Active filters".
- Each chip's remove button needs aria-label="Remove filter: [name] is [value]" for screen reader clarity.
- Use an aria-live="polite" region to announce when filters are added or removed.
- The "Add filter" trigger should use aria-haspopup="true" and aria-expanded.
- "Clear all" button should announce the result — e.g., "All filters cleared" — via the live region.