File Explorer - Selection
Handle how users can select items.
Single selection
By default, the File Explorer allows selecting a single item.
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:
No item selection recorded
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:
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
: