Rich Tree View - Selection

Handle how users can select items.

Single selection

By default, the Tree View allows selecting a single item.

Multi selection

Use the multiSelect prop to enable multi-selection.

Disable selection

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

Checkbox selection

To activate checkbox selection set checkboxSelection={true}:

This is also compatible with multi selection:

Controlled selection

Use the selectedItems prop to control the selected items.

You can 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 if you want to react to an item selection change:

Automatic parents and children selection

By default, selecting a parent item does not select its children. You can override this behavior using the selectionPropagation prop.

Here's how it's structured:

type TreeViewSelectionPropagation = {
  descendants?: boolean; // default: false
  parents?: boolean; // default: false
};

When selectionPropagation.descendants is set to true:

• Selecting a parent selects all its descendants automatically.
• Deselecting a parent deselects all its descendants automatically.

When selectionPropagation.parents is set to true:

• Selecting all the descendants of a parent selects the parent automatically.
• Deselecting a descendant of a selected parent deselects the parent automatically.

The example below demonstrates the usage of the selectionPropagation prop.

Imperative API

Select or deselect an item

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

apiRef.current.selectItem({
  // 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 new selection status will be the opposite of its current one
  shouldBeSelected,
});

You can use the keepExistingSelection property to avoid losing the already selected items 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.

• <RichTreeView />
• <TreeItem />