Anatomy
- Filter trigger: The clickable button that opens filter options, consisting of:
- Label: Text that describes what the filter is for (e.g. “Status”)
- Display value: Shows the currently selected filter value(s) (e.g. “Active”)
- Remove button: Clears the filter and hides it from view
- Filter popover: The dropdown interface where all the content would be displayed containing:
- Label: Always shows just the name of the filter (e.g. “Status”) to indicate context
- Logical operator: Select or text element that defines how the filter will behave (e.g. “is,” “is not,” “contains”)—this clarifies how data will be included or excluded
- Search: Optional input for filtering long lists of values inside the popover
- Content: The actual filter UI based on type
- Actions: Actions to apply or clear the filter value
Usage Guidelines
When to use this component
- When users need to refine and narrow down large datasets or content to find specific information more efficiently.
- To help users filter extensive data tables or large lists by selecting relevant criteria.
When not to use this component
- To change the order of information. Use dedicated sorting controls instead.
- For selecting values in forms where users are inputting data.
- For displaying action menus, instead use the Dropdown Menu.
Best Practices
Include a logical operator in the label, after applying the value so users instantly see how the filter works and understand the logic behind it
Combine multiple data points in one filter
Format display value in a way that suits user's best in a specific scenario
Don't use filter component for sorting data. Sorting is not filtering
Allow searching if list of options might be long
General Component Behaviors
Placement
Filters should be positioned above the content they control, stacked horizontally with small gap between them. If filters overflow the available width, they should wrap to a second line to maintain responsiveness in order to avoid introducing scroll.
Applying filters
Explicit
The user must click the ‘Apply’ button to confirm their selection. This updates the filter value and closes the popover. The filter trigger only updates to show the new value after ‘Apply’ is clicked.
Instant
The filter updates immediately as the user selects a value. There’s no ‘Apply’ button and changes are applied in real-time, including to the value shown in the trigger.
Clearing a filter
Clicking ‘clear ‘ instantly removes the selected value, resets the filter’s internal state, and reflects the empty value immediately—no ‘Apply’ required.
Removing a filter
Removes the filter from the UI and clears all related data, including its internal value and any state associated with it.
Logical operators
Users select a logical operator to define how the filter compares values. It updates the same way as the filter content—either instantly or on apply, based on the component’s apply mode. A default operator should always be provided. If only one operator is available, it’s displayed as plain text instead of a select menu.
Types
Single
Allows users to choose one value from a predefined list to use as a filter.
Multi
Allows users to select multiple values from a predefined list to filter data.
Date
Allows users to pick a date range as filter input.
Range
Lets users define a numeric range to filter by.
Text
Accepts text input to be used in filtering.
States
For the default version, we can find the following states.
Variants
Default
Default variant includes a trigger button and a popover. Clicking the trigger opens the popover, which contains the filter label, logical operator, content area, and actions. Use this variant when filters don't need to be persistently visible on the page.
Inline
Inline variant shows filter content directly on a page. Consider using this inline filters are crucial to operate current page (e.g, calendar) or when filters are presented all at once in a separate modality e.g, on mobile devices.
Styles
With Icon
Without Icon
Content Guidelines
- Keep filter labels concise and descriptive, typically 1-3 words that clearly communicate what will be filtered.
- Use sentence case for labels and avoid technical jargon unless your audience expects it.
- For logical operators, choose terms that match your users' mental models.
- Provide meaningful option labels in filter lists. Instead of showing database codes, display human-readable names that users will recognize and understand.
For further information, see the Content Styleguide.
Known Gaps
- Component improvements:
- Add illustrative videos for Behavior section
- Guidelines on Responsive Behavior
- Prevent from publishing all subcomponents that can be confusing for designers
- Improve accessibility documentation and guidelines