QueryBuilder

This component allows you to create conditions and group them using logical operators. It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.

Take a look at the usage page to learn more about this component.

Source Code

uikit-react-core

How to use

The query builder component enables you to create conditions and then group them using logical operators to create structured sets of rules. The output of this component can be easily parsed to create SQL, NoSQL, or any other type of query depending on your use case.

Attributes

To use this component, you’ll need to define your attributes using the attributes property. This property receives an object with all the attributes you’ll be able to choose from to create conditions in the query builder.

An attribute has the following specification:

interface HvQueryBuilderAttribute {
  id?: string;
  label: string;
  type: "boolean" | "numeric" | "dateandtime" | "text" | "textarea" | string;
}

The depth of the query, i.e. the number of nested query groups, can be controlled through the maxDepth where the default value is 1. Furthermore, confirmation dialogs will always be shown by default when removing a condition or group. To change this behavior, the disableConfirmation property is available. If you need your QueryBuilder to be read-only, you can set the readOnly property to true.

No conditions created yet

or a

maxDepth

readOnly

disableConfirmation

<HvQueryBuilder 
  maxDepth={1}
  readOnly={false}
  disableConfirmation={false}
  attributes={{"key1":{"label":"Numeric","type":"numeric"},"key2":{"label":"Text","type":"text"},"key3":{"label":"Boolean","type":"boolean"}}}
/>

<HvQueryBuilder 
  maxDepth={1}
  readOnly={false}
  disableConfirmation={false}
  attributes={{"key1":{"label":"Numeric","type":"numeric"},"key2":{"label":"Text","type":"text"},"key3":{"label":"Boolean","type":"boolean"}}}
/>

The query builder already has 5 built-in attribute types, boolean, numeric, text, textarea, and dateandtime, but custom ones can be created if needed.

Find below an example for the attributes property using custom and built-in attribute types.

const attributes: HvQueryBuilderProps["attributes"] = {
  attr1: {
    label: "Numeric",
    type: "numeric",
  },
  attr2: {
    label: "Text",
    type: "text",
  },
  attr3: {
    label: "Text Area",
    type: "textarea",
  },
  attr4: {
    label: "Boolean",
    type: "boolean",
  },
  attr5: {
    label: "Date & Time",
    type: "dateandtime",
  },
  attr6: {
    label: "Custom",
    type: "custom",
  },
};

Combinators

The query builder already has 2 default combinator operands used out of the box: or and and. This set of combinators enables you to define how your conditions can be combined together.

If you want to override the default combinators and define new ones, you can use the combinators property that receives an array of combinators where each combinator has the following specification:

interface HvQueryBuilderQueryCombinator {
  operand: string;
  label: string;
}

Find an example of combinators below.

const combinators: HvQueryBuilderProps["combinators"] = [
  { operand: "or", label: "OR" },
  { operand: "and", label: "AND" },
];

Operators

After defining your attributes, you’ll need to specify the operators for each one of your attribute types through the operators property. This property enables you to define the conditions’ operators by attribute type and combinator.

The query builder already has default operators for each built-in attribute type and they are used out of the box. The default operators are available through the hvQueryBuilderDefaultOperators object exported by UI Kit’s core package. However, you’ll most likely need to override these operators depending on your use case.

An operator has the following specification:

interface HvQueryBuilderQueryOperator {
  operator: string;
  label: string;
  combinators: string[];
}

Find below an example for the operators property.

const operators: HvQueryBuilderProps["operators"] = {
  // Using the default operators for the "boolean", "numeric", "text", "textarea", and "dateandtime" attribute types
  ...hvQueryBuilderDefaultOperators,
  // Defining the operators for the "custom" attribute type
  custom: [
    {
      operator: "equalsTo",
      label: "Equal to (=)",
      combinators: ["and", "or"],
    },
    {
      operator: "notEqual",
      label: "Not equal to (!=)",
      combinators: ["and", "or"],
    },
    {
      operator: "Empty",
      label: "Empty",
      combinators: ["and", "or"],
    },
  ],
};

Initial query

you can pass an initial query to the query builder using the defaultValue property. Use the disableConfirmation property to disable the confirmation dialogs.

Attribute

Operator

Value

Attribute

