A filter drawer contains filters. It controls filtering of an entire page.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Slider (not built)
- Split Button
- Tile Grid
- Toast Notification
See the Filtering guidelines for more details about individual filter fields and their behavior. This page only concerns the filter drawer.
- Filter button: This expands and collapses the dropdown. It may show a badge as well when filters are applied.
- Filter button badge: This shows the number of filter fields with applied filters.
- Filter metadata: This shows text info about the filters applied.
- Filter dropdown container: This contains all the filter fields and any Apply, Cancel, or Clear buttons. Informally, we sometimes use "drawer" or "dropdown" to refer to the part that drops down. The dropdown container may be collapsed or expanded.
- The filter button appears above the content it filters rather than beside.
- The filter button appears on the left-hand side, except in right-to-left (RTL) languages where it would be placed on the right-hand side of the page layout. The icon and badge would also switch places.
- The filter button uses standard button behavior, but is stylistically unique.
The filter button badge shows the number of filter fields with applied filters. It does not show the number of filter values. For example, if the "Demographic" filter has the "Country" filter field applied with "Australia" and "United States" selected, you would show a badge count of "1" to indicate "Country". For "Country" with its 2 values applied and "Department" with 1 value applied, you would show a badge count of "2" to indicate the 2 filter fields applied.
There is space needed next to the filter button for metadata. It shows relevant info about the content being filtered, such as "Participation 1%, Responses 1 of 170", which is updated by the filters but always shown, even when no filters are applied. The metadata occupies 1 row without wrapping.
The dropdown can grow horizontally and vertically to comfortably fit a few filters and increasing numbers of applied filters. It can grow to a max width that matches the content area width.
- Layout for filter fields:
- Use rows or columns to clearly define groups of filter components.
- Layout for applied filters:
- As people apply filter values, the filter fields may stack, taking up more dropdown space. Use analytics to answer general usage questions to inform optimal dropdown layout. Consider internal scrolling behavior when the dropdown grows too large.
- Use a filter menu to house filtering on a page that applies to the content of the whole page.
- For filtering a specific section of a page, use a filter bar instead.
Here are some examples of other existing design systems: