Customization

Fluent UI

Fluent UI v8 adapter usage

import '@vojtechportes/react-query-builder/styles.css';
import { components } from '@vojtechportes/react-query-builder/fluentui/v8';

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

Fluent UI v8 import

import { components } from '@vojtechportes/react-query-builder/fluentui/v8';

createFluentUiComponents

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import {
  createFluentUiComponents,
  components as fluentUiComponents,
} from '@vojtechportes/react-query-builder/fluentui/v8';

const components = createFluentUiComponents(fluentUiComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

export const MyFluentUiBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

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

Available entrypoint

@vojtechportes/react-query-builder/fluentui/v8 Fluent UI React 8 adapter.

Exports

components Ready-made Fluent UI component mapping for Builder.
Individual mapped components Named exports such as FluentUiSelect, FluentUiInput, and related Fluent-backed controls for partial overrides.
createFluentUiComponents Merges Fluent UI defaults with local overrides while preserving nested form keys.

Documentation

Fluent UI adapter guide.