Filter.Form · ui.voila.dev

Recipient

Status

Sent

Price

Opened

<Filter.Form
	definitions={definitions}
	values={values}
	onValuesChange={setValues}
	labels={defaultFilterLabels}
	locale="en-US"
/>;

API

Prop	Type	Default
`definitions`	`readonly FilterDefinition[]`	required	The filters to edit, in the order they are rendered.
`labels`	`FilterLabels`	required	Every string the editor shows. `Filter.Root` supplies it; standalone, pass `defaultFilterLabels` or your own.
`locale`	`string`	required	BCP 47 tag used to format the numbers, money and dates in the fields.
`onValuesChange`	`(values: Readonly<Record<string, FilterValue>>) => void`	required	Called on every edit, not on an apply: `Filter.Form` is the editor without the commit step, so hold the record in your own state and decide when to query. For draft-then-apply, use `Filter.Root` or `Filter.Panel`.
`values`	`Readonly<Record<string, FilterValue>>`	required	The record being edited. Controlled — this component keeps no draft.

Plus every <div> prop. Source: filter/components/filter-form.tsx.

Unlike Filter.Root, onValuesChange fires on every edit — there is no draft and no apply step. That is the point of this part: in a sidebar that filters as you type, a commit button would be in the way. In a panel the user has to dismiss, it would not.

Filter.Field

Prop	Type	Default
`definition`	`FilterDefinition`	required	The one filter to render. Its `kind` picks the editor.
`labels`	`FilterLabels`	required	Every string this field shows. `Filter.Form` supplies it; standalone, pass `defaultFilterLabels` or your own.
`locale`	`string`	required	BCP 47 tag used to format this field's numbers, money and dates.
`onValueChange`	`(value: FilterValue \| undefined) => void`	required	Called with `undefined` when the field is cleared, which is how a filter is removed.
`value`	`FilterValue \| undefined`	required	The current value, or `undefined` when this filter is not active.

Plus the DOM props of the element it renders. Source: filter/components/filter-field.tsx.

One filter on its own, which is what Filter.Form renders in a loop. Reach for it when a single filter belongs somewhere else on the page — a status select in a toolbar — rather than in the editor with the rest. Clearing it calls onValueChange with undefined, which is how a filter leaves the record.