Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Patterns
      • Buttons
      • Copy
      • Drag and drop
      • Error handling
      • Filters
      • Loaders
      • Rich-text editor
      • Save
      • Tables
    Table of Contents
    • Overview
    • General structure
    • Formatting
      • Entry point
      • Location and spacing
      • Surfacing filters and results
    • Selection methods
    • Usage
      • Basic filtering
      • Advanced filtering
    • Behavior
      • Bulk actions
    • Localization & internationalization
      • RTL right-to-left
    • Accessibility
      • Tabbing order
      • Affordances
      • Additional resources

    Filters

    Filters are used to reduce the amount of visible data in a dataset.

    Table of Contents
    • Overview
    • General structure
    • Formatting
      • Entry point
      • Location and spacing
      • Surfacing filters and results
    • Selection methods
    • Usage
      • Basic filtering
      • Advanced filtering
    • Behavior
      • Bulk actions
    • Localization & internationalization
      • RTL right-to-left
    • Accessibility
      • Tabbing order
      • Affordances
      • Additional resources

    Overview

    Filtering allows users to set specific parameters to reduce the amount of visible data in a dataset. There are two types of filters: basic filters and advanced filters. Basic filters allow users to make a few selections from predetermined parameters. Advanced filters allow users to set multiple filters; sometimes these filters are also configurable.

    General structure

    Both basic and advanced filter patterns are made using the same basic building blocks: an entry point, a container, and selection methods.

    Filter pattern anatomy
    1. Entry point
    2. Container
    3. Selection methods

    Formatting

    Entry point

    Filter pattern entry points The Filter entry point is the Button the user clicks to enter the Filter pattern.

    • A Default Button should be used to open an Advanced Filter.
    • A Media Button should be used to open a Basic Filter.
    • An Icon Button should be used when the Filter pattern lives within a toolbar on the page, or to conserve UI space.

    Location and spacing

    Filter pattern location and spacing

    Filters are 20px below the page header and description. The Search bar and filter button have 12px of padding between them. Filters have 12px of padding below to allow space for Tags and 12px of space between the Tags and filter results. The filter results are 12px above the table.

    Filter pattern icons

    To save space in a view, an Icon Button in a toolbar can be used to open a Filter. Include a Tooltip to help any users who may be unfamiliar with the icon, as well as a title attribute and aria-label.

    Surfacing filters and results

    Filter pattern surfacing tags

    Filter parameters should be surfaced as Tags above the dataset they are filtering. The Tag content contains the filter parameter category in Bold, followed by the user’s selection in Regular weight. The number of results after Filtering should be visible to users where possible. The number of resulting data items should be displayed above the table below the filtering tags. For guidance on formatting loading states, see our Tables Basic Formatting pattern.

    Selection methods

    Different components are used depending on the type of selections a user is making to filter their dataset.

    Selection methodDescriptionContainer
    Single selectA user wants to use one category or subcategory to filter dataMenu
    Multiple selections, one category or subcategory of dataA user wants to use more than one selection to filter dataMenu that allows for multiple selections
    Multiple selections, few categories of dataA user wants to use multiple selections within different categories to quickly filter dataNested menu
    Multiple selections, one category with many optionsA user wants to be able to search options and use multiple selections within a large set of options to filter dataTooltip dialog
    Many categories, live updatesA user wants to set multiple filters across a dataset with many categories and see their dataset update liveSheet
    Many categories, batch updatesA user wants to set multiple filters across a dataset with many categories and apply them all at onceDrawer

    Usage

    Basic filtering

    Basic Filters allow users to filter a dataset through one category with only a few options.

    Single select

    Single select basic filters use one selection to filter data. Upon the selection, the Menu closes and the filter is surfaced as a Tag. Selecting another menu option replaces the current Filter with the new selection.

    Filter pattern basic single select 1 Filter pattern basic single select 2 Filter pattern basic single select 3 Filter pattern basic single select 4

    Multiple selections

    Multiple selection basic filters use multiple selections within a category to filter data. The Menu remains open as the user makes their selections. The selections are surfaced as Tags with a Basic Button to clear all filters.

    Filter pattern basic multiple select 1 Filter pattern basic multiple select 2

    Nested menu

    A Nested menu can be used to organize subcategories of data that can be used to filter a dataset.

    Filter pattern basic nested menu 1 Filter pattern basic nested menu 2 Filter pattern basic nested menu 3

    Advanced filtering

    Advanced Filters allow users to set and configure multiple filters on a dataset.

    Tooltip dialog

    A Tooltip dialog allows users to filter a dataset through one category with many options, and allows the user to search for specific options. They can also be part of a more complex flow.

    Filter pattern advanced tooltip dialog

    Sheet

    A Sheet is used when the dataset is filtered live as the user makes their selections. Selections are surfaced as a Tag as the user sets each filter.

    Filter pattern advanced sheet 1 Filter pattern advanced sheet 2 Filter pattern advanced sheet 3 Filter pattern advanced sheet 4 Filter pattern advanced sheet 5

    Drawer

    A Drawer is used to batch apply multiple filters at once. Selections are surfaced as a Tag after the user applies their filters and closes the Drawer.

    Filter pattern advanced drawer 1 Filter pattern advanced drawer 2 Filter pattern advanced drawer 3

    Behavior

    Bulk actions

    When items are selected in a table and a filter is applied, the Filter overrides the selections and deselects them.

    Filter pattern behavior bulk actions 1 Filter pattern behavior bulk actions 2

    Localization & internationalization

    RTL right-to-left

    Filter pattern localization

    Filter entry points are mirrored for RTL languages. For more information about RTL considerations, see our Buttons pattern.

    Accessibility

    Tabbing order

    Filter pattern accessibility tabbing order
    1. User opens the filter container
    2. The focus moves to the first filter category and continues through all categories.
    3. Focus moves to close filter. Filter can also be closed with the esc key.
    4. Focus returns to Filter trigger button.
    5. Focus moves to the first tag after container is closed.

    Affordances

    Additional affordances should be included to ensure users are aware of the filters applied and the results of those filters. Screen readers should read out the results of a filter after the filtering actions are completed.

    Additional resources

    • Garden Combobox
    • WAI-ARIA Listbox
    • WAI-ARIA Menu
    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024