build69
Sign inGet API key
build69  /  Components  /  Page Structure  /  FilterBar

FilterBar

v1.0.8Updated 27 Aug 2026

Horizontal toolbar of filter chips, search, and view actions. Sits above a DataTable or list to drive its query.

View source← Back to catalog

Preview

Live · 11 stories
DefaultOpen ↗
▸Why this is recommendedfiltertoolbarchipssearch+2

The default, out-of-the-box FilterBar.

Recommended for+14
  • ✓Above DataTables
  • ✓List pages with multiple facets
  • ✓Inbox-style filters
Tags+6
filtertoolbarchipssearchdatadefault
Features+4
  • Search input slot
  • Removable filter chips with values
  • Add-filter dropdown
  • View preset selector
  • Clear-all button
  • Right-aligned actions
  • i18n: labels prop on the FilterBar root (or any slot) overrides every built-in UI string (chip remove aria, Clear all, sort + density copy) — see FilterBarLabels / DEFAULT_FILTER_BAR_LABELS
Not recommended for−2
  • ✕Inside dialogs (use form fields directly)
  • ✕Pages with only one filter (use a Select)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "FilterBar" })

Usage

import { FilterBar } from '@/components/patterns/filter-bar';

<FilterBar search={q} onSearch={setQ} filters={chips} onAddFilter={openAddFilter} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
search

Search query

string—
onSearch

Search change callback

function—
filters

Active filter chips

FilterChip[]—
onAddFilter

Add-filter handler

function—
labels

Override any built-in UI string — chip remove aria, Clear all, sort + density copy (i18n). Set on the FilterBar root it flows to every slot via context; each slot also accepts its own labels. Merged over DEFAULT_FILTER_BAR_LABELS.

Partial<FilterBarLabels>—

Related

Platform docsAll componentsSource files