patterns icon

Filter

Filters are used to set parameters on datasets. They help users refine results to find relevant content.


Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

In the design system v1, filter was a component named, “Filtering.” It is now considered a pattern that has an established, recognizable behavior. It is not a standalone component, but instead enabled through other, frequently combined, components.

Layout

Consider your product, its data, and your users when choosing a layout. All layouts should have a visual logic. The following are examples of how filters may look and function. Adjust your designs according to best practices (see Resources) for your experience.

Alignment

Vertical

Vertical filters feature accordions that can expand to show filtering options. The accordion contains additional components that determine the filter’s selection method, such as radio buttons, checkboxes, or dropdowns.

An example of vertical filters in accordions showing applied filters: 64 GB RAM, 32 GB RAM, and 2 TB storage or more.

Vertical filters are aligned to the left side of a page.

Horizontal

Horizontal filters feature dropdowns that open to show filtering options. The dropdown contains additional components that determine in the filter’s selection method, such as radio buttons, checkboxes, or dropdowns.

An example of horizontal filters in dropdowns showing applied filters: Fixed rate (service type), South Bend, IN (location), and Pending activation (status).

Horizontal filters are aligned to the top of a page.

Responsive

For mobile and smaller screens, use vertical filters. Present filtering options large enough so they are easily viewed and applied. As an example, use either a modal or drawer with accordions to expose filtering with multiple options. In these instances, the component containing the filters should include a close button so users can return to the page content and view results.

An example of filters in a drawer showing applied filters: 64 GB RAM, 32 GB RAM, and 2 TB storage or more.

Responsive designs are particularly important consideration for e-commerce experiences as consumers frequently shop from their phones.

Selection methods

Choose the filter that makes sense for both the user and the data presented. You can study the individual component pages to understand their kinds, usage, and behavior.

KindComponent
Single-selectDropdown, Select, Button, Radio button, Tab
Multi-selectDropdown, Checkbox
SearchText input

Filter behavior

Batch filtering

Batch results are typical for multi-select filters and experiences wherein users want to set complex or unfamiliar filter parameters. Batch filtering requires additional interaction, such as a button with an “Apply” label, to update and display relevant results.

This filtering behavior can help prevent user frustration in applications that are slow to return the data specified by filter parameters, and also gives users time to think about their selections. Batch filtering is a reliable choice if you’re unsure which filter behavior to choose to best fit your experience.

A before and after example where filters for "64 GB" and "32 GB" storage are applied.

Batch filters only display results after the “Apply” button is pressed.

Dynamic filtering

Dynamic filtering displays results instantaneously. As soon as a user selects a value, the data updates and displays the parameters set by the user. Because the data updates automatically, you do not need to include additional interactions to process the data, such as a button with an “Apply” label. Because dynamically updating results can distract users, consider this approach carefully before implementing it in your experience.

A before and after example where a single-select filter for "colocation" and multi-select filters for "hybrid cloud" and "private cloud" are applied.

Dynamic filtering can be used for single-select filters, and is recommended only when a small number of filters are available.

Usage

Best practices for using filters are context-specific and differ depending on the product or application. Generally, keep filter controls in close proximity to filterable data. Additionally, all filter options should be selected or unselected when a user first encounters them. To determine which, consider whether your user would prefer to see a full data set and exclude specific elements, or if they would like to start with nothing and include specific elements. Always include a way for users to clear all filters.

E-commerce applications

E-commerce experiences are ones that present consumers with products and encourage them to make a purchase. Filters are used to reduce the available options to ones that fit an individual’s needs. It’s important to strike a balance between too few and too many filter options, so consider what characteristics a user might use to make a decision. Group options within concise category labels.

Productivity applications

Productivity applications, including dashboards and analytics products, often include ranges and more complicated filtering options. These applications are frequently used in the business-to-business (B2B) applications. Users in this context tend to appreciate more information on their screens, and train themselves to find the data they need to complete their tasks.

Accessibility

Follow the respective accessibility guidelines for the components used to create the filter. For example, if a filtering experience includes radio buttons, follow the accessibility guidelines for radio buttons.

Content guidelines

Capitalization
Use sentence case in filter layouts for readability.
Do: Storage size
Don’t: Storage Size

Options
Try to limit the number of categories and their options. Well-designed filters help users feel in control, and are not overwhelming in presentation. Also consider the order of options from your user’s perspective. For example, display quantitative amounts in ascending or descending order.

Punctuation
Content within filters do not require punctuation. Note that colons (:) do not scale well.

Interaction
Avoid ambiguous copy such as “Filter results” on interactive items like buttons or links.
Do: Apply
Don’t: Filter Results

Common copy for filter interactions:
Clear all
Select all
Apply

Resources

UX Pattern Analysis: Enterprise Filtering

User Intent Affects Filter Design