Product Category Filter

ProNew

A checkbox tree of categories with product counts that add up through the tree and a button that says how many products match. Use this when shoppers narrow a catalogue by nested categories.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it for shop sidebars and catalogue filters where categories nest and shoppers want to know the result size before they apply.

Do not use it when filters are not hierarchical (use plain checkboxes) or when counts are expensive and cannot be loaded up front.

Installation

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.

Props

Prop	Type	Default	Description
`categories`	`TreeNode<Facet>[]`	-	Categories with `data.count` on the leaves.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ticked leaf ids.
`onApply`	`(ids) => void`	-	The show button was pressed.

Accessibility

Counts are spoken as part of each row ("Clothing, 15 products").
The result button is a polite live region and says "No products" when disabled.
A checkbox tree: aria-checked, with mixed for partly ticked parents.

Testing

The pattern ships with a Testing Library test (product-category-filter.test.tsx) that covers the roll-up counts, the result button, applying and an empty selection.

Guide and examples

When to use it

Use it for shop sidebars and catalogue filters where categories nest and shoppers want to know the result size before they apply.

Do not use it when filters are not hierarchical (use plain checkboxes) or when counts are expensive and cannot be loaded up front.

Installation

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.

Props

Prop	Type	Default	Description
`categories`	`TreeNode<Facet>[]`	-	Categories with `data.count` on the leaves.
`value / defaultValue / onValueChange`	`string[]`	`[]`	Ticked leaf ids.
`onApply`	`(ids) => void`	-	The show button was pressed.

Accessibility

Counts are spoken as part of each row ("Clothing, 15 products").
The result button is a polite live region and says "No products" when disabled.
A checkbox tree: aria-checked, with mixed for partly ticked parents.

Testing

The pattern ships with a Testing Library test (product-category-filter.test.tsx) that covers the roll-up counts, the result button, applying and an empty selection.