revido kit
Start building
← All components
navigation / stable

FilterBar

Linear-style filtering: Filter → field → values; active filters become editable chips with is / is not and Clear filters.

LIVE PREVIEW
Loading preview…

When to use

  • Narrowing a list or board by properties (status, assignee, priority…).
  • In a view toolbar: FilterButton in the bar, FilterChips on the row below.

Consider an alternative

  • Free-text search — use SearchField.
  • A single on/off condition — use a Switch or segmented Tabs.
  • Ordering or layout — use SortMenu and DisplayOptions.

Import

import { FilterBar } from '@revido-llc/kit';

Keyboard interaction

  • Enter / Space on Filter — open the field list (type to search fields and values)
  • Arrow keys + Enter — choose a field, then toggle values
  • Backspace in an empty search — back to fields
  • Escape — close

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

fields (required)readonly FilterField[]—
onChange (required)(next: FilterValue) => void—
value (required)FilterValue—Active filters (controlled). Keep it in the URL so views are shareable.
classNamestring—
isDisabledbooleanfalseDisable every trigger, chip and open picker while a query/mutation is pending.
labelstring"Filter"Trigger label. Default "Filter".

Related exports

FilterButton, FilterChips, isFilterActive

Examples

View toolbar (filter · sort · display · reset)

The full pattern on live data. Applied filters show as chips under the bar; a changed sort or display turns its button cobalt; Reset view appears once anything differs from the defaults.

<Toolbar aria-label="View controls">
  <FilterButton fields={fields} value={filters} onChange={setFilters} />
  <SortMenu options={sorts} value={sort} defaultValue={DEFAULT_SORT} onChange={setSort} />
  <ToolbarSeparator />
  <DisplayOptions … value={display} defaultValue={DEFAULT_DISPLAY} onChange={setDisplay} />
</Toolbar>
{modified ? <Button variant="ghost" size="xs" onPress={resetView}><RotateCcw /> Reset view</Button> : null}
<FilterChips fields={fields} value={filters} onChange={setFilters} />

Nothing applied

Plain outlined buttons and no chip row: the default view.

<FilterButton fields={fields} value={{}} onChange={setFilters} />

Inline bar

Trigger + chips on one wrapping row. The second bar is disabled while a request is pending; open pickers and free-value controls receive the same disabled state.

<FilterBar fields={fields} value={filters} onChange={setFilters} isDisabled={query.isPending} />
// Custom field: renderValueControl: ({ value, onValueChange, isDisabled }) => <DatePicker ... isDisabled={isDisabled} />

Literal anatomy 1

Static component anatomy; bind events in the consuming app.

<FilterBar fields={[{ id: "status", label: "Status", options: [{ value: "open", label: "Open" }] }]} value={{}} />

Literal anatomy 2

Static component anatomy; bind events in the consuming app.

<FilterButton fields={[{ id: "status", label: "Status", options: [{ value: "open", label: "Open" }] }]} value={{}} />

Literal anatomy 3

Static component anatomy; bind events in the consuming app.

<FilterChips fields={[{ id: "status", label: "Status", options: [{ value: "open", label: "Open" }] }]} value={{}} />

Related components