Operator

Value

Attribute

Operator

Value

Attribute

Operator

Date

Time

Attribute

Operator

Value

import { useState } from "react";


export default function Demo() {
  const [disable, setDisable] = useState(false);


  return (
    <div className="flex flex-col gap-sm">
      <HvButton
        variant="secondarySubtle"
        startIcon={<Topics />}
        onClick={() => setDisable(!disable)}
        className="mb-sm"
        style={{ width: "240px" }}
      >
        {disable ? "Show" : "Hide"} confirmation dialogs
      </HvButton>
      <HvQueryBuilder
        attributes={attributes}
        defaultValue={initialQuery}
        onChange={(query) => {
          try {
            setMongoQuery(queryToMongo(query));
          } catch (error: any) {
            console.log("error: ", error.toString());
          }
        }}
        disableConfirmation={disable}
      />
    </div>
  );
}


const attributes = {
  price: {
    label: "Price",
    type: "numeric",
  },
  category: {
    label: "Category",
    type: "text",
  },
  in_stock: {
    label: "In stock",
    type: "boolean",
  },
  release: {
    label: "Release",
    type: "dateandtime",
  },
};


const initialQuery = {
  combinator: "and",
  rules: [
    {
      attribute: "price",
      operator: "lessThan",
      value: 10,
    },
    {
      attribute: "category",
      operator: "equals",
      value: "Movies",
    },
    {
      combinator: "and",
      rules: [
        {
          attribute: "in_stock",
          operator: "equalsTo",
          value: true,
        },
        {
          attribute: "release",
          operator: "greaterThan",
          value: {
            date: "2021-01-01",
            time: "00:00:00",
          },
        },
      ],
    },
    {
      combinator: "or",
      rules: [
        {
          attribute: "in_stock",
          operator: "equalsTo",
          value: false,
        },
      ],
    },
  ],
};

import { useState } from "react";

export default function Demo() {
  const [disable, setDisable] = useState(false);

  return (
    <div className="flex flex-col gap-sm">
      <HvButton
        variant="secondarySubtle"
        startIcon={<Topics />}
        onClick={() => setDisable(!disable)}
        className="mb-sm"
        style={{ width: "240px" }}
      >
        {disable ? "Show" : "Hide"} confirmation dialogs
      </HvButton>
      <HvQueryBuilder
        attributes={attributes}
        defaultValue={initialQuery}
        onChange={(query) => {
          try {
            setMongoQuery(queryToMongo(query));
          } catch (error: any) {
            console.log("error: ", error.toString());
          }
        }}
        disableConfirmation={disable}
      />
    </div>
  );
}

const attributes = {
  price: {
    label: "Price",
    type: "numeric",
  },
  category: {
    label: "Category",
    type: "text",
  },
  in_stock: {
    label: "In stock",
    type: "boolean",
  },
  release: {
    label: "Release",
    type: "dateandtime",
  },
};

const initialQuery = {
  combinator: "and",
  rules: [
    {
      attribute: "price",
      operator: "lessThan",
      value: 10,
    },
    {
      attribute: "category",
      operator: "equals",
      value: "Movies",
    },
    {
      combinator: "and",
      rules: [
        {
          attribute: "in_stock",
          operator: "equalsTo",
          value: true,
        },
        {
          attribute: "release",
          operator: "greaterThan",
          value: {
            date: "2021-01-01",
            time: "00:00:00",
          },
        },
      ],
    },
    {
      combinator: "or",
      rules: [
        {
          attribute: "in_stock",
          operator: "equalsTo",
          value: false,
        },
      ],
    },
  ],
};

Renderers

Having attributes, operators, and combinators enables you to have a fully functional query builder since this component already has some intrinsic behavior.

For instance, the query builder already has built-in value renderers, i.e. inputs to type the condition’s value, for the default attribute types boolean, numeric, text, textarea, and dateandtime. For custom attribute types, a basic text input is rendered by default. Moreover, if the range operator is selected, the condition’s value is cleared automatically, and the value renderer updates to range inputs for the numeric and dateandtime attribute types.

This component also has a default behavior for the Empty and IsNotEmpty operators. When they are selected, the condition’s value is cleared and an empty component is rendered for the value. This behavior is configured through the emptyRenderer property, which enables you to define the operators that should reset the condition’s value and render an empty component when selected.

