Anatomy
- Filter and Search controls
- Applied filters and related actions (remove filters individually or clear all)
- Filtered content
Best Practices
Complex and Simple Filters
In some cases there are only a few controls a user can use to filter the content. In these cases it is easier for the user to directly access these controls instead of having to open a popover or panel to see those few options.
Complex datasets often require multiple filtering options. In these cases it is recommended to accommodate filter options in a separate area than the toolbar. The example below shows a combination of a Filter button and a Popover with filter options. Please note that Popover and checkboxes are not exclusive components for handling complex filters, filter controls should always be tailored to specific use cases.
The above example utilizes the Checkbox Group as an example, however the appropriate filter controls should be determined according to specific use cases.
See more commonly used controls for filtering at the Related Components section.
Separating filter controls and other actions
It is possible to have multiple options for the user to interact with content (eg. data table), such as filtering, searching, exporting or performing actions on certain records, etc. Whether it is a filter button or a few filter controls, it is recommended to keep all action related to filtering separate from other actions. 
This visual separation can be achieved by applying larger space and adding a divider, or both.
- Area for search and filter controls (search bar, filter button, other filter controls)
- Area for other actions (eg. export, add, take action on certain records, etc.)
Spacing
Spacing between tags and link
Tags indicate applied filters and enables the user to remove the filters individually. To remove all filters at once, the user can click on a link to do so. These actions are organized into a container, and the spacing-2xs (12px) spacing token is used to separate them.
Top and bottom spacing for a group of tags
In order to have clear visual separation and to prevent accidental clicks, it is recommended to keep the spacing-md (24px) token for top and bottom of the group of tags and link.
Responsive Guidelines
Wrapping filter indicators
In case there are so many applied filters that the related tags exceed the container width, they should wrap into multiple lines.
Enhancing Filter Experience
The below checklist is referenced from Smashing Magazine’s guidelines on filtering
- Can we avoid a filter icon and show filters as they are?
- If not, what icon do we choose to indicate filtering?
- Is the icon + padding large enough for comfortable tapping?
- Do we put the icon at the top, bottom or floating (mobile/desktop)?
- What exactly happens when the user clicks/taps on the icon?
- How will the icon change on tap/click?
- Will we have some sort of animation or transition on click?
- Will filters appear as full page/partial overlay or slide-in?
- Can we avoid sidebar filtering as it’s usually slow?
- Do we expose popular or relevant filters by default?
- Do we display the number of expected results for each filter?
- Can we use a horizontal swiper to move between filters?
- Can we avoid drop-downs and use only buttons/chips + toggles?
- For complex filters, do we provide search within filters?
- Do we use icons to explain differences between various filters?
- Do we use the right elements for filters, e.g. sliders, buttons, toggles?
- Do filters apply automatically (yes, for slide-ins)?
- Do filters apply manually on confirmation (“Apply”) (yes, for overlays)?
- How do we communicate already selected filters?
- Can selected filters appear as removable pills, chips or tags?
- Do we recommend relevant filters based on selection?
- Do we track incompatibility between selected filters?
- How do error messages or warning appear in the UI?
- Do we allow customers to reset all filters quickly, at once?
- Are filters (or filters button) floating on scroll on mobile/desktop?
- Can users tap on the same spot to open/close filters?