Status
| PublishedElement can be used in production | |
Documentation | In progressElement design and development in progress |
Filter
Filters are used to set parameters on datasets. They help users refine results to find relevant content.
Contents
What's newCopy link to this section
Copy link to this section
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.
LayoutCopy link to this section
Copy link to this section
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.
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.
Horizontal filters are aligned to the top of a page.
ResponsiveCopy link to this section
Copy link to this section
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.
Responsive designs are particularly important consideration for e-commerce experiences as consumers frequently shop from their phones.
Selection methodsCopy link to this section
Copy link to this section
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.
| Kind | Component |
|---|---|
| Single-select | Dropdown, Select, Button, Radio button, Tab |
| Multi-select | Dropdown, Checkbox |
| Search | Text input |
Filter behaviorCopy link to this section
Copy link to this section
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.
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.
Dynamic filtering can be used for single-select filters, and is recommended only when a small number of filters are available.
UsageCopy link to this section
Copy link to this section
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.
AccessibilityCopy link to this section
Copy link to this section
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.
StandardsCopy link to this section
Copy link to this section
Content
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
ResourcesCopy link to this section
Copy link to this section