Also known as:
Filter barFilter menuFilterable list

Filter Drawer

A filter drawer contains filters. It controls filtering of an entire page.

AnchorNeed to know

  • Use rows or columns to clearly define groups of filter components.

Visuals

UI Kit

Coming soon.

To keep in mind

See the Filtering guidelines for more details about individual filter fields and their behavior. This page only concerns the filter drawer.

Anatomy

  • 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/drawer: 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.

Filter Button

  • 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.

Filter Button Badge

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.

Filter metadata

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.

Filter dropdown

The drawer 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 drawer space. Use analytics to answer general usage questions to inform optimal drawer layout. Consider internal scrolling behavior when the drawer grows too large.

Filter components

Use the filter drawer to house Select and Date Picker components. Do not include Search Fields, which always live outside of the filter drawer.

When to use and when not to use

When to use
  • Use a filter drawer to house filtering on a page that applies to the content of the whole page.
When not to use
  • For filtering a specific section of a page, use a filter bar instead.

See also

External Links

Here are some examples of other existing design systems: