[TreeView] Add support for checkbox selection

docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function CheckboxMultiSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView, TreeViewBaseItem } from '@mui/x-tree-view';
+
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function CheckboxMultiSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/selection/CheckboxMultiSelection.tsx.preview

@@ -0,0 +1 @@
+<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view';
+
+const MUI_X_PRODUCTS = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function CheckboxSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView, TreeViewBaseItem } from '@mui/x-tree-view';
+
+const MUI_X_PRODUCTS: TreeViewBaseItem[] = [
+  {
+    id: 'grid',
+    label: 'Data Grid',
+    children: [
+      { id: 'grid-community', label: '@mui/x-data-grid' },
+      { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
+      { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
+    ],
+  },
+  {
+    id: 'pickers',
+    label: 'Date and Time Pickers',
+    children: [
+      { id: 'pickers-community', label: '@mui/x-date-pickers' },
+      { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
+    ],
+  },
+  {
+    id: 'charts',
+    label: 'Charts',
+    children: [{ id: 'charts-community', label: '@mui/x-charts' }],
+  },
+  {
+    id: 'tree-view',
+    label: 'Tree View',
+    children: [{ id: 'tree-view-community', label: '@mui/x-tree-view' }],
+  },
+];
+
+export default function CheckboxSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/selection/CheckboxSelection.tsx.preview

@@ -0,0 +1 @@
+<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

docs/data/tree-view/rich-tree-view/selection/selection.md

@@ -17,6 +17,16 @@ The Tree View also supports multi-selection:
 
 {{"demo": "MultiSelectTreeView.js"}}
 
+## Checkbox selection
+
+To activate checkbox selection set `checkboxSelection={true}`:
+
+{{"demo": "CheckboxSelection.js"}}
+
+This is also compatible with multi selection:
+
+{{"demo": "CheckboxMultiSelection.js"}}
+
 ## Controlled selection
 
 Use the `selectedNodes` prop to control the selected items.

docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function CheckboxMultiSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <SimpleTreeView multiSelect checkboxSelection>
+        <TreeItem nodeId="grid" label="Data Grid">
+          <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem nodeId="pickers" label="Date and Time Pickers">
+          <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem nodeId="charts" label="Charts">
+          <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem nodeId="tree-view" label="Tree View">
+          <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

docs/data/tree-view/simple-tree-view/selection/CheckboxMultiSelection.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function CheckboxMultiSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <SimpleTreeView multiSelect checkboxSelection>
+        <TreeItem nodeId="grid" label="Data Grid">
+          <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem nodeId="pickers" label="Date and Time Pickers">
+          <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem nodeId="charts" label="Charts">
+          <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem nodeId="tree-view" label="Tree View">
+          <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function CheckboxSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <SimpleTreeView checkboxSelection>
+        <TreeItem nodeId="grid" label="Data Grid">
+          <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem nodeId="pickers" label="Date and Time Pickers">
+          <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem nodeId="charts" label="Charts">
+          <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem nodeId="tree-view" label="Tree View">
+          <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

docs/data/tree-view/simple-tree-view/selection/CheckboxSelection.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
+import { TreeItem } from '@mui/x-tree-view/TreeItem';
+
+export default function CheckboxSelection() {
+  return (
+    <Box sx={{ height: 264, flexGrow: 1, maxWidth: 400 }}>
+      <SimpleTreeView checkboxSelection>
+        <TreeItem nodeId="grid" label="Data Grid">
+          <TreeItem nodeId="grid-community" label="@mui/x-data-grid" />
+          <TreeItem nodeId="grid-pro" label="@mui/x-data-grid-pro" />
+          <TreeItem nodeId="grid-premium" label="@mui/x-data-grid-premium" />
+        </TreeItem>
+        <TreeItem nodeId="pickers" label="Date and Time Pickers">
+          <TreeItem nodeId="pickers-community" label="@mui/x-date-pickers" />
+          <TreeItem nodeId="pickers-pro" label="@mui/x-date-pickers-pro" />
+        </TreeItem>
+        <TreeItem nodeId="charts" label="Charts">
+          <TreeItem nodeId="charts-community" label="@mui/x-charts" />
+        </TreeItem>
+        <TreeItem nodeId="tree-view" label="Tree View">
+          <TreeItem nodeId="tree-view-community" label="@mui/x-tree-view" />
+        </TreeItem>
+      </SimpleTreeView>
+    </Box>
+  );
+}

docs/data/tree-view/simple-tree-view/selection/selection.md

@@ -17,6 +17,16 @@ The Tree View also supports multi-selection:
 
 {{"demo": "MultiSelectTreeView.js"}}
 
+## Checkbox selection
+
+To activate checkbox selection set `checkboxSelection={true}`:
+
+{{"demo": "CheckboxSelection.js"}}
+
+This is also compatible with multi selection:
+
+{{"demo": "CheckboxMultiSelection.js"}}
+
 ## Controlled selection
 
 Use the `selectedNodes` prop to control the selected items.

docs/pages/x/api/tree-view/rich-tree-view.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "defaultEndIcon": { "type": { "name": "node" } },
     "defaultExpandedNodes": {

docs/pages/x/api/tree-view/simple-tree-view.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "defaultEndIcon": { "type": { "name": "node" } },

docs/pages/x/api/tree-view/tree-item.json

@@ -71,6 +71,12 @@
       "description": "Styles applied to the tree node icon.",
       "isGlobal": false
     },
+    {
+      "key": "interactive",
+      "className": "MuiTreeItem-interactive",
+      "description": "State class applied to the content element when clicking it causes an action.",
+      "isGlobal": false
+    },
     {
       "key": "label",
       "className": "MuiTreeItem-label",
@@ -86,7 +92,7 @@
     {
       "key": "selected",
       "className": "Mui-selected",
-      "description": "State class applied to the content element when selected.",
+      "description": "State class applied to the content element when selected and not using the checkbox selection.",
       "isGlobal": true
     }
   ],

docs/pages/x/api/tree-view/tree-view.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "checkboxSelection": { "type": { "name": "bool" }, "default": "false" },
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "defaultEndIcon": { "type": { "name": "node" } },

docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json

@@ -1,6 +1,9 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "checkboxSelection": {
+      "description": "If <code>true</code>, the tree view renders a checkbox at the left of its label that allows selecting it."
+    },
     "classes": { "description": "Override or extend the styles applied to the component." },
     "defaultEndIcon": {
       "description": "The default icon displayed next to a end node. This is applied to all tree nodes and can be overridden by the TreeItem <code>icon</code> prop."
@@ -40,7 +43,7 @@
       }
     },
     "multiSelect": {
-      "description": "If true <code>ctrl</code> and <code>shift</code> will trigger multiselect."
+      "description": "If <code>true</code>, <code>ctrl</code> and <code>shift</code> will trigger multiselect."
     },
     "onExpandedNodesChange": {
       "description": "Callback fired when tree items are expanded/collapsed.",