If you don’t want to rely on the default behavior provided by the query builder and the built-in value renderers are not enough to cover your use case, it’s possible to customize them through the renderers property. This property enables you to customize the value renderers for specific operators and attribute types.

When customizing the query builder, you should note that emptyRenderer takes priority over renderers.

Find below an example on how to customize the value renderers through the renderers property.

const renderers: HvQueryBuilderProps["renderers"] = {
  // Renderer for the custom attribute type "custom"
  custom: CustomRenderer,
 
  text: {
    // Renderer to customize the "Contains" operator of the "text" attribute type
    Contains: ContainsRenderer,
  },
 
  numeric: {
    // Renderer to customize the "numeric" attribute type
    DEFAULT: NumericRenderer,
    // Renderer to customize the "range" operator of the "numeric" attribute type
    range: RangeRenderer,
  },
};

In the example above, 4 renderers were provided:

CustomRenderer will be used to render the value for the custom attribute type overriding the default text input used for custom attribute types.
ContainsRenderer will be used to render the value for the text attribute type when the Contains operator is selected overriding the default for this operator. When any other operator is selected for this attribute, the query builder relies on its default behavior.
NumericRenderer will be used to render the value for the numeric attribute type overriding the default renderer for this attribute type.
RangeRenderer will be used to render the value for the numeric attribute type when the range operator is selected. This renderer takes precedence over NumericRenderer when overriding the default renderer.

If necessary, it’s also possible to define value renderers at a more broad level using the DEFAULT key at the root of the renderers object like shown below. You should be aware that DEFAULT is a reserved key, you shouldn’t use to define your own attribute or operator types.

// Example 1
const renderers: HvQueryBuilderProps["renderers"] = {
  // Renderer to customize all attribute types and operators
  DEFAULT: DefaultRenderer,
};
 
// Example 2
const renderers: HvQueryBuilderProps["renderers"] = {
  DEFAULT: {
    // Renderer to customize all attribute types and operators
    DEFAULT: DefaultRenderer,
    // Renderer to customize the "range" operator of all attribute types
    range: DefaultRangeRenderer,
  },
};

In the first example, the DefaultRenderer will be used to render the value for all attribute types and operators. However, in the second example, the DefaultRenderer is used for all attribute types and operators except the range operator since the DefaultRangeRenderer will be used. These customizations have the lowest priority meaning that any renderer defined at the attribute type level will take precedence.

Find below an example where the priorities are annotated.

const renderers: HvQueryBuilderProps["renderers"] = {
  DEFAULT: {
    DEFAULT: DefaultRenderer, // 4
    range: DefaultRangeRenderer, // 3
  },
 
  numeric: {
    DEFAULT: NumericRenderer, // 2
    range: RangeRenderer, // 1
  },
};

Defining renderers

The value renderers are function components that receive the following properties:

interface HvQueryBuilderRendererProps<V = any> {
  id: React.Key;
  attribute: string;
  operator?: string;
  value?: V;
}

Find below an example of a value renderer.

const Renderer = ({ id }: HvQueryBuilderRendererProps) => {
  const { dispatchAction } = useQueryBuilderContext();
 
  return (
    <HvSlider
      required
      label="Slider"
      onChange={(value) => {
        dispatchAction({
          type: "set-value",
          id,
          value,
        });
      }}
    />
  );
};

Custom Renderers example

If the default attribute types (boolean, numeric, text, textarea, and dateandtime) are not enough to cover your use case, custom ones can be used. For these custom types, if no corresponding renderer is provided through the renderers property, a text input will be rendered. The renderers property can also be used to customize the value renderers for specific operators of an attribute type.

export default function Demo() {
  return (
    <div className="w-full">
      <HvQueryBuilder
        attributes={attributes}
        operators={operators}
        renderers={renderers}
        maxDepth={0}
      />
    </div>
  );
}


const attributes: HvQueryBuilderProps["attributes"] = {
  month: {
    label: "Month",
    type: "select",
  },
  weekday: {
    label: "Weekday",
    type: "select",
  },
  name: {
    label: "Name",
    type: "text",
  },
  age: {
    label: "Age",
    type: "slider",
  },
};


