How to vertical align material ui Checkbox

Question

Simple put, I'd like to vertical align the Checkbox from Material UI.

Answer 1

This took me a while to track down, but this solution for another forum was the one that worked:

<FormControl fullWidth>
  <FormControlLabel
    style={{display:'table'}}
    control={<div style={{display:'table-cell'}}><CustomizedCheckbox/></div>}
    label={<div className="disclaimerandnotes">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>}
  />
</FormControl>

Answer 2

Try changing alignItems style property of FormControlLabel.

This worked for me:

<FormControlLabel
    sx={{ alignItems: 'flex-start' }}
    control={
        <Checkbox
            sx={{
                marginTop: -1,
            }}
        />
    }
/>

Answer 3

Since MUI is based on Flexbox, you can simply override its alignItems property:

<FormControlLabel
control={
    <div style={{ alignSelf: 'start' }}>
      <Checkbox checked={isChecked()} onChange={check.toggle} />
    </div>
}
label="Toggle Checkbox"
/>

You can probably make it even leaner by overriding the checkbox component style.