Description
- Filters allow users to refine data displayed in a list. This enables users to limit the information to just what they are interested in viewing.
- Consider options such as text search, dropdown menus, checkboxes, sliders, or date pickers.
- You should only provide users with filters they really need.
- Filters should be unselected by default_._
Types
There are 2 filtering patterns to choose from when composing a page: Simple and Standard filtering. You can use these patterns in isolation, or together.
Simple Filtering
Standard filtering
Clear all filters
- When filters are applied via the Standard filter pattern, a 'Clear all filters' button appears to the right of the filter button. This is hidden when no filters are applied.
- A badge lets the user know how many filters are applied so they can easily see if any data is currently being manipulated.
Clear filters
Responsive layouts
Breakpoints will change depending on navigation and page layout choices. Below are some examples that show how filtering patterns adaptively change depending on the available space.
Small breakpoint
(Min width 320px +)
Mid breakpoint
(Min width 960px +)
Large breakpoint
Simple filtering (min-width 1280px +)
Standard filtering (min-width 1280px +)
Dos and don'ts
