How to vertical align material ui Checkbox - material-ui

Question

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

Answer 1

Try changing alignItems style property of FormControlLabel.
This worked for me:
<FormControlLabel
sx={{ alignItems: 'flex-start' }}
control={
<Checkbox
sx={{
marginTop: -1,
}}
/>
}
/>

Answer 2

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