Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows?
☑a ☑b
☑c ☑d
I attempted to create an array = [[a,b],[c,d]], and mapped twice but the value would read [a,b], the outermost value. So when I choose a or b, the value remains the same [a,b] since the code is similar to pseudo code like this:
<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}> <- The value in select will compare value here to check for a 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 someone offer some assistance with this?