Any suggestions on how I can achieve the following:
I am looking to have two checkboxes, one for Android and one for IOS
placed next to each other in a row. I have tried using Material UI FormGroup, Formlabel, and Checkbox components within a React form.
However, I'm encountering an issue where the checkboxes are stacked vertically instead of horizontally:
This is the code snippet I am currently working with:
<FormGroup **row**>
<FormControlLabel
control={
<Checkbox
size="small"
checked={Android}
onChange={handlePlatformSelectionChange}
name="Android"
/>
}
label="Android"
/>
<FormControlLabel
control={
<Checkbox
size="small"
checked={Ios}
onChange={handlePlatformSelectionChange}
name="Ios"
/>
}
label="iOS"
/>
</FormGroup>
Is there a way to adjust the alignment using CSS or any other direct method to ensure they are displayed next to each other?