Product Filters Engine

Component "product-filters" not found.
About this component

Product Filters Engine

Shared engine behind the productlist blocks: filter/sort/page state, query emission with debounce, cascading groups, client-side matching, and a config-driven field renderer over the individual filter components.

Props

Read from the component's own type, so this cannot drift from what it accepts.

PropTypeDefaultDescription
groupsProductFilterGroup[]
defaultFiltersRecord<string, string[]>
onQueryChange(query: ProductQuery) => void
classNamestring

More Filter components

View all Filter

Gender

Segmented Filter

Single-select segmented control built on Tabs for mutually exclusive choices like gender or condition. Clicking the active segment clears the selection.

Deals

Toggle Filter

Switch rows for boolean product flags like on-sale or in-stock. Multi-select, works controlled or uncontrolled.

Search

Search Filter

Text search input with a leading icon for keyword filtering. Debounce in the consumer if you fetch on change.

Category

Select Filter

Single-select dropdown for long option lists that would crowd a sidebar. Supports a clear item, result counts, and a disabled state for dependent filters.

Color

Color Swatch Filter

Multi-select color circles for color filtering. Each option paints its own CSS color and stays accessible via screen-reader labels.

Brand

Combobox Filter

Searchable dropdown for very long option lists like brands. Type to narrow options, select one or many, and see result counts inline.