Filter bar
Shows active filters with individual removal, reset, and a result count.
Preview
In action
When to use
Use it for
- Search results and data views with multiple active filters.
Not for
- Editing complex logic directly; use QueryBuilder.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { FilterBar } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/filter-bar.
2. Vendor the source
npx @noorddev/vlak-cli add filter-bar
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/filter-bar.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { FilterBar } from "@noorddev/vlak-react";
<FilterBar defaultValue={[{ id: "city", label: "Alkmaar" }, { id: "status", label: "Published" }]} resultCount={12} />Props
FilterBar
Removable active filters and result count. Supply filter editors as children.
| Prop | Type | Default | Description |
|---|---|---|---|
value | ActiveFilter[] | ||
defaultValue | ActiveFilter[] | [] | |
onValueChange | (filters: ActiveFilter[]) => void | ||
resultCount | number | ||
label | string | "Active filters" |
Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter, Space | Tab reaches remove/reset actions; Enter or Space applies changes and returns focus to the group. |
Accessibility
- Removal buttons name their filters. Result count is a polite status; children can supply labeled filter editors.
Markup
<div class="rs-filter-bar" role="group" aria-label="Active filters"><button class="rs-btn-ghost" aria-label="Remove Alkmaar filter">Alkmaar ×</button><span class="rs-filter-bar-count" role="status">12 results</span></div>
Classes
.rs-filter-bar.rs-filter-bar-count