search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.44k stars 31.84k forks source link

[FormControlLabel][material-ui] Child control (e.g. Checkbox) should be top-aligned with multi-line labels #39798

Open mj12albert opened 8 months ago

mj12albert commented 8 months ago

One more thing that’s worth mentioning, is about the checkbox and label placement. When the content is longer than one line, we should have the checkbox and label top-aligned by default, like the example: cc @DiegoAndai @mj12albert (adding you to the loop since you're the owners of Material UI and Checkbox)

image

Originally posted by @zanivan in https://github.com/mui/material-ui/issues/39626#issuecomment-1785628269

mj12albert commented 8 months ago

The changes should be applied to FormControlLabel, I think the top-alignment should also apply to radios and switches too yeah? @zanivan

Screenshot 2023-11-08 at 4 55 39 PM Screenshot 2023-11-08 at 4 55 20 PM

PaulKristoffersson commented 8 months ago

If nobody has looket at it yet I could take up this issue.

mj12albert commented 7 months ago

If nobody has looket at it yet I could take up this issue.

@PaulKristoffersson Thanks ~ I've assigned it to you!

zanivan commented 7 months ago

I think the top-alignment should also apply to radios and switches too yeah?

Sure thing! I think it makes sense and looks consistent 👍

TonyBrobston commented 7 months ago

We are running into this same situation, we are using FormControlLabel and our label is multiple lines. We would ideally like to align our checkbox to the first line of text.

Is there confirmation that this change will be made? ...or maybe a prop that allows a user to set top, middle, bottom? If not, is there a suggested workaround?

Thanks!

perkrlsn commented 4 months ago

We are running into this same situation, we are using FormControlLabel and our label is multiple lines. We would ideally like to align our checkbox to the first line of text.

Is there confirmation that this change will be made? ...or maybe a prop that allows a user to set top, middle, bottom? If not, is there a suggested workaround?

Thanks!

@TonyBrobston Perhaps not ideal, but if you need a quick and dirty solution while the MUI team works on a more long term solution.

You could to something like this

...
<FormControlLabel
  slotProps={{ typography: { position: "relative", top: "10px" } }}
...
TonyBrobston commented 4 months ago

@perkrlsn Thanks for the tip

We came up with a solution back when I posted my comment.

It doesn't seem likely that the PR attached to this issue is going to get merged, it appears to have halted.

zanivan commented 4 months ago

Marking this issue for v7, since the current solution would bring breaking changes (see comment)