Getting Started

Usage

Basic controlled usage. The stylesheet side-effect import belongs once in your application entrypoint; it is included in this standalone example so the copied setup is complete.

Basic setup

import '@vojtechportes/react-query-builder/styles.css';
import React, { useState } from 'react';
import {
  Builder,
  type DenormalizedQuery,
  type IBuilderFieldProps,
} from '@vojtechportes/react-query-builder';

const fields: IBuilderFieldProps[] = [
  {
    field: 'STATE',
    label: 'State',
    type: 'LIST',
    operators: ['EQUAL', 'NOT_EQUAL'],
    value: [
      { value: 'CZ', label: 'Czech Republic' },
      { value: 'SK', label: 'Slovakia' },
    ],
  },
  {
    field: 'IS_IN_EU',
    label: 'Is in EU',
    type: 'BOOLEAN',
  },
];

const initialData: DenormalizedQuery = [
  {
    type: 'GROUP',
    value: 'AND',
    isNegated: false,
    children: [
      {
        field: 'STATE',
        operator: 'EQUAL',
        value: 'CZ',
        readOnly: true,
      },
      {
        field: 'IS_IN_EU',
        operator: 'EQUAL',
        value: true,
      },
    ],
  },
];

export const MyBuilder = () => {
  const [data, setData] = useState(initialData);

  return <Builder fields={fields} data={data} onChange={setData} />;
};

The example includes a single rule with readOnly: true to show that locking can live directly in the query data without changing the rest of the builder configuration.

Related guide

Need a rule to compare against another field instead of a literal value? Visit Field Comparisons.

Next step

Continue with Builder Ref for imperative control, Field Comparisons for cross-field rules, Builder Behavior or Text Mode or Undo and Redo for editing workflows, or Dynamic Field Options for async select data, or Locking and Read-only for partial locking.