Filters

Filters refine the results in lists, tables, content cards, and charts by including or excluding items based on specific criteria, so only the most relevant information is presented.

Also known as: Filtering.

Anatomy

A. Saved filters menu (optional): Button displaying a user’s saved filter sets.
B. Filter category (required): Brief text describing the general property of a group of items.
C. Applied filter indicator (required): Indicates the number of applied filters within a category.
D. Show all filters button (optional): Button that launches a dialog displaying all available filters.
E. Save filters button (optional): Button that saves the applied filters as a saved set of filters.
F. Applied filter chip (required): Chip representing selected filter options.
G. Clear all filters button (required): Button that removes all selected filters across categories and reset results to default.
H. Filter option (required): Individual value or range of values within a filter category.
I. Apply button (required): Button that applies selected filter options.
J. Clear button (optional): Button that clears the selected filter options within a category.

Usage

Best practices

• Organize filters in a logical order, such as placing the most frequently used at the beginning.
• Always show a summary of active filters at the top of the results area. 
• Provide an intuitive way for users to clear filters individually or to reset results to their default values.
• Clearly indicate which filters are currently active or selected, through badges and chips.

Filtering methods

Filtering methods refer to the different ways users can refine choices in their product experience. These methods can be used within any of the layouts. There are various methods available through this pattern including single-select filtering, multi-select filtering, and filtering with free text input.

Single-select filtering

Single-select filtering is used when only one filter option can be selected from a filter category. Users are limited to a single choice from a predefined group of values. The following components can be used with this filtering method.

Multi-select filtering

Multi-select filtering is used when more than one filter option can be selected, either within a filter category or across multiple categories. Users can select multiple choices from a predefined group of values. The following components can be used with this filtering method.

Filtering with free text input

Filtering with free text input is used when users can enter text to specify the criteria for filtering data. This method allows for more flexible and precise control by enabling users to enter custom keywords, phrases, or values directly. The following components and patterns can be used with this filtering method.

Note: This method isn’t recommended to be used with in-table filters. Reference In-table filters under Layouts for more information.

Loading states

Loading states provide visual feedback that helps users understand that their input is being processed and results will be displayed shortly. This reduces frustration and keeps users informed about the status of their actions.

Progress indicators

Progress indicators provide a clear visual representation to users that a process is ongoing.

• Use indeterminate progress indicators for unknown or longer loading times or for larger, more complex datasets.

Displaying filter options

While filters can serve as a powerful tool for some use cases, they don’t need to be presented in all scenarios. Provide users with the flexibility to minimize or show filters as needed to keep the interface uncluttered.

• Show the essential filters first and display the rest behind a “Show all filters” button.
• Use accordions or “Show more” links to enable users to view additional options within filter categories.

No results

If a filter application fails or there are no filter results available, use meaningful content to explain the situation and give users clear next steps. Reference Messaging for guidance in crafting content for empty state messages.

Layouts

The filters pattern has multiple layouts to accommodate different visual designs and user needs. Choose a layout that fits your product’s navigation, the format in which data is presented, and the filtering method being used. For example, if your product’s navigation is horizontal, a horizontal filter layout might integrate more seamlessly and make better use of space.

Each layout can be used as a starting point to enable different task flows. To learn about the filters task flows and how they work with each layout, visit the Task flows (internal only).

Dropdown filters

This layout represents filter categories as dropdown buttons with listbox or search functionality. As users refine their search by selecting filter options, the selected values appear in a row below the filter categories. This layout can be used with single-select or multi-select filtering methods.

• Use the “Show all filters” button to store additional filters as the screen size gets smaller.
• Enable applied filter chips to wrap to multiple rows if needed.

Advanced search filters

This layout displays filters as form fields placed side by side, including a search field located above the form fields. The search field enables users to search within the table or dataset as a whole. This layout is best for experiences with large datasets or complex queries, because users can simultaneously set multiple filters across categories.

• Include separate “Search” and “Apply” buttons if users need the option to use them as distinct functions.

Filter panel

This layout consists of a persistent vertical panel on the side of the main content area. This layout is best for shopping experiences or other UI applications that display results that reflow easily as the window size reduces. Filters can either be displayed as individual fields or within accordions to prevent overwhelming users.

• Utilize panels or wider areas effectively to display filters without disturbing the main content area.

Filter dialog

In this layout, filters are displayed in a temporary dialog activated by a filter button, typically located in an action bar. The dialog closes when the user selects “Apply” or dismisses it by interacting outside the dialog. Selecting outside the dialog without selecting “Apply” will discard any changes. This layout is best for interfaces with limited space where users apply batch filters.

• Use a filter button to activate the modal, and indicate the amount of active filters with a number badge.
• Use accordions to represent long lists of options to prevent overwhelming users.

In-table filters

In-table filters are specifically used in dynamic tables and enable users to refine the table data directly from a menu in the column header. Users can open a dialog by selecting the options button within the header. Selecting “Apply” closes the dialog and applies the chosen filters. Only one table column can be filtered at a time.

• Always display applied filters outside of the table.
• Align filter labels with column headings.
• Avoid using open input fields with in-table filtering. Consider using the Advanced search filters pattern instead.

Behaviors

Filters have various behaviors to help users refine their choices. Reference the guidance below to learn about common behaviors and features you may implement based on use case.

Applying filters

There are two ways to apply filters: Using a button and instant filtering. For most use cases, using an “Apply” button is preferred as instant filtering can be disorienting to users if the page results reload anytime a selection is made. In some cases, instant filtering is necessary to improve the overall experience. For example, when clearing an applied filter chip, users may expect that action to happen instantly.

Show all filters categories

The “Show all filters” button launches the All filters dialog to display all available filters, including options already displayed in the main view. Displaying all filter categories at once can overwhelm users and push important content off-screen, especially in complex experiences. Filters can be displayed as individual form fields or within accordions.

• Preserve any selections made in accordion categories when they’re collapsed.
• Use badges to display the number of applied filters within the accordion.

Clearing filters

The “Clear all” button removes all active filters and returns the results to an unfiltered state. Users can clear individual filters by selecting the clear button within the chip. If your application has set default filters, such as a preset date range, consider using a “Reset filters” button instead to give users a way to return to that baseline.

Sorting results

Sorting helps users find the information they need by organizing data into a preferred order. It can help identify trends, patterns, or anomalies within a dataset. Unlike filtering, sorting only reorders existing data—it doesn’t hide or remove items. Common ways to sort data include alphabetically, numerically, and chronologically.

• When offering sorting options, provide a default that best fits your use case. For example, if users typically sort alphabetically, make that the default.
• If displaying results in a dynamic table, provide sorting functionality in the column headers. Reference Dynamic table for examples.

Platform considerations

Mobile

When implementing filters in mobile experiences, use the dropdown filters or filter panel. Dialogs are displayed as panels in mobile layouts.

• Allow selected filter chips to scroll horizontally off-screen instead of wrapping to a new line.
• Display filters as form fields or within accordions, depending on the use case.
• Avoid in-table filtering in mobile experiences.

Content

• Use clear, concise text to label filter options and categories.
• Use sentence case for all content except proper nouns or acronyms.
• Limit filter labels to three to five words when possible.
• Follow guidance in Dynamic table when writing table titles, subtitles, column and row headers labels.
• Reference Chips for guidance on creating effective filter chip labels.
• Reference Button for guidance on creating effective button labels.

Column and row headers

• Align filter names with the relevant column header.
• Ensure column headers accurately describe the contents so users can interpret the data without additional context.

Related guidelines