A faceted filter bar with searchable multi-select popovers, count badges, and selections that spring inline into each facet pill.

Issues2 of 6

ENG-241Token refresh races on slow networks
ENG-225Mega menu panel height jump

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/filter-bar.json"

Usage

tsx

import { FilterBar } from "@/components/godui/filter-bar";

tsx

const facets = [
  {
    id: "status",
    label: "Status",
    options: [{ label: "Open", value: "open", count: 12 }],
  },
];

const [value, setValue] = useState({});

<FilterBar facets={facets} value={value} onChange={setValue} />;

value is a Record<facetId, string[]>. Each facet pill shows its current selection inline (Status: Open +2) and clears with the inline ×.

Props

Prop	Type	Default	Description
`facets`	`Facet[]`	—	`{ id, label, options: { label, value, count? }[] }`
`value`	`Record<string, string[]>`	—	Controlled selection
`defaultValue`	`Record<string, string[]>`	`{}`	Uncontrolled initial selection
`onChange`	`(value) => void`	—	Called when the selection changes
`searchable`	`boolean`	`true`	Show a search box in each popover
`showCounts`	`boolean`	`true`	Show option count badges

Filter Bar

Installation

Usage

Props

On this page