Filter Bar

Filter Bar arranges the controls that narrow a collection, from a plain search field to view tabs that open into a search. It only lays things out: the query, the filter values and the filtering itself stay in your app.

Install

bashnpx shadcn@4.18.0 add @siteplane/filter-bar

Import it from @/siteplane/components/filter-bar. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Tag Group: Use a Tag Group inside FilterBarActiveFilters to show the filters currently applied.
• vs Table: Place the Filter Bar above a Table or Resource List; results states belong to the collection, not the bar.

Rules

• Group parts with FilterBarControls, FilterBarSearch, FilterBarFilters, FilterBarActiveFilters and FilterBarActions inside FilterBar.
• When a search sits alongside a handful of views, put TabsTab items inside FilterBarTabs. Filter your rows from query, and give the tab list a label describing the views it changes.
• Set open on FilterBarActiveFilters to whether any filter applies, so the row collapses when the last one goes.
• Keep loading, error and empty states with the results, and never reset a search field that has focus.
• Announce significant result changes in a polite live region, not on every keystroke.

Reference

• Filter Bar docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.