Filter Toolbar

Панель фильтров каталога: счётчик, выпадающие фильтры, сортировка, чипы. Pro · Формы и ввод › Форма целиком и фильтры

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add filter-toolbar

npm install valyro-ui-pro

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

Prop	Type	Default
`title`	`ReactNode`		What is being filtered: "Shoes".
`count`	`number`		Number of results, shown muted after the title.
`filters` *	`FilterToolbarFilter[]`		Dropdown filters, each a list of checkboxes.
`value`	`FilterToolbarValue`		Selected values per filter (controlled).
`defaultValue`	`FilterToolbarValue`		Initial `value` when uncontrolled.
`onValueChange`	`(value: FilterToolbarValue) => void`		Called with the new `value` when it changes.
`sortOptions`	`SelectItem[]`		Sort choices; the sort select is shown when given.
`sort`	`string`		Selected sort (controlled).
`defaultSort`	`string`		Initial `sort` when uncontrolled.
`onSortChange`	`(sort: string) => void`		Called with the new `sort` when it changes.
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Level of the title (default 2).
`locale`	`string`		BCP 47 locale for the result count.
`labels`	`Partial<FilterToolbarLabels>`		Overrides for the built-in English text; keys left out keep their defaults.