## Filter Chips (S—080)

Multi-select filter chips where a tick slides in on select, with a live count and a Clear that appears when needed.

- URL: https://sundaeui.dev/components/filter-chips
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/filter-chips.json`
- Tags: filter, chips, toggle, tags, multi-select

Selecting a chip grows a tick into it and inverts its colours; the width change is animated so the row reflows smoothly.
A Clear chip fades in once anything is on, and the result count updates as filters change.

### Usage

```tsx
import { FilterChips } from '@/components/sundae/filter-chips'

<FilterChips />
```

### Props

- `options` (`string[]`, required): Chip labels.
- `value / defaultValue` (`string[]`): Selected chips.
- `onValueChange` (`(v: string[]) => void`): Called on change.
- `count` (`(v: string[]) => number`): Optional result count for the selection.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Filtering lists, galleries and search results by tag.

### When not to use

- Single choice: use a segmented control.
- Dozens of options: use a combobox.

### Accessibility

- A group of toggle buttons with aria-pressed.
- Result counts are announced politely.
- Reduced motion removes the movement and keeps every state change.