Skip to main content

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.

This guide covers changes to the beta FilterBar component (previously Toolbar.Filters). These APIs may continue to evolve before the stable release.

​
Overview

Toolbar.Filters has been removed as a compound sub-component of Toolbar. Use the standalone FilterBar component instead.

​
Design Rationale

​
Why separate FilterBar from Toolbar?

Previously, filters were tightly coupled to Toolbar as Toolbar.Filters, requiring a wrapping <Toolbar> even when no toolbar actions were needed. This coupling:
  • Forced filters to inherit Toolbar’s size and overflow settings
  • Prevented filters and toolbars from evolving independently
  • Required a parent Toolbar for filters to function
The standalone FilterBar has its own role="toolbar", keyboard navigation, and size/overflow props. When used alongside a Toolbar, compose them as siblings via Flex layout. Standard ARIA patterns handle keyboard traversal — Tab moves between the two toolbars, arrow keys navigate within each.

​
Migration Guide

​
Standalone filters (no toolbar actions)

// Before
<Toolbar associatedContent="invoices">
  <Toolbar.Filters
    filters={filters}
    onFilterChange={setFilters}
  />
</Toolbar>

// After
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
/>

​
Filters with toolbar actions

// Before
<Toolbar associatedContent="invoices">
  <Toolbar.Filters
    filters={filters}
    onFilterChange={setFilters}
  />
  <Toolbar.ControlGroup>
    <Toolbar.Button icon={SaveIcon} aria-label="Save" />
  </Toolbar.ControlGroup>
</Toolbar>

// After
<Flex alignItems="center" justifyContent="space-between">
  <Toolbar associatedContent="invoice actions">
    <Toolbar.Button icon={SaveIcon} aria-label="Save" />
  </Toolbar>
  <FilterBar
    associatedContent="invoices"
    filters={filters}
    onFilterChange={setFilters}
  />
</Flex>

​
Import changes

// Before
import { Toolbar, type Filter } from "@servicetitan/anvil2/beta";

// After
import { FilterBar, Toolbar, type Filter } from "@servicetitan/anvil2/beta";

​
New required prop: associatedContent

FilterBar requires an associatedContent string prop for accessibility. It populates the aria-label on the filter bar’s role="toolbar" element. 
<FilterBar
  associatedContent="invoices" // Required -- describes what this filter bar filters
  filters={filters}
  onFilterChange={setFilters}
/>

​
Optional new props

FilterBar accepts size and overflow props that were previously inherited from the parent Toolbar: 
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
  size="small" // Default: "medium"
  overflow="collapse" // Default: "wrap"
/>

​
Breaking Changes

These changes require code updates before upgrading. The previous API is no longer supported.
  • Toolbar.Filters has been removed — Use the standalone FilterBar component instead.
  • FilterBar requires a new associatedContent prop (string) for accessibility.
  • Filter types (Filter, BooleanFilter, etc.) are now exported from FilterBar, not Toolbar.

​
Why Breaking?

As a beta API, Toolbar.Filters was removed directly without a deprecation path. The standalone FilterBar provides a clearer API surface and independent evolution path for both components.
Last modified on April 24, 2026