Filtering
Filtering allows users to narrow down a set of results by applying criteria that refines the current view.
Filtering allows users to narrow down a set of results by applying criteria that refines the current view.
When choosing a filter type, consider:
Use concise, scannable labels. Filter group labels should usually be nouns or noun phrases. Filter value labels should be short, user-facing values and may include established marketplace terms. Action labels should use clear verbs.
Within each filter group, order labels on the type of values:
When aligning on the label copy:
Results can update as the user selects (Immediate apply) or only after they submit their choices (explicit apply).
Filtering accessibility requirements vary significantly depending on which components are used in the pattern. Always refer to the accessibility guidance for each individual component (i.e. filter chips, toggles, checkboxes, etc.) in addition to the guidance on this page.
Control type and role: Each filter control must accurately convey what kind of control it is. All filter controls must also have a visible, descriptive name — the text label that identifies what the control does. How this is implemented varies by component; refer to each component's accessibility guidance.
State and value:
Use identical labels for the filter criteria across all surfaces. If an option is called “Best Offer” in a filter sheet, it should also be called that if the same filter group appears in a quick filter.
Make it obvious what criteria are available, what is currently selected, and how selections affect the results. Applied filters should be visible or easy to review, especially when filter controls are hidden in a menu, sheet, drawer, or overflow area.
Use the simplest filtering UI that supports the user's task, from quick single-value filters to advanced filtering with multiple categories, values, and ranges.
Filters should help users refine their current view. Avoid using filters for navigation, input, or switching between unrelated views.
| Filter types | Best for | Evo components | Related components |
|---|---|---|---|
Multi-select filter | Broad exploratory searches within large sets of results | ||
Multi-category select filter | Narrowing down large sets of data by combining search criteria | ||
Quick filter | High-value, commonly used refinements | ||
Single-select filter | Mutually exclusive values, where only one can be applied at a time | ||
Range filter | Numeric attributes such as price, distance, year, dimensions, rating, etc. | ||
Text filter | Finding specific search criteria within a large list | ||
Visual filter | Attributes that users can identify faster by sight | - |
When there's a list of filters, they are organized from most important to least important:
Ensure that users have access to clear or reset actions so that they can remove multiple filter selections or return a filter back to its default state. Avoid clear or reset actions when a single selected filter can be removed directly.
When filtering within a panel, the primary call to action (CTA) updates with a count in numerals to show the total number of results. See formatting numerals and counter guidance for Filter chips.
A multi-select filter group can start with either all filter values selected or no values selected, depending on how the filter is used.
Use no values selected by default when users are expected to select their own values to narrow results.
Use all values selected by default when the filter acts as an inclusion list, excluding the unchecked values from the results list.
Use immediate apply when results can update instantly after the user makes a selection. This works best for simple filters with known values, especially when the data is already loaded or can update without a noticeable delay.
Use explicit apply when users need to submit criteria before results update, such as applying filters in a panel or popover.
An empty state occurs when results exist in the data set but none match the current filter criteria. Keep filter controls visible and always offer a way to move forward, such as a "Reset" button, a prompt to broaden the selection, or a "Save search" option for inventory-scarce categories.
Note that not all empty-looking states are filter-induced. First-load empty states (e.g. a user with no saved searches or purchase history), error states (e.g. a server error or network timeout), and search-only queries with no filter involvement each have distinct causes and require different recovery paths.
For further guidance see empty states.
Allows users to apply commonly used filters directly without opening the full filter experience. Use them for high-priority refinements that help users narrow results quickly, such as buying format, shipping, or condition.
Allows users to choose one option from a set. Use them when selecting more than one option would not make sense, such as a condition, status, or range. Provide a clear default state, such as Any, or a way to clear the selection so users can return easily to the unfiltered view.
Allows users to choose one or more options from a filter group. The filtered data will show items that match any of the selected values.
Allows for filtering across separate filter groups, like “Price”, “Style”, and “Size”. All selections across categories are applied together to the data.
Multi-category selection is presented in a modal panel, filter rail, or filter bar.
Allows users to filter by numeric attributes, such as price, distance, or date. Used to narrow results by setting or entering a minimum value, a maximum value, or both.
Allows user to search within a large list of filter values to find and select a specific option. Use them when a filter group contains many values, such as brand, model, or seller, and keep the search scoped to that filter group.
Allow users to select a visual representation of the filter being applied when it would be quicker than using a text attribute. Use visual filters sparingly as they may not always be the quickest or clearest to read.
Do keep filters in their original position when selected. For more details see Filter chip guidance.
Don’t change position of filters when they are selected.
Do keep filter chip labels persistent when a filter criteria is selected.
Don’t change the label of a chip after a value has been selected.
