Simple Tree View - Selection

Learn how to enable item selection for the Tree View component.

Single selection

By default, SimpleTreeView lets users select a single item.

Multi-selection

Use the multiSelect prop to enable multi-selection.

Disable selection

Use the disableSelection prop if you don't want the items to be selectable:

Checkbox selection

To enable checkbox selection, set checkboxSelection={true}:

This is also compatible with multi-selection:

Selectable items

Use the disableSelection prop on the Tree Item component to disable selection on specific items. When an item is not selectable, the checkbox is hidden regardless of checkboxSelection prop.

In the example below, only leaf items (items without children) are selectable.

Controlled selection

Use the selectedItems prop to control selected TreeItem components. You can also use the onSelectedItemsChange prop to listen to changes in the selected items and update the prop accordingly.

Track item selection change

Use the onItemSelectionToggle prop to react to an item selection change:

Imperative API

To use the apiRef object, you need to initialize it using the useSimpleTreeViewApiRef() hook as follows:

const apiRef = useSimpleTreeViewApiRef();

return <SimpleTreeView apiRef={apiRef} items={ITEMS} />;

When your component first renders, apiRef.current is undefined. After the initial render, apiRef holds methods to interact imperatively with the Tree View.

Select or deselect an item

Use the setItemSelection() API method to select or deselect an item:

apiRef.current.setItemSelection({
  // The DOM event that triggered the change
  event,
  // The id of the item to select or deselect
  itemId,
  // If `true`, the other already selected items will remain selected
  // Otherwise, they will be deselected
  // This parameter is only relevant when `multiSelect` is `true`
  keepExistingSelection,
  // If `true` the item will be selected
  // If `false` the item will be deselected
  // If not defined, the item's selection status will be toggled
  shouldBeSelected,
});

You can use the keepExistingSelection property to avoid losing the items that have already been selected when using multiSelect:

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <SimpleTreeView />
• <TreeItem />