Product Filters

Catalog filters. Pro · Shop and payments › Catalog

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add product-filters

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ProductFilters } from 'valyro-ui-pro';

Props

Prop	Type	Default
`categories`	`ProductFilterOption[]`	`[]`	Multi-select checkbox options with optional counts; the group is hidden when empty.
`priceBounds` *	`RangeValue`		Price bounds in minor units (cents).
`priceStep`	`number`	`100`	Slider step in minor units (default 100 = one dollar).
`currency`	`string`	`'USD'`	ISO 4217 code for the price fields and chips.
`colors`	`ProductColorOption[]`	`[]`	Multi-select color swatches; the group is hidden when empty.
`sizes`	`ProductFilterOption[]`	`[]`	Multi-select option buttons — sizes, or any short values (brands, materials) with `labels.size` and `labels.sizeChip` renamed; the group is hidden when empty.
`ratings`	`number[]`	`[4, 3, 2]`	"N★ & up" choices (default 4, 3, 2). Pass [] to hide the group.
`value`	`ProductFilterValue`		Controlled `value`; use with `onValueChange`.
`defaultValue`	`ProductFilterValue`		Initial `value` when uncontrolled.
`onValueChange`	`(value: ProductFilterValue) => void`		Called with the new `value` when it changes.
`layout`	`'sidebar' \| 'sheet'`	`'sidebar'`	`sidebar` (default): a panel with every group, for a column beside the catalog. `sheet`: for phone-width catalogs — a "Filters · N" button and the active-filter chips in one row; the groups open in a BottomSheet, collapsed except the ones in use.
`open`	`boolean`		`layout="sheet"`: whether the sheet with the groups is open.
`defaultOpen`	`boolean`	`false`	`layout="sheet"`: initial open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		`layout="sheet"`: called when the sheet opens or closes.
`sheetContainer`	`HTMLElement \| null`		`layout="sheet"`: render the sheet inside this element (`position: relative; overflow: hidden`) instead of over the viewport — for a catalog inside a device frame or a panel. Such a sheet does not trap focus or dim the page: the rest of the page stays usable.
`resultCount`	`number`		`layout="sheet"`: products matching the current filters, counted on the sheet's button.
`locale`	`string`		Locale for prices and counts (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<ProductFiltersLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Product Card — Product card
Product Grid — Product catalog
Product Spotlight — Featured product: tagged photo, price, rating and actions
Reviews Summary — Reviews: average rating, filterable histogram, sorting and helpful votes
Guided Product Finder — Product finder wizard: branching questions and why a product fits
Location Card — Store location: distance, opening hours, pickup options and ordering
Shopping Cart Drawer — Slide-out cart
Checkout Summary — Order summary at checkout
Checkout Form — Checkout: shipping, address type, payment and field validation
Order Tracking — Order tracking: stages, carrier, tracking number and history
Invoice — Printable invoice: line items, taxes, discounts and totals in any currency
Credit Card — Bank card: gradient or two-tone, network detected from the number, contactless

Previous: Product Grid · Next: Product Spotlight · All Shop and payments