Filter Builder

Filter builder: nested AND/OR groups, field-aware conditions, JSON and a summary. Pro · Forms and input › Whole forms and filters

Visual builder for nested AND / OR filters with field-type-aware conditions. Pair it with matchesFilter / filterRows to apply the value and describeFilter to summarise it.

Installation

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

npm install valyro-ui-pro

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

Props

Prop	Type	Default
`fields` *	`readonly FilterField<T>[]`		Filterable fields; the type picks the operators and the value editor.
`value`	`FilterGroup`		The filter tree (JSON-serialisable). The root is always a group.
`defaultValue`	`FilterGroup`	`EMPTY_ROOT`	Initial `value` when uncontrolled.
`onValueChange`	`(value: FilterGroup) => void`		Called with the new `value` when it changes.
`maxDepth`	`number`	`2`	Levels of groups, the root included: 1 allows no nested groups. Default 2.
`footer`	`ReactNode`		Content after the add buttons, e.g. a "Clear" or "Apply" button.
`locale`	`string`		Number and date formatting in the value editors. Defaults to the `ThemeProvider` locale.
`labels`	`Partial<Omit<FilterBuilderLabels, 'operators'>> & { operators?: Partial<FilterOperatorLabels> }`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

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 Toolbar — Catalog filter bar: result count, dropdown filters, sorting, chips
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

Previous: Form Autosave Status · Next: Filter Toolbar · All Forms and input