Filter Toolbar

Catalog filter bar: result count, dropdown filters, sorting, chips. Pro · Forms and input › Whole forms and filters

Installation

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.

Form Field — Field with validation and errors
Multi-step Form — Multi-step form: per-step validation, skipping, review before submit, drafts
Form Autosave Status — Form autosave status: offline, error, version conflict and a useAutosave hook
Filter Builder — Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list
Multi Select — Pick several options
Combobox — Searchable select