Anatomy
Add new: Let's users choose from different filters or categories of filters.
Filter pills: Pills are used to represent the applied filters.
Clear filters: Removes all applied filters.
Behaviors
Additive
Filters are additive, which means multiple filters can be added to exclude anything that doesn’t match the combined filters.
Picklists
When adding a new filter, users will first select a category
Then users, will select a filter from that category
Once a filter is applied, users can adjust the selected filters by opening the pill dropdown
Responsive
Pills will wrap to multiple lines when space is limited
At the Small breakpoint, the buttons will be displayed in a row above the pills.
Best Practices
1. Mirror data
The filter categories and options should mirror the data. For example, if your data contains "Brand: Acme Inc.", users will expect to see this as a filter option. ¹
2. Search field
Filter categories that contain a large number of choices should include a search to help users quickly find the option they are looking for. ²
3. Filter pill text
The pill text should display the names of the selected filters. The pill will truncate the text when it's max-width is reached.
4. Prioritize filter categories
When there are many available filter categories, the most used filters may be used to pre-filter the data. This can help users adjust and discover additional filters. ³
More
Related Pages
Accessibility
The filter bar component colors follow contrast ratio AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
Additional Reading
Filter UX Design Patterns https://www.pencilandpaper.io/articles/ux-pattern-analysis-enterprise-filtering
Designing Filters That Work: Best Practices and Guidelines https://www.smashingmagazine.com/2021/07/frustrating-design-patterns-broken-frozen-filters/
Defining Helpful Filter Categories and Values for Better UX https://www.nngroup.com/articles/filter-categories-values/