const operators = {
  text: [...hvQueryBuilderDefaultOperators.text],
  select: [
    {
      operator: "equalsTo",
      label: "Equal to (=)",
      combinators: ["and", "or"],
    },
    {
      operator: "notEqual",
      label: "Not equal to (!=)",
      combinators: ["and"],
    },
    {
      operator: "range",
      label: "Range",
      combinators: ["and", "or"],
    },
    {
      operator: "Empty",
      label: "Empty",
      combinators: ["and", "or"],
    },
  ],
  slider: [
    {
      operator: "equalsTo",
      label: "Equal to (=)",
      combinators: ["and", "or"],
    },
    {
      operator: "notEqual",
      label: "Not equal to (!=)",
      combinators: ["and"],
    },
    {
      operator: "Empty",
      label: "Empty",
      combinators: ["and", "or"],
    },
  ],
};


const selectRenderers = {
  month: {
    values: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    label: "Month",
    labelStart: "Start month",
    labelEnd: "End month",
    placeholder: "Select a month",
  },
  weekday: {
    values: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    label: "Weekday",
    labelStart: "Start weekday",
    labelEnd: "End weekday",
    placeholder: "Select a weekday",
  },
};


type SelectValue = string | { start?: string; end?: string };


const SelectRenderer = ({
  id,
  operator,
  value,
  attribute: attributeProp,
}: HvQueryBuilderRendererProps<SelectValue>) => {
  const { dispatchAction } = useQueryBuilderContext();


  const attribute = attributeProp as keyof typeof selectRenderers;


  const values = useMemo(
    () =>
      selectRenderers[attribute].values.map((val) => ({
        id: val,
        label: val,
      })),
    [attribute],
  );


  const handleUpdateRange = (type: "start" | "end", val?: string) => {
    if (typeof value !== "string") {
      const newValue = {
        start: value?.start,
        end: value?.end,
      };
      newValue[type] = val;


      dispatchAction({
        type: "set-value",
        id,
        value: newValue,
      });
    }
  };


  if (operator === "range") {
    return (
      <div className="flex gap-xs">
        <HvDropdown
          required
          label={selectRenderers[attribute].labelStart}
          placeholder={selectRenderers[attribute].placeholder}
          values={values}
          onChange={(selected) => {
            handleUpdateRange("start", selected?.id);
          }}
          maxHeight={200}
        />
        <HvDropdown
          required
          label={selectRenderers[attribute].labelEnd}
          placeholder={selectRenderers[attribute].placeholder}
          values={values}
          onChange={(selected) => {
            handleUpdateRange("end", selected?.id);
          }}
          maxHeight={200}
        />
      </div>
    );
  }


  return (
    <HvDropdown
      required
      label={selectRenderers[attribute].label}
      placeholder={selectRenderers[attribute].placeholder}
      values={values}
      onChange={(selected) => {
        dispatchAction({
          type: "set-value",
          id,
          value: selected?.id || null,
        });
      }}
      maxHeight={200}
    />
  );
};


const sliderRenderers = {
  age: {
    label: "Age (years)",
  },
};


const SliderRenderer = ({
  id,
  attribute: attributeProp,
}: HvQueryBuilderRendererProps<SelectValue>) => {
  const { dispatchAction } = useQueryBuilderContext();
  const attribute = attributeProp as keyof typeof sliderRenderers;
  return (
    <HvSlider
      required
      label={sliderRenderers[attribute].label}
      onChange={(value) => {
        dispatchAction({
          type: "set-value",
          id,
          value: value ? value[0] : null,
        });
      }}
    />
  );
};


const textContainsRenderers = {
  name: {
    label: "Value",
  },
};


const TextContainsRenderer = ({
  id,
  attribute: attributeProp,
  value,
}: HvQueryBuilderRendererProps<HvTagsInputProps["value"] | string>) => {
  const { dispatchAction } = useQueryBuilderContext();


  const attribute = attributeProp as keyof typeof textContainsRenderers;


  // Clear value when "Contains" is unselected and the renderer unmounts
  useEffect(() => {
    return () => {
      dispatchAction({
        type: "set-value",
        id,
        value: null,
      });
    };
  }, [dispatchAction, id]);


  return (
    <HvTagsInput
      label={textContainsRenderers[attribute].label}
      defaultValue={
        typeof value === "string" ? [{ label: value, type: "semantic" }] : value
      }
      onChange={(event, tags) => {
        dispatchAction({
          type: "set-value",
          id,
          value: tags.length > 0 ? tags : null,
        });
      }}
    />
  );
};


