custom combinator component, like toggle or radio instead of dropdown, can we have this feature?

[kuljeet2604]

[jakeboone02]

Use the controlElements prop (documentation), specifically the combinatorSelector property (documentation).

Example with radio buttons:

import { useId } from 'react';
import { QueryBuilder, ValueSelectorProps } from 'react-querybuilder';

const MyCombinatorSelector = (props: ValueSelectorProps) => {
  const name = useId();
  return (
    <>
      <label>
        <input
          type="radio"
          name={`combinator-${name}`}
          checked={props.value === 'and'}
          onClick={e => props.handleOnChange('and')}
        />
        {'AND'}
      </label>
      <label>
        <input
          type="radio"
          name={`combinator-${name}`}
          checked={props.value === 'or'}
          onClick={e => props.handleOnChange('or')}
        />
        {'OR'}
      </label>
    </>
  );
};

// Implementation:

<QueryBuilder
  fields={fields}
  query={query}
  onQueryChange={onQueryChange}
  controlElements={{
    combinatorSelector: MyCombinatorSelector,
  }}
/>

[kuljeet2604]

thanks this works ✌🏻