# FilterBar

> Toolbar for filtering a list or table: search, quick chips, a "More filters" popover, the applied filters as removable chips with "Clear all", and the result count.

Source: https://ui.jcsoftdev.com/docs/components/filter-bar

Toolbar for filtering a list or table: search, quick chips, a "More filters" popover, the
applied filters as removable chips with "Clear all", and the result count. It answers to its own
container width, never the viewport: under 40rem the quick chips and the extra filters fold into
one "Filters" button and only the search stays inline. The bar holds no filter state beyond the
search text: you pass the chips and the controls, and apply the filters to your rows.

## Import

```ts
import { FilterBar } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/filter-bar`.

## Usage

```tsx
export const Default: Story = {
  render: () => <Demo />,
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByRole("list", { name: "Filtros activos" })).toBeInTheDocument();
    await userEvent.click(canvas.getByRole("button", { name: "Quitar filtro Estado: Pendientes" }));
    await expect(canvas.queryByRole("list", { name: "Filtros activos" })).toBeNull();
  },
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `search` | `string` |  | Controlled search text. Pair it with `onSearchChange`. |
| `defaultSearch` | `string` | `""` |  |
| `onSearchChange` | `((search: string) => void)` |  |  |
| `searchPlaceholder` | `string` |  | Placeholder of the search field. Defaults to the localized "Search". |
| `quickFilters` | `FilterBarQuickFilters` |  | Always-visible single-choice chips (a status, a period). Under a narrow container they move into the Filters popover. |
| `children` | `ReactNode` |  | Extra filter controls; they go in the "More filters" popover. |
| `activeFilters` | `readonly FilterBarChip[]` | `[]` | One removable chip per applied filter, in the row under the bar. |
| `onClearAll` | `(() => void)` |  | Shows "Clear all" next to the chips; it should reset every filter, search included. |
| `resultCount` | `number` |  | Number of results of the current filters; announced politely when it changes. |
| `actions` | `ReactNode` |  | End slot: export, create, view switch. |
| `labels` | `Partial<FilterBarLabels>` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-filterbar--default)
- [Search Only](/storybook/?path=/story/containers-filterbar--search-only)
- [Narrow](/storybook/?path=/story/containers-filterbar--narrow)

## Source

`packages/ui/src/containers/filter-bar/filter-bar.tsx`