Puede crear un menú desplegable anidado con casillas de verificación con material ui

Aquí está el enlace que puede ver:

https://mui.com/components/checkboxes/

Y aquí está el código fuente de material UI para lograr el resultado:

 import * as React from 'react'; import Box from '@mui/material/Box'; import Checkbox from '@mui/material/Checkbox'; import FormControlLabel from '@mui/material/FormControlLabel'; export default function IndeterminateCheckbox() { const [checked, setChecked] = React.useState([true, false]); const handleChange1 = (event) => { setChecked([event.target.checked, event.target.checked]); }; const handleChange2 = (event) => { setChecked([event.target.checked, checked[1]]); }; const handleChange3 = (event) => { setChecked([checked[0], event.target.checked]); }; const children = ( <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}> <FormControlLabel label="Child 1" control={<Checkbox checked={checked[0]} onChange={handleChange2} />} /> <FormControlLabel label="Child 2" control={<Checkbox checked={checked[1]} onChange={handleChange3} />} /> </Box> ); return ( <div> <FormControlLabel label="Parent" control={ <Checkbox checked={checked[0] && checked[1]} indeterminate={checked[0] !== checked[1]} onChange={handleChange1} /> } /> {children} </div> ); }

Aquí está el enlace de codesandbox donde combiné el componente de interfaz de usuario de material con las casillas de verificación.

https://codesandbox.io/s/indeterminatecheckbox-material-demo-forked-o0vvw?file=/demo.js:0-2222