const renderers = {
  // Renderers for the custom attribute types "select" and "slider"
  select: SelectRenderer,
  slider: SliderRenderer,


  // Renderer to customize the "Contains" operator of the "text" attribute type
  text: {
    Contains: TextContainsRenderer,
  },
};

export default function Demo() {
  return (
    <div className="w-full">
      <HvQueryBuilder
        attributes={attributes}
        operators={operators}
        renderers={renderers}
        maxDepth={0}
      />
    </div>
  );
}

const attributes: HvQueryBuilderProps["attributes"] = {
  month: {
    label: "Month",
    type: "select",
  },
  weekday: {
    label: "Weekday",
    type: "select",
  },
  name: {
    label: "Name",
    type: "text",
  },
  age: {
    label: "Age",
    type: "slider",
  },
};

const operators = {
  text: [...hvQueryBuilderDefaultOperators.text],
  select: [
    {
      operator: "equalsTo",
      label: "Equal to (=)",
      combinators: ["and", "or"],
    },
    {
      operator: "notEqual",
      label: "Not equal to (!=)",
      combinators: ["and"],
    },
    {
      operator: "range",
      label: "Range",
      combinators: ["and", "or"],
    },
    {
      operator: "Empty",
      label: "Empty",
      combinators: ["and", "or"],
    },
  ],
  slider: [
    {
      operator: "equalsTo",
      label: "Equal to (=)",
      combinators: ["and", "or"],
    },
    {
      operator: "notEqual",
      label: "Not equal to (!=)",
      combinators: ["and"],
    },
    {
      operator: "Empty",
      label: "Empty",
      combinators: ["and", "or"],
    },
  ],
};

const selectRenderers = {
  month: {
    values: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    label: "Month",
    labelStart: "Start month",
    labelEnd: "End month",
    placeholder: "Select a month",
  },
  weekday: {
    values: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    label: "Weekday",
    labelStart: "Start weekday",
    labelEnd: "End weekday",
    placeholder: "Select a weekday",
  },
};

type SelectValue = string | { start?: string; end?: string };

const SelectRenderer = ({
  id,
  operator,
  value,
  attribute: attributeProp,
}: HvQueryBuilderRendererProps<SelectValue>) => {
  const { dispatchAction } = useQueryBuilderContext();

  const attribute = attributeProp as keyof typeof selectRenderers;

  const values = useMemo(
    () =>
      selectRenderers[attribute].values.map((val) => ({
        id: val,
        label: val,
      })),
    [attribute],
  );

  const handleUpdateRange = (type: "start" | "end", val?: string) => {
    if (typeof value !== "string") {
      const newValue = {
        start: value?.start,
        end: value?.end,
      };
      newValue[type] = val;

      dispatchAction({
        type: "set-value",
        id,
        value: newValue,
      });
    }
  };

  if (operator === "range") {
    return (
      <div className="flex gap-xs">
        <HvDropdown
          required
          label={selectRenderers[attribute].labelStart}
          placeholder={selectRenderers[attribute].placeholder}
          values={values}
          onChange={(selected) => {
            handleUpdateRange("start", selected?.id);
          }}
          maxHeight={200}
        />
        <HvDropdown
          required
          label={selectRenderers[attribute].labelEnd}
          placeholder={selectRenderers[attribute].placeholder}
          values={values}
          onChange={(selected) => {
            handleUpdateRange("end", selected?.id);
          }}
          maxHeight={200}
        />
      </div>
    );
  }

  return (
    <HvDropdown
      required
      label={selectRenderers[attribute].label}
      placeholder={selectRenderers[attribute].placeholder}
      values={values}
      onChange={(selected) => {
        dispatchAction({
          type: "set-value",
          id,
          value: selected?.id || null,
        });
      }}
      maxHeight={200}
    />
  );
};

const sliderRenderers = {
  age: {
    label: "Age (years)",
  },
};

const SliderRenderer = ({
  id,
  attribute: attributeProp,
}: HvQueryBuilderRendererProps<SelectValue>) => {
  const { dispatchAction } = useQueryBuilderContext();
  const attribute = attributeProp as keyof typeof sliderRenderers;
  return (
    <HvSlider
      required
      label={sliderRenderers[attribute].label}
      onChange={(value) => {
        dispatchAction({
          type: "set-value",
          id,
          value: value ? value[0] : null,
        });
      }}
    />
  );
};

const textContainsRenderers = {
  name: {
    label: "Value",
  },
};

const TextContainsRenderer = ({
  id,
  attribute: attributeProp,
  value,
}: HvQueryBuilderRendererProps<HvTagsInputProps["value"] | string>) => {
  const { dispatchAction } = useQueryBuilderContext();

  const attribute = attributeProp as keyof typeof textContainsRenderers;

  // Clear value when "Contains" is unselected and the renderer unmounts
  useEffect(() => {
    return () => {
      dispatchAction({
        type: "set-value",
        id,
        value: null,
      });
    };
  }, [dispatchAction, id]);

  return (
    <HvTagsInput
      label={textContainsRenderers[attribute].label}
      defaultValue={
        typeof value === "string" ? [{ label: value, type: "semantic" }] : value
      }
      onChange={(event, tags) => {
        dispatchAction({
          type: "set-value",
          id,
          value: tags.length > 0 ? tags : null,
        });
      }}
    />
  );
};

const renderers = {
  // Renderers for the custom attribute types "select" and "slider"
  select: SelectRenderer,
  slider: SliderRenderer,

  // Renderer to customize the "Contains" operator of the "text" attribute type
  text: {
    Contains: TextContainsRenderer,
  },
};

dispatchAction is needed to update the query and can be accessed through the useQueryBuilderContext hook exported by the core package. This utility can be used to dispatch several action types such as: reset-query, reset-group, add-rule, add-group, remove-node, set-combinator, set-attribute, set-operator, and set-value. However, you’ll most likely only need the set-value action that enables you to set the value of a condition. This action has the following specification:

{
  type: "set-value";
  id: React.Key;
  value: any;
}

Controlled

The query builder state can be controlled using the value and onChange properties.

Attribute

Operator

Value

import { useEffect, useState } from "react";


export default function Demo() {
  const [query, setQuery] =
    useState<HvQueryBuilderProps["value"]>(initialQuery);


  return (
    <div className="w-full">
      <HvQueryBuilder
        attributes={attributes}
        value={query}
        onChange={(newQuery) => {
          setQuery(newQuery);
        }}
        disableConfirmation
      />
    </div>
  );
}


const attributes: HvQueryBuilderProps["attributes"] = {
  price: {
    label: "Price",
    type: "numeric",
  },
  category: {
    label: "Category",
    type: "text",
  },
  in_stock: {
    label: "In stock",
    type: "boolean",
  },
  release: {
    label: "Release",
    type: "dateandtime",
  },
};


const initialQuery: HvQueryBuilderProps["value"] = {
  combinator: "and",
  rules: [{ attribute: "price", operator: "lessThan", value: 10 }],
};

import { useEffect, useState } from "react";

export default function Demo() {
  const [query, setQuery] =
    useState<HvQueryBuilderProps["value"]>(initialQuery);

  return (
    <div className="w-full">
      <HvQueryBuilder
        attributes={attributes}
        value={query}
        onChange={(newQuery) => {
          setQuery(newQuery);
        }}
        disableConfirmation
      />
    </div>
  );
}

const attributes: HvQueryBuilderProps["attributes"] = {
  price: {
    label: "Price",
    type: "numeric",
  },
  category: {
    label: "Category",
    type: "text",
  },
  in_stock: {
    label: "In stock",
    type: "boolean",
  },
  release: {
    label: "Release",
    type: "dateandtime",
  },
};

const initialQuery: HvQueryBuilderProps["value"] = {
  combinator: "and",
  rules: [{ attribute: "price", operator: "lessThan", value: 10 }],
};

Panel Radio