Filter BarPro

A filter bar for a table: Filter widens into the filter panel at the bar's own width, fields beside their options, a search widens across the bar, and the filters applied sit under it as chips.

Installation

When to use

Above a table or a list with a few fields to narrow it by (status, plan, owner): the filters applied stay in sight as chips, one click from changing.
When a field has many options: a long list gets its own search, and each option can say how many rows it would leave.

When not to use

One or two filters: a Segmented Control or a Select beside the table is quicker.
Filters that need typed ranges or dates: a form fits them better.

Usage

Filter Bar with your own data: a whole component you can paste as a page.

example.tsx

1"use client"
2
3import { FilterBar } from "@/components/dashral/pro/filter-bar"
4
5import { useState } from "react"
6
7const fields = [
8  {
9    id: "status",
10    label: "Status",
11    options: [
12      { value: "active", label: "Active" },
13      { value: "trial", label: "Trial" },
14      { value: "churned", label: "Churned" },
15    ],
16  },
17  {
18    id: "plan",
19    label: "Plan",
20    multiple: false,
21    options: [
22      { value: "starter", label: "Starter" },
23      { value: "team", label: "Team" },
24    ],
25  },
26]
27
28export default function Customers() {
29  const [filters, setFilters] = useState<Record<string, string[]>>({ status: ["active"] })
30  const [query, setQuery] = useState("")
31  return <FilterBar fields={fields} value={filters} onValueChange={setFilters} search={{ value: query, onValueChange: setQuery }} />
32}

API reference

FilterBar

A filter bar whose button widens into the filter panel, at the bar's own width: fields beside their options, a gliding highlight, full keyboard. The filters applied show as chips; a chip opens its own field, × or Backspace removes it.

Prop	Type	Default
`fields`	`FilterField[]` Required.	—
`value`	`FilterValue`	—
`defaultValue`	`FilterValue`	—
`onValueChange`	`(value: FilterValue) => void`	—
`label`	`string` The button's words; "Filter" by default.	`"Filter"`
`results`	`number` The rows the filters leave, for the panel's button ("Show 24 results"); without it the button says Done.	—
`search`	`FilterBarSearch` A search across the bar: its button widens into a field at the bar's width, the rows filtering as you type (the table stays in sight). Closed, what was typed stays as a chip. `/` opens it.	—
`end`	`React.ReactNode` Anything at the bar's end: a view switch, an export button. It steps back with the bar.	—
`className`	`string`	—
`classNames`	`FilterBarClassNames`	—

type FilterOption

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode` A small mark before it: a dot, an avatar, an icon.	—
`count`	`number` How many rows it would show, beside it.	—

type FilterField

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`React.ReactNode`	—
`options`	`FilterOption[]`	—
`multiple`	`boolean` Several options at once (the default), or one.	—
`searchable`	`boolean` A search over its options; on by default past 6 options.	—

type FilterValue

The options picked, by field id. A field with none is left out.

= Record<string, string[]>

type FilterBarClassNames

Prop	Type	Default
`root`	`string`	—
`bar`	`string`	—
`chip`	`string`	—
`panel`	`string`	—

type FilterBarSearch

Prop	Type	Default
`value`	`string`	—
`defaultValue`	`string`	—
`onValueChange`	`(query: string) => void`	—
`placeholder`	`string` "Search…" by default.	—

Keyboard

Keys	Action
`←`or`→`	Along the bar: Filter, each chip, Clear, Search and your buttons
`Enter`	On Filter: open the panel; on a chip: open it on that chip's field
`Backspace`or`Delete`	On a chip: remove that filter
`/`	Open the search, from anywhere on the page (with search)
`↑`or`↓`	Through the fields, or a field's options
`Home`or`End`	The first or last field or option
`→`or`Enter`	From a field into its options
`←`	From the options back to the fields
`Space`or`Enter`	Tick an option
`Esc`	Back to the fields on a narrow bar, or close; the focus returns where it opened

Accessibility

The bar is a toolbar named Filters; each chip reads its filter and how to remove it ("Status: Active, Trial. Press Backspace to remove").
The panel is a dialog (aria-modal): the fields are a vertical tablist, a field's options a listbox (multi-select where multiple) with the highlighted option as its active descendant.
The search's result count is a live region; the bar's own content is hidden from screen readers while the panel or the search is open.

Motion

Filter, a chip or the search button widens to the bar's width (0.42 s) while the bar's content steps back, and shrinks back onto where it came from, scrolling it into view first.
Options slide up or down as the field changes and the panel reshapes; chips fade in and out while the others slide over, and the bar's height glides.
Smooth tweens on [0.4, 0, 0.2, 1], never springs. With reduced motion it only fades.