Usage
Filters help users narrow down the results of large data sets to find something specific. They give the user the power to refine results based on their desired criteria and eliminate the need for numerous searches.
Do:
- choose the right filters for your content. Too many filters may confuse users, so make sure your filters are relevant and differentiable
- keep the original text or selection a user has made visible so they can see their current filters
- allow the user to remove and clear all filters easily
- truncate larger filtering sets with "Show all categories", making the most popular choices of your users the ones that are initially surfaced
When to avoid
Do not use when there are limited results to present, consider displaying all results without filters.
How this component works
Filtering
Filters can be returned in instant or batch updates. Instant updates return results after each individual selection is made by the user. Consider instant update filters when:
- a user would only expect to make one filter selection at a time
- filters can return results based on an individual selection, ie dropdown or checkbox
Batch updates allows a user to select multiple filters before selecting "Apply filters" to return updated results. Consider batch update filters when:
- users would be expected to select multiple related filters
- filters require multiple actions, ie keywords or date ranges
Display
There are two ways individual filters can be displayed:
- Open: Individual filters are exposed
- Collasped: Individual filters are collasped on load and can be expanded by the user
Instant filter panels can be displayed:
- Visible - Filter panel is exposed on large and small screens
- Down - Filter panel is exposed on large screens but opens down on small screens
Batch filter panels can be displayed:
- Right - Filter panel is exposed on large screens but comes in as full screen from right on small screen
- Down - Filter panel is exposed on large screens but opens down on small screens
Count
Visual cues assist users where filters have been selected and may not always be visible. When filters are collapsed, a tick indicates to the user that a selection has been made within that field.
Small screens
On small screens, filters can be launched using the mobile filter icon. When a user selects "Filter results" the filters open in full screen so the user can navigate and select desired filters.
For batch updates:
- "Back" bar is sticky to top of screen and on selection closes filtering window with no updates to results.
- "Apply filters" button is sticky to bottom of screen and on selection closes filtering window and displays updated results.
- "Apply filters" is disabled if no filters are selected
- When a filter is selected the icon changes to filled version and displays number of filters selected in brackets.
For instant updates:
- For filters that open down, when a filter is selected the icon changes to filled version and displays number of filters selected in brackets