Search filter
Search filters are used to help refine search results.
When to use this component
Used exclusively for finder frontend templates.
How it works
Search filters are used to help refine search results which appear on the right side of the page.
They display search facets which allow the user to drill deeper down into search results. Helping a user to create a smaller list of things to scan through.
There are four types of filters currently. One with a dropdown of options. One with checkboxes. One with a search bar and checkboxes. And one with open text fields.
On specialist finder, you can also find a small search bar.
As a user interacts with the filters, the search results on the right auto-refresh automatically.
On mobile the same functionality occurs, however the filters move into an accordion and a ‘Go to search results’ call to action appears to help users jump down to the top of their search results. In the past the filters have lived in an interstitial page, this changed around 2021 to the accordion interaction due to accessibility issues with interstitial pages.
Components
The components used within the search filter pattern:
Accessibility criteria
There was an accessibility driven design change made to the mobile filters around 2021.
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue's link.
- Give yourself a high-five.
Help improve this pattern
To help make sure that this page is useful, relevant and up to date, instructions on how to contribute can be found on the GitHub repository (opens in a new tab).