React multiple select with checkbox with more than one option per row

Question

Is there a way to have multiple select with checkbox more than one per row? For example, I have four options[a,b,c,d].How to make it 2 options per row, total 2 rows instead of 1 option for 4 rows.

☑a ☑b

☑c ☑d

I tried make it an array =[[a,b],[c,d]], map twice but value will read [a,b],ther outer most value. So when I choose a or b, value will be same [a,b] since code would be some pseudo code like:

   <Select
      labelId="demo-multiple-checkbox-label"
      id="demo-multiple-checkbox"
      multiple
      value={array}
      onChange={handleChange}
      input={<OutlinedInput label="Tag" />}
      renderValue={(selected) => selected.join(', ')}
      MenuProps={MenuProps}
    >
   array.map((options)=>
       <div value={options}>  <-Value in select will compare value here to check match 
         options.map((option)=>
           <MenuItem key={name} value={option}>  <--this is the value I need
             <Checkbox checked={personName.indexOf(option) > -1} />
             <ListItemText primary={option} />)
           </MenuItem>
       </div>
   ) 

Can anyone help?

Answer 1

Is this what you are looking for?

Check my solution on code-sandbox

 import "./styles.css"; import { Select, OutlinedInput, MenuItem, Checkbox, ListItemText } from "@material-ui/core"; export default function App() { const array = ["a", "b", "c", "d"]; return ( <> <Select labelId="demo-multiple-checkbox-label" id="demo-multiple-checkbox" value={array} multiple style={{ width: "300px", display: "flex", flexDirection: "row" }} input={<OutlinedInput label="Tag" />} > <div style={{ width: "300px", display: "flex", flexDirection: "row", flexWrap: "wrap" }} > {array.map((o) => ( <MenuItem value={o} style={{ width: "150px" }}> <Checkbox /> <ListItemText primary={o} /> </MenuItem> ))} </div> </Select> </> ); }