# FilterChip

Toggleable filter pill. Two interaction modes that compose: `active`+`onToggle` for multi-select category chips, `onRemove` for "applied filter" chips that show what's currently filtering the list. Optional `leading` icon and `count` badge.

[View examples](https://marsam.rahhal.app/components/filter-chip) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `@rahhal/ui/filter-chip`

**Category:** `forms`

## Anatomy

| part | role |
| --- | --- |
| FilterChipGroup | wraps chips with consistent gap + wrapping |
| FilterChip | single pill — toggle and/or removable |

## Props

| prop | type | purpose |
| --- | --- | --- |
| active | boolean | selected state — drives filled vs outlined |
| onToggle | (next: boolean) => void | fired on click |
| onRemove | () => void | renders × dismiss when provided |
| leading | ReactNode | small leading icon (12–14px) |
| count | number | small badge appended after the label |
| size | sm | md | default md (32px) |

## When to use vs Tabs

- **Tabs / segmented control** — 2–3 mutually-exclusive parallel views.
- **FilterChip** — 3+ values, multi-select, variable count, or filters that can be cleared individually.