A responsive rail for filters, result metadata, clear-all behavior, and pinned trailing actions.

Use Filter Toolbar to organize application-owned filters without coupling their values, popups, or data fetching to the layout block.

24 results

Project filters

Installation

$npx shadcn@latest add @patchui/filter-toolbar

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/blocks/filter-toolbar/index.tsx.

Usage

<FilterToolbar
  activeCount={activeCount}
  onClearAll={clearFilters}
  count="128 results"
  trailing={<SortMenu />}
>
  <StatusFilter />
  <OwnerFilter />
  <CategoryFilter />
</FilterToolbar>

Pass Menu, Popover, Toggle, or other Patch UI controls as children. Filter Toolbar owns rail layout and stable trailing placement while the application owns filter state.

Composition

FilterToolbar
├── Filter controls
├── Clear all
├── Result count
└── Trailing actions

Examples

Wrapping filters

Use wrap on spacious directory or management pages where filters can occupy more than one row. The default scroll behavior is better for headers and narrow screens.

111 results

Wrapping job filters

Searchable picker

Filter Toolbar Picker provides the repeated high-cardinality pattern: a searchable, grouped, multi-select Popover. Keep its selection and query controlled so options can be filtered locally or loaded asynchronously.

The trigger summarizes one selection by label and several selections by count. Use summary when the product needs different wording.

API reference

Prop	Type	Default	Description
overflow	"scroll" \| "wrap"	"scroll"	Keeps one horizontal rail or allows additional rows.
activeCount / onClearAll	number / () => void	0 / undefined	Shows and handles the clear-all action.
count	ReactNode	-	Adds preformatted result metadata to the trailing region.
countVisibility	"always" \| "responsive"	"responsive"	Controls whether count metadata hides below the small breakpoint.
trailing	ReactNode	-	Pins sorting, view selection, or another action after the rail.
FilterToolbarTrigger.value	ReactNode	-	Displays an active summary and applies the selected fill.
FilterToolbarPicker.selected / onSelectionChange	string[] / (selected: string[]) => void	-	Controls the picker’s multi-selection.
FilterToolbarPicker.query / onQueryChange	string / (query: string) => void	-	Controls local or remote option filtering.
FilterToolbarPicker.sections	FilterToolbarPickerSection[]	-	Provides grouped options with optional metadata and disabled state.

Avoid placeholder choices such as “Any” or “All.” Clear an active filter from its popup, and reserve Clear all for resetting the complete toolbar.

Accessibility

Give the toolbar an ariaLabel that describes the filter set when “Filters” is too generic.
Keep result count updates concise because the count uses a polite live region.
Preserve a visible category label when showing an active filter summary.
Ensure every custom child control exposes its own name, state, and keyboard behavior.