filters UiFilter[] [] Name filters Description The filters to offer; type boolean rating color range
Type UiFilter[] Default [] activeFilters Record < string , unknown > {} Name activeFilters Description Applied values by filter key for switch, rating and range filters; list options carry selected
Type Record < string , unknown > Default {} sortOptions UiSort[] [] Name sortOptions Description The sort orders in the sort select.
Type UiSort[] Default [] activeSorting string 'default' Name activeSorting Description The value
Type string Default 'default' searchTerm string '' Name searchTerm Description The text in the search field; edits emit update:searchTerm
Type string Default '' totalResults number 0 Name totalResults Description Number of products matching the filters; the load-more button shows while fewer are loaded.
Type number Default 0 category string '' Name category Description Shown as the page heading, e.g. the category's name.
Type string Default '' products Product[] [] Name products Description The products loaded so far, shown as cards.
Type Product[] Default [] currency string 'EUR' Name currency Description ISO 4217 code the price filter shows its range in.
Type string Default 'EUR' locale string — Name locale Description BCP 47 locale the prices are formatted in; the ConfigProvider's when left out.
Type string Default — resultsLabel ( ( count : number ) => string ) ` ${ count } ${ count === 1 ? 'product' : 'products' } ` Name resultsLabel Description Builds the results count under the heading from totalResults
Type ( count : number ) : string Default ` ${ count } ${ count === 1 ? 'product' : 'products' } ` filtersLabel string 'Filters' Name filtersLabel Description Shown on the button that opens the filter sheet.
Type string Default 'Filters' sheetTitle string 'Filters' Name sheetTitle Description Shown as the filter sheet's heading.
Type string Default 'Filters' sortPlaceholder string 'Sort by' Name sortPlaceholder Description Shown in the sort select while no option is selected.
Type string Default 'Sort by' searchPlaceholder string 'Search products...' Name searchPlaceholder Description Shown in the sheet's search field while it is empty.
Type string Default 'Search products...' resetLabel string 'Reset' Name resetLabel Description Shown on the sheet's button that clears every filter, the sorting and the search.
Type string Default 'Reset' sortLabel string 'Sort by' Name sortLabel Description Shown next to the sort select on wider screens.
Type string Default 'Sort by' showResultsLabel ( ( count : number ) => string ) `Show Results ( ${ count } )` Name showResultsLabel Description Builds the label of the button that closes the filter sheet from totalResults
Type ( count : number ) : string Default `Show Results ( ${ count } )` removeLabel ( ( label : string ) => string ) `Remove ${ label } ` Name removeLabel Description Builds the screen-reader name of an active filter's remove button from the option's label.
Type ( label : string ) : string Default `Remove ${ label } ` activeFiltersLabel string 'Active filters' Name activeFiltersLabel Description Names the list of active filters for screen readers.
Type string Default 'Active filters' clearAllLabel string 'Clear all' Name clearAllLabel Description Shown on the link next to the active filters and on the empty state's button; both clear every filter.
Type string Default 'Clear all' emptyTitle string 'No products match these filters' Name emptyTitle Description Shown as the heading when no product matches the filters.
Type string Default 'No products match these filters' emptyText string 'Remove a filter or clear them all to see more.' Name emptyText Description Shown under the heading when no product matches the filters.
Type string Default 'Remove a filter or clear them all to see more.' loadMoreLabel string 'Load more' Name loadMoreLabel Description Shown on the button under the grid that loads more products.
Type string Default 'Load more' swatchColors Record < string , string > { ... DEFAULT_SWATCH_COLORS } Name swatchColors Description Swatch colour per colour-filter value, keyed lowercase.
Type Record < string , string > Default { ... DEFAULT_SWATCH_COLORS } class ClassValue — Name class Description Classes added to the part's own element, after its recipe classes.
Type null | string | false | Record < string , any > | ClassValue[] Default — open boolean false Name open Description Whether the filter sheet is open.
Type boolean Default false