Builtwell
Category filter
Pick block categories as chips, each labelled with its count. A multiple combobox with its labels and sorting built in.
packages/design-system/components/combobox/category-filter.tsx
Examples
Header (14)
Footer (5)
Anatomy
- 01Chips row, the anchor
- 02Chip per pick, with remove
- 03Input
- 04Popup list
Usage
import { CategoryFilter } from "@repo/design-system/components/combobox/category-filter";
<CategoryFilter
categories={[{ name: "header", totalBlocks: 14 }, { name: "footer", totalBlocks: 5 }]}
selectedCategories={selected}
onCategoriesChange={setSelected}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| categories* | { name: string; totalBlocks: number }[] | none | Shown capitalised with the count, as "Header (14)", sorted by name. |
| selectedCategories* | string[] | none | The picked names. |
| onCategoriesChange* | (categories: string[]) => void | none | Called with the new list. |
| placeholder | string | "Search categories..." | Once something is picked. Empty, it reads Select categories. |
| className | string | none | On the wrapping div. |
Guidance
Do
- Use it where people filter a long list by several categories at once.
Don't
- Use it for a single choice. Use a select or combobox.