# FilterBar

> The toolbar above a list: count tabs, search and facet filters at the start, a quiet status and one View menu (sort, display, auto-refresh) at the end, and applied filters as chips below.

```ts
import { FilterBar } from "@sdxc/ui/app";
```

Renders the toolbar. Facet checkboxes, the search field and the hidden carried parameters
all belong to one GET form, so Apply or Enter submits the whole view and the URL holds one
parameter per filter; tabs, sort orders and chip removal are plain links.

## Examples

```tsx
<FilterBar
	id="monitors"
	url={request.url}
	tabs={[{ label: "Active", count: 26, href: "?state=active", current: true }]}
	search={{ label: "Search monitors", placeholder: "Search…" }}
	facets={[{ name: "status", label: "Status", options: [{ value: "down", label: "Down", count: 2 }] }]}
	sort={{ label: "Sort by", defaultValue: "name", options: [{ value: "name", label: "Name" }] }}
	options={<ViewOptions id="monitors-view" url={request.url} inline density={density} labels={viewLabels} />}
	status={<AutoRefresh {...refresh} show="status" />}
	labels={labels}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `id` | `string` | Prefix for the form and popover ids; unique on the page. |
| `url?` | `URL \| string` | The page's current URL, where every applied value is read from. |
| `action?` | `string` | Where the form submits. Defaults to the current path. |
| `tabs?` | `Tab[]` | Count tabs at the start of the row. |
| `search?` | `Search` | The search field, after the tabs, between 14rem and 20rem wide. |
| `facets?` | `Facet[]` | Facet buttons after the search. |
| `sort?` | `Sort` | Sort orders, the first group in the View menu. |
| `options?` | `RemixNode` | The rest of the View menu, after sort: an inline `ViewOptions` and an `AutoRefresh` with `show="choices"`, each its own group. |
| `status?` | `RemixNode` | Quiet text before the View menu, such as an `AutoRefresh` with `show="status"`: small, muted, and hidden while the bar is narrower than 56rem. |
| `collapse?` | `boolean` | Moves the facets behind one "Filters (n)" popover while the bar is narrower than 32rem. |
| `locale?` | `string` | Locale for the counts. Defaults to the runtime's. |
| `labels` | `Labels` |  |

Also accepts everything in `Omit<TagProps<"div">, "children" | "id">`.