# Filter Bar

Horizontal filter row with a Filters button and count badge, toggle chips, and dropdown chips that open a sheet. Sheets show a live result count, and a Clear chip appears once a filter is on.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/filter-bar
```

## Import

```tsx
import { countActiveFilters, FilterBar } from "@/components/ui/filter-bar/filter-bar";
```

## Variants

- `jobs` — Job board: `npx @lumioui/cli add pro/filter-bar-jobs`
- `restaurants` — Food delivery: `npx @lumioui/cli add pro/filter-bar-restaurants`
- `stays` — Holiday stays: `npx @lumioui/cli add pro/filter-bar-stays`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `filters` | `FilterDef[]` | Chip definitions, in rail order. |
| `value?` | `FilterValue` | Controlled filter state. |
| `defaultValue?` | `FilterValue` | Uncontrolled initial state. |
| `onValueChange?` | `(value: FilterValue) => void` | Fires with the whole new state on every change. |
| `onFiltersPress?` | `() => void` | Shows a leading "Filters" button (your full filter screen). |
| `filtersCount?` | `number` | Badge on the Filters button. Default: number of active chips. |
| `showClear?` | `boolean` | Show a trailing "Clear" chip when anything is on. Default true. |
| `resultCount?` | `number` | Live result count for the multi-select sheet button. |
| `resultLabel?` | `(count: number) => string` | Sheet button copy from the count. Default `Show N results`. |
| `size?` | `"sm" | "md"` | Chip height — sm 32, md 36 (default). |
| `inset?` | `number` | Horizontal padding of the rail (matches your screen gutter). Default 16. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-down` — /icons.html?i=chevron-down
- `check` — /icons.html?i=check

Source: https://lumioui.com/components/filter-bar