Rich Tree View - Selection

Handle how users can select items.

Single selection

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

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView items={MUI_X_PRODUCTS} />

<RichTreeView items={MUI_X_PRODUCTS} />

Press Enter to start editing

Multi selection

Use the multiSelect prop to enable multi-selection.

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

Press Enter to start editing

Disable selection

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

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

Press Enter to start editing

Checkbox selection

To activate checkbox selection set checkboxSelection={true}:

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

Press Enter to start editing

This is also compatible with multi selection:

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

Press Enter to start editing

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.

Data Grid
Date and Time Pickers
Charts
Tree View

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

Press Enter to start editing

Track item selection change

Use the onItemSelectionToggle prop if you want to react to an item selection change:

No item selection recorded

Data Grid
Date and Time Pickers
Charts
Tree View

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

Press Enter to start editing

Parent / children selection relationship

Automatically select an item when all of its children are selected and automatically select all children when the parent is selected.

If you cannot wait for the official implementation, you can create your own custom solution using the selectedItems, onSelectedItemsChange and onItemSelectionToggle props:

Data Grid
Date and Time Pickers
Charts
Tree View

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

Press Enter to start editing

API

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