React Material UI – Checkbox – Row alignment

byMR

December 2, 2022

I could appreciate any leads for the following:

I want two checkboxes:

Android and IOS

to be placed beside each other. I used Material UI FormGroup, Formlabel and Checkbox in a React form.

The problem I could not solve is the checkboxes are aligned one below another:

This is my code:

 <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>

Can I override this alignment in CSS or is there any direct way to align it one beside another?

>Solution :

You can do the following:

 <FormGroup sx={{position: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems:'center'}}> // remove justifyContent to disable vertical alignement and alignItems to disable horizontal alignement
            <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>