# FilterBar

> Narrows a list by a few filters and shows which ones are on.

- **Level**: molecule · **Status**: experimental (R15: may change or be removed; J-11) · **Role**: surface
- **Import**: `import { FilterBar } from "@rrios-forge/ui/molecules/filter-bar";`
- **Source**: `packages/ui/src/molecules/filter-bar`

Two-row toolbar: search · filters · actions on top, optional active-filter chips below. Renders <section role="region">. Patterns consulted: Patterns/Navigation · TabsForLocalContext, Patterns/Forms · SearchAndSelect, Patterns/Density & Growth · ActionOverflow.

## Use it for

- Filters / pagination / stepper → `FilterBar` / `Pagination` / `Stepper`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `density` | — | `compact` `comfortable` | — | — |

## Stories

- [Playground](/?path=/story/components-molecules-filterbar--playground) · frame: `/iframe.html?id=components-molecules-filterbar--playground&viewMode=story`
- [With search](/?path=/story/components-molecules-filterbar--with-search) · frame: `/iframe.html?id=components-molecules-filterbar--with-search&viewMode=story`
- [With select filters](/?path=/story/components-molecules-filterbar--with-select-filters) · frame: `/iframe.html?id=components-molecules-filterbar--with-select-filters&viewMode=story`
- [With active filters](/?path=/story/components-molecules-filterbar--with-active-filters) · frame: `/iframe.html?id=components-molecules-filterbar--with-active-filters&viewMode=story`
- [Dense](/?path=/story/components-molecules-filterbar--dense) · frame: `/iframe.html?id=components-molecules-filterbar--dense&viewMode=story`
- [In data page](/?path=/story/components-molecules-filterbar--in-data-page) · frame: `/iframe.html?id=components-molecules-filterbar--in-data-page&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).