MultiSelectTree

Updated on Aug 21, 2025

Represents the MultiSelectTree component.

Accepts properties of type MultiSelectTreeProps. Obtaining the ref returns an object of type MultiSelectTreeHandle.

A Functional Component.

jsx

  const dataItemKey = 'id';
  const checkField = 'checkField';
  const checkIndeterminateField = 'checkIndeterminateField';
  const subItemsField = 'items';
  const expandField = 'expanded';
  const textField = 'text';
  const fields = {
   dataItemKey,
   checkField,
   checkIndeterminateField,
   expandField,
   subItemsField,
  };
  const App = () => {
   const [value, setValue] = React.useState([]);
   const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]);
   const onChange = (event) =>
      setValue(
      getMultiSelectTreeValue(data, {
          ...fields,
          ...event,
          value,
      })
      );
  const onExpandChange = React.useCallback(
      (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)),
      [expanded]
  );
  const treeData = React.useMemo(
      () =>
      processMultiSelectTreeData(data, {
          expanded,
          value,
          ...fields,
      }),
      [expanded, value]
  );

  return (
      <div>
      <div>Categories:</div>
      <MultiSelectTree
          style={{
          width: '300px',
          }}
          data={treeData}
          value={value}
          onChange={onChange}
          placeholder="Please select ..."
          textField={textField}
          dataItemKey={dataItemKey}
          checkField={checkField}
          checkIndeterminateField={checkIndeterminateField}
          expandField={expandField}
          subItemsField={subItemsField}
          onExpandChange={onExpandChange}
      />
      </div>
  );
  };

Name	Type	Default	Description
props	MultiSelectTreeProps intersected with RefAttributes<"null" | MultiSelectTreeHandle>		The props of the MultiSelectTree component.