Filter Bar – Design

Documentation Index

Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt

Use this file to discover all available pages before exploring further.

​

Live Demo

​

Anatomy

The Filter Bar consists of several elements that work together to provide filtering capabilities.

1. Filter Button - Interactive button that opens a popover or drawer containing filter options
2. Selected Filter - Visual indicator showing when a filter has an active selection
3. Selected Item (for multi select) - Displays the count of selected items in a multi-select filter, using a chip
4. Label - Text identifier that describes what the filter controls
5. Selected Item (for single select) - Displays the currently selected option for single-select filters
6. All Filters - Button that opens the filter drawer for batch editing of all filters. Appears whenever at least one filter is unreachable from the toolbar.
7. Search Field (Optional) - Input field for filtering available options within single-select and multi-select filters
8. Popover of filter items - Dropdown panel that appears when a filter button is clicked, containing the filter’s selection interface
9. Apply and cancel filter (Optional) - Action buttons that appear at the bottom of filter popovers when controlled filtering is enabled

​

Options

The Filter Bar 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.

Date List

A Date List filter renders a single-select list of date “buckets” (e.g. “Today”, “Last 7 days”) followed by four menu options (On…, Before…, After…, Custom Range…). Consumer-supplied options resolve to a date or range and commit immediately on click; menu options open a Dialog with the appropriate date picker. The popover never shows Apply/Cancel since picking an option is itself the confirming action.

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 list examples:
  • “Due date” (no selection)
  • “Today: Jan 28, 2026” (consumer single-date option)
  • “Last 7 days: Jan 28 – Feb 4, 2026” (consumer range option)
  • “On: Sept 12, 2026” (menu On…, Before…, After… after dialog)
  • “Jan 28 – Feb 4, 2026” (menu Custom Range… after dialog — no label prefix since the range is self-explanatory)

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?

Filter Bar 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 Filter Bar responds to user interaction and space constraints with distinct behaviors for filter management and layout adaptation.

​

All Filters

The Filter Bar surfaces an “All Filters” button that opens the filter drawer for managing multiple filters at once. The button only appears when at least one filter is unreachable from the toolbar — that is, when a filter is configured as drawer-only, when an inline filter has overflowed, or when the container is too narrow to show inline filters at all. When every filter fits inline and none are drawer-only, the button does not render. While present, the button shows a chip with the count of active filters that need the drawer to access.

​

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.

​

Drawer-only Filters

Setting drawerOnly: true on a filter keeps it accessible only through the filter drawer; it never renders inline in the toolbar, even when there is room for it. Use this to surface lower-priority filters or filters whose UI does not fit the toolbar shape without crowding the primary filters. The flag applies to every filter type — boolean, single select, multi select, date, date range, date list, and custom. A drawer-only custom filter only requires drawerRender — buttonRender is forbidden, since the filter never appears inline.

​

Wrapping

Filters that don’t fit on a single line automatically wrap to the next line so every filter remains visible.

​

Responsive Behavior

Below a 640px container width, inline filters are hidden and only the “All Filters” drawer trigger button remains visible. The Filter Bar uses container queries to detect available space and switch to drawer-only mode. Set disableCollapse to keep filters inline at every container width.

​

Keyboard Interaction

Users can navigate the Filter Bar using standard keyboard controls.

​

When to use

Use the Filter Bar when needing to apply the filter pattern to content.

​

How to use

​

Where and how filters are represented

The All Filter acts as a central hub for all the available filters for end users. It always opens into a Drawer. It’s always labeled as ‘Filters’.

​

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.