Query Conditions Builder

ProNew

Filter rules as rows of field, operator and value, where the operators and the value input change with the field type (text, number, date, choice) and the join (all or any) is a switch. Use this when people build filters without writing a query.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Segments, automations and saved views let people combine conditions on typed fields.

Do not use it when: For two or three simple filters use filter chips or dropdowns. This is for open-ended rule lists.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`fields`	`{ id, label, type, options? }[]`	The fields people can filter on. Types: `text`, `number`, `date`, `choice`.
`onChange`	`({ join, conditions }) => void`	After every change.

describeConditions(conditions, join, fields?) is exported.

Accessibility

Each rule is a named group of three labelled controls; changing the field resets the operator and value so an old value can never be applied to a new type, and the value control changes element (text, number, date, select) so the right keyboard and picker appear.
Match all or any is a toggle group with a name. The rules read back as a sentence in a polite status, which doubles as the summary for screen readers.
Rules are removed with named buttons; with no rules the list says everyone matches instead of looking broken.

Testing

The pattern ships with a Testing Library test (query-conditions-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Segments, automations and saved views let people combine conditions on typed fields.

Do not use it when: For two or three simple filters use filter chips or dropdowns. This is for open-ended rule lists.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`fields`	`{ id, label, type, options? }[]`	The fields people can filter on. Types: `text`, `number`, `date`, `choice`.
`onChange`	`({ join, conditions }) => void`	After every change.

describeConditions(conditions, join, fields?) is exported.

Accessibility

Each rule is a named group of three labelled controls; changing the field resets the operator and value so an old value can never be applied to a new type, and the value control changes element (text, number, date, select) so the right keyboard and picker appear.
Match all or any is a toggle group with a name. The rules read back as a sentence in a polite status, which doubles as the summary for screen readers.
Rules are removed with named buttons; with no rules the list says everyone matches instead of looking broken.

Testing

The pattern ships with a Testing Library test (query-conditions-builder.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.