Live Demo
Anatomy
The Toolbar Filters consists of several elements that work together to provide filtering capabilities.
- Filter Button - Interactive button that opens a popover or drawer containing filter options
- Selected Filter - Visual indicator showing when a filter has an active selection
- Selected Item (for multi select) - Displays the count of selected items in a multi-select filter, using a chip
- Label - Text identifier that describes what the filter controls
- Selected Item (for single select) - Displays the currently selected option for single-select filters
- All Filters - Persistent button that opens the filter drawer for batch editing of all filters
- Search Field (Optional) - Input field for filtering available options within single-select and multi-select filters
- Popover of filter items - Dropdown panel that appears when a filter button is clicked, containing the filter’s selection interface
- Apply and cancel filter (Optional) - Action buttons that appear at the bottom of filter popovers when controlled filtering is enabled
Options
The Toolbar Filters supports the following configurations to accommodate various filtering scenarios and user interaction patterns.Types of Filters
Boolean
Boolean filters provide a simple toggle mechanism for on/off states. Users click the filter button to activate or deactivate the filter, with the button’s visual state indicating the current selection.
Content Guidelines
- The boolean label stays the same across states. Think of this like the label of a Checkbox, which does not change when it is checked or unchecked.
Single Select
Single select filters display a dropdown list of options where users can choose one item. The selected option appears in the filter button label, and clicking the button opens a popover with the full list of available options.
Content Guidelines
- Single selection contains a label, followed by a : , a space, then the selected item. A Chip does not appear in any single selection scenario.
- Example “Group by”, “Group by: Job”
Multi Select
Multi select filters allow users to select multiple options from a list. The filter button displays a chip with the count of selected items when selections are active. Clicking the button opens a popover where users can select or deselect multiple options.
Content Guidelines
- Multi selection contains a label, followed by a Chip. Multi selection never shows the selected items in the Toolbar itself.
- Example “Group by”, “Group by (1)”, “Group by (2)“
Date
Date filters provide a calendar interface for selecting a single date. The filter button displays the selected date in the configured format, and clicking it opens a popover with a calendar picker.
Date Range
Date range filters enable users to select a start date and an end date. The filter button displays both dates when selected, and clicking it opens a popover with dual calendar pickers for selecting the range.
Content Guidelines
- The Calendar icon and label are always present.
- For the label, use “Date” if there is no specific name that would be more descriptive.
- Single selection examples:
- “Date”, “Date: Jan 3, 2025”
- “Last Modifed On”, “Last Modified On: Nov 1, 2026”
- Date range examples:
- “Date”, “Date: Jan 3 – Jan 10, 2025”
- “Date”, “Date: Dec 31, 2025 – Jan 1, 2026”
Date Format guidelines
- Month as 3 letter abbreviation
- Date without a leading zero
- Comma separation
- Full numeric year, omitted if a date range for the first value and both dates are in the same year.
- An en dash (–) between dates
Why does the format not use MM/DD/YYYY?
Accessibility standards require explanation of the format on the page when using ambiguous formats like 01/05/2026. Filter Button avoids this requirement by spelling out the month part. Users do not type directly into Filter Button, so the format remains clear and accessible.Why does the format not spell out the whole month?
Toolbars Filters prioritizes horizontal space efficiency over verbosity. In context, the date icon further emphasizes a user is reading a month.Custom
Custom filters provide complete flexibility for implementing specialized filtering interfaces. Developers define custom render functions for both the popover and drawer views, allowing any type of filter control to be integrated into the toolbar.
Content Guidelines
- Custom filters must use a label. It may either use selection text or a Chip, depending on the intent of the custom filter.
Apply and Cancel
By default, filter selections apply immediately when a user makes a choice. When controlled filtering is enabled, Apply and Cancel buttons appear at the bottom of filter popovers. Users can make multiple changes in draft state, then click Apply to submit all changes at once or Cancel to discard them. The filter drawer always operates in controlled mode with Apply and Cancel buttons in the footer. See Filter Fetching for more information on when to use Apply and Cancel.
Search
Single select and multi select filters can include an optional search field at the top of their popovers. The search field allows users to filter the available options by typing, making it easier to find specific items in large lists. The implementing team controls how the search filters the items through callback functions.
Behavior
The Toolbar Filters responds to user interaction and space constraints with distinct behaviors for filter management and layout adaptation.All Filters
The Toolbar Filters always contains an “All Filters” button that opens the filter drawer. This button provides access to all filters in a single interface, making it easy to manage multiple filters simultaneously. When filters are hidden due to space constraints, the button displays a chip showing the count of active hidden filters.
Always use the “All Filters” in a Toolbar of Filters
The “Filters” button is always present for users, regardless of the number of filters. It should not be omitted.Drawer of Filters
The filter drawer is a side panel that displays all available filters in a unified interface. It maintains draft state for all filters until the user clicks Apply, enabling batch updates. The drawer includes a Clear All button that resets all filters to their default states. This batch filtering approach allows users to make multiple filter changes before committing them.Overflow
Wrapping
In wrap mode, filters that don’t fit on a single line automatically wrap to the next line. This ensures all filters remain visible while adapting to the available horizontal space. Wrap mode is the default overflow behavior.
Collapsed
In collapse mode, filters that don’t fit within the available space are removed from view. Unlike other toolbar items that move to an overflow menu, hidden filters are simply not displayed. All filters remain accessible through the filter drawer regardless of overflow mode. The filters group takes priority over other toolbar groups, meaning filters wrap or collapse before secondary toolbar actions.
Responsive Behavior
At smaller breakpoints (xs and sm), inline filters automatically hide and only the “All Filters” drawer trigger button remains visible. This responsive behavior uses container queries to detect available space and adapts the interface to ensure usability on mobile devices. The drawer provides full access to all filters regardless of screen size.Keyboard Interaction
Users can navigate the Toolbar Filters using standard keyboard controls.| Key | Description |
|---|---|
| Tab | Moves focus between filter buttons and the “All Filters” button |
| Enter | Opens the focused filter’s popover or activates a boolean filter toggle |
| Escape | Closes an open Popover or Drawer and returns focus to the trigger button |
| Arrow Keys | Navigate through options within filter Popovers and Drawers |
| Space | Activates focused filter controls within popovers and drawers |
When to use
Use the Toolbar Filter when needing to apply the filter pattern to content.How to use
Where and how filters are represented
Doplace filters toward the top of a page's content, below the page header arranged horizontally.
Grouping Filters
On the page, filters exists as part of a larger Toolbar- In general, show most-used filters first.
- Rarely used filters do not have to be shown on the page and may be placed within the Drawer layout instead.
- If a filter group is used consistently within a product area, consider consistency in ordering across the area.
- Avoid changing the placement or conditions of actions such as the ‘Clear All’, ‘Filters’, and search bar.
- Multiple filter groups may exist if a page contains multiple layers of filterable content and each section needs its own unique filtering.
Filter Fetching
Filter fetching refers to when filters get applied to an area. There are three types of filter fetching: instant, apply per-filter, and batch.Instant filter
Instant filtering begins the process of filtering results the moment a user makes a selection within a filter. This can only occur in the Toolbar filter view and not in the Drawer. This is the generally preferred option for filtering as it reduces the amount of steps users must take.Apply per-filter
Apply per-filter sets individual Apply + Cancel actions onto each individual filter. This is a useful method when performance is particularly important.Batch filter
Batch filtering waits to apply a filter only after clicking a standalone Apply action. Batch filtering is not made available in the standard Toolbar view, while being the only method used in the Drawer view.Which fetching type is best for your case?
- Instant filtering is the generally preferred method, as it provides real-time feedback to users.
- Apply per-filter is preferred when performance is an issue, or if a user needs to build out a filter before needing to apply it.
- Instant and apply per-filter fetching should not be mixed. If per-filter is ever needed in one filter, the whole filter set should also use this method.
- Filters in the Drawer always use batch apply. No individual filter in the Drawer should have its own apply action.
- Batch filtering on the page is considered an edge case that requires a custom implementation.
Content Guidelines
- All Filters need to have a label. This is the equivalent of a label found in traditional form elements.
- See each individual filter type for specific content guidelines.