Components

Replace built-in controls and containers through the components prop.

import '@vojtechportes/react-query-builder/styles.css';
const components = {
  Add: MyAddButton,
  Remove: MyRemoveButton,
  form: {
    Input: MyInput,
    Select: MySelect,
  },
};

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

Override contracts

• Form controls should behave like controlled inputs. They receive the current value plus change handlers and disabled state.
• Rule and Group are layout containers. They receive already-prepared children and control regions rather than raw builder state.
• DropZone and EmptyGroupDropZone are drag-and-drop render hooks. They receive ids, indices, parent ids, drag state, and active state.
• Button-like overrides such as Add, Remove, Popover, and PopoverItem should preserve click semantics and remain accessible.
• HistoryControls receives built-in undo and redo button nodes plus history state and handlers, so custom layouts can reuse the default controls instead of recreating them.
• TextModeEditor replaces the whole text-mode editor surface. This is the correct override point for Monaco or other advanced editors.
• TextModeInput replaces only the input control used by the built-in text editor. It is useful when you want the built-in overlay editor behavior but need a UI-library-specific input shell.
• TextModeToggleContent, OutlinedButton, and Alert let you align text-mode controls and warnings with your design system.

Responsive behavior

• The built-in Rule and Group components include a compact responsive layout for.
• Multi-select controls use a summarized closed state so selected values do not overflow the available rule width.
• Responsive behavior is automatic when you use the default components.
• If you replace components.Rule or components.Group, your custom layout is responsible for its own responsive behavior.