Skip to main content
Version: v7

CSS classes

The <QueryBuilder /> component assigns standard classes to each element. In the (fully operational) query builder below, the title and label for each element have been set to the element's standard class.

The following standard classnames are not labeled below, but for most of them the elements they apply to can be identified by outline color:

  • .queryBuilder (black outline; the outer-most <div>)
  • .ruleGroup (maroon outline)
  • .ruleGroup-header (purple outline)
  • .ruleGroup-body (blue outline)
  • .rule.queryBuilder-disabled (gray outline for locked/disabled rules)
  • .rule.queryBuilder-valid (green outline for valid rules)
  • .rule.queryBuilder-invalid (red outline for invalid rules)
  • .shiftActions (orange outline for the wrapper <div> around the "Shift up"/"Shift down" buttons)
  • .dndDragging (applied to "preview" element while dragging)
  • .dndOver (applied to "hovered over" element while dragging)

A full list of standard classnames is below.

.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle
.queryBuilder-dragHandle

Standard classnames​

export const standardClassnames = {
  queryBuilder: 'queryBuilder',
  ruleGroup: 'ruleGroup',
  header: 'ruleGroup-header',
  body: 'ruleGroup-body',
  combinators: 'ruleGroup-combinators',
  addRule: 'ruleGroup-addRule',
  addGroup: 'ruleGroup-addGroup',
  cloneRule: 'rule-cloneRule',
  cloneGroup: 'ruleGroup-cloneGroup',
  removeGroup: 'ruleGroup-remove',
  notToggle: 'ruleGroup-notToggle',
  rule: 'rule',
  fields: 'rule-fields',
  operators: 'rule-operators',
  value: 'rule-value',
  removeRule: 'rule-remove',
  betweenRules: 'betweenRules',
  valid: 'queryBuilder-valid',
  invalid: 'queryBuilder-invalid',
  shiftActions: 'shiftActions',
  dndDragging: 'dndDragging',
  dndOver: 'dndOver',
  dndCopy: 'dndCopy',
  dragHandle: 'queryBuilder-dragHandle',
  disabled: 'queryBuilder-disabled',
  lockRule: 'rule-lock',
  lockGroup: 'ruleGroup-lock',
  valueSource: 'rule-valueSource',
  valueListItem: 'rule-value-list-item',
  branches: 'queryBuilder-branches',
} as const;

Source: /packages/react-querybuilder/src/defaults.ts#L202-L233