Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTwo linked filters, category then subcategory, where each option shows how many results it would give, the subcategory list follows the category, and an All choice and Clear filters reset them. Use this when filters narrow each other on a results page.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it above product lists and tables, where picking a category should immediately show which subcategories exist and how many items each holds.
Do not use it when counts are not known or filters are independent. Use faceted filters.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
facets | { value, label, count, children?: { value, label, count }[] }[] | - | Categories with their counts and subcategories. |
value | { category: string; sub: string } | - | Selected values; empty string is All (controlled). |
defaultValue | { category, sub } | all empty | Initial values. |
onValueChange | (value, count: number) => void | - | Runs on every change with the number of results. |
label | string | Filter by | Names the group. |
Category and Subcategory; the second is disabled while the first is All, with Choose a category first as its placeholder.Audio, 42), and All shows the total for its level.role="status" line announces 42 results after each change and Subcategory cleared when the parent changes.The pattern ships with a Testing Library test (cascading-filters-with-counts.test.tsx) that covers counts per option, the subcategory following the category, the result count and clearing.