ComponentsEnterpriseQueryBuilder

AdvancedFilter / QueryBuilder

QueryBuilder creates explicit, reviewable field-operator-value filter expressions.

Typed fieldsGoverned operatorsAll / anyControlled rules

Overview

Use QueryBuilder for compound filters that cannot be expressed clearly by a compact filter bar.

Portfolio conditions

Live preview

Advanced filters

Match all conditions

Condition matching
PortfolioQuery.tsx
tsx
import { QueryBuilder, type QueryBuilderField, type QueryBuilderRule } from 'omverse-ui'
 
const fields: readonly QueryBuilderField[] = [
{
"value": "status",
"label": "Status",
"operators": [
{
"value": "is",
"label": "is"
},
{
"value": "is not",
"label": "is not"
},
{
"value": "contains",
"label": "contains"
}
],
"options": [
{
"value": "active",
"label": "Active"
},
{
"value": "blocked",
"label": "Blocked"
},
{
"value": "archived",
"label": "Archived"
}
]
},
{
"value": "owner",
"label": "Owner",
"operators": [
{
"value": "equals",
"label": "equals"
},
{
"value": "contains",
"label": "contains"
}
],
"placeholder": "Project owner"
},
{
"value": "risk",
"label": "Risk level",
"operators": [
{
"value": "is",
"label": "is"
},
{
"value": "is not",
"label": "is not"
}
],
"options": [
{
"value": "low",
"label": "Low"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "high",
"label": "High"
}
]
}
]
const rules: readonly QueryBuilderRule[] = [
{
"id": "status-1",
"field": "status",
"operator": "is",
"value": "active"
},
{
"id": "risk-1",
"field": "risk",
"operator": "is",
"value": "high"
}
]
 
<QueryBuilder fields={fields} value={rules} onValueChange={(next) => console.log(next)} />

Anatomy

Matching logic coordinates repeatable field, operator, value, and removal controls.

Advanced filtersAll | Any
StatusisActive
12345
  1. 1
    Heading

    Names the expression.

  2. 2
    Conjunction

    Matches all or any rules.

  3. 3
    Condition

    Combines field, operator, and value.

  4. 4
    Add control

    Appends a rule.

  5. 5
    Remove control

    Deletes one rule.

When to use

Recommended

  • Build compound queries

    Combine explicit conditions.

  • Govern expressions

    Limit operators by field.

  • Review logic

    Keep the full expression visible.

When not to use

Avoid

  • Do not filter by one value

    Use Select.

  • Do not hide common filters

    Use FilterBar.

  • Do not expose raw syntax

    Reserve code for experts.

Variants

Outlined

Bounded surface.

Filled

Tonal surface.

Raised

Standalone composer.

States

QueryBuilder reflects query composition state while users build rules.

StateTriggerVisual responseInteraction
EmptyNo rulesAdd controlAdd condition
EditingRules changeUpdated controlsCompose
IncompleteValue missingValidationComplete rule
LoadingFields resolvingStatusDisabled

Behavior

Rules

Stable identity.

Matching

All is AND; any is OR.

Field changes

Reset dependent values.

Governance

Definitions constrain input.

Accessibility

KeyAction
TabMoves through controls.
Arrow keysChanges choices.
EnterSpaceAdds or removes rules.
  • Label every condition control.
  • State matching logic in text.
  • Connect validation to values.
  • Name removal actions by condition.

Content guidelines

Use fields and operators that are immediately understandable by your policy owners.

Use domain fields

Match product labels.

ExampleRenewal date

Write operators as phrases

Prefer readable language.

Exampleis before

Format values

Respect data type.

Example₹50,000

Examples

Use query composition examples that match governance and reporting rules.

Enterprise saved conditions

Live preview

Build a governed rule set users can review and reproduce.

Advanced filters

Match all conditions

Condition matching
QueryComposition.tsx
tsx
import { QueryBuilder, type QueryBuilderField, type QueryBuilderRule } from 'omverse-ui'
 
const fields: readonly QueryBuilderField[] = [
{
"value": "status",
"label": "Status",
"operators": [
{
"value": "is",
"label": "is"
},
{
"value": "is not",
"label": "is not"
},
{
"value": "contains",
"label": "contains"
}
],
"options": [
{
"value": "active",
"label": "Active"
},
{
"value": "blocked",
"label": "Blocked"
},
{
"value": "archived",
"label": "Archived"
}
]
},
{
"value": "owner",
"label": "Owner",
"operators": [
{
"value": "equals",
"label": "equals"
},
{
"value": "contains",
"label": "contains"
}
],
"placeholder": "Project owner"
},
{
"value": "risk",
"label": "Risk level",
"operators": [
{
"value": "is",
"label": "is"
},
{
"value": "is not",
"label": "is not"
}
],
"options": [
{
"value": "low",
"label": "Low"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "high",
"label": "High"
}
]
}
]
const rules: readonly QueryBuilderRule[] = [
{
"id": "status-1",
"field": "status",
"operator": "is",
"value": "active"
},
{
"id": "risk-1",
"field": "risk",
"operator": "is",
"value": "high"
}
]
 
<QueryBuilder fields={fields} value={rules} onValueChange={(next) => console.log(next)} />

Props / API

Props

PropTypeDefaultDescription
fieldsreadonly QueryBuilderField[]requiredGoverned field definitions.
valuereadonly QueryBuilderRule[]undefinedControlled rules.
defaultValuereadonly QueryBuilderRule[][]Initial rules.
onValueChange(rules) => voidundefinedRuns when rules change.
conjunction'all' | 'any'undefinedControlled matching logic.
defaultConjunction'all' | 'any''all'Initial matching logic.
onConjunctionChange(value) => voidundefinedRuns when matching changes.
titleReactNode'Advanced filters'Visible heading.
disabledbooleanfalseDisables editing.
loadingbooleanfalseShows loading.
variant'outlined' | 'filled' | 'raised''outlined'Surface treatment.
size'sm' | 'md' | 'lg''md'Control density.