Add a block/fullWidth mode for FormControlLabel

[dantman]

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

Currently all of the labeled Checkbox/Radio buttons in the Selection Controls are "inline". i.e. They are defined as inline-block and even though FormGroup uses flex+column to stretch the Checkbox/Radio the FormControlLabel defines a margin-right: 16px;.

This means that in the block/list examples the right 16px of the list is not clickable and text also cannot span into this area even though the top FormLabel can.

Expected Behavior

FormControlLabel should have a mode that will disable the marginRight. We could re-use fullWidth and combine it with display: block; and apply width: 100%;.

[oliviertassinari]

@dantman Do you have any specific implementation in mind? I guess we could replace the margin-right with a padding-right to expand the clickable area.

[dantman]

I believe the reason the margin-right exists is because FormControlLabel is also used for the inline version of the labeled checkboxes/radio boxes. i.e. That margin is what is responsible for the inline list of checkboxes/radio boxes being separated. I'm not sure it's a good idea to make the blank space in between them clickable.

The block/list mode doesn't have use for the space after at all, so rather than swapping margin for padding the correct behaviour is for the margin-right to just not be present (be 0) in fullWidth/block mode.

[oliviertassinari]

@dantman This sounds fair.

[borzh]

Currently I am using:
<FormControlLabel style={{ marginRight: -14 }}
as a temporal fix this issue.

[oliviertassinari]

I'm closing as it didn't get traction.

[dantman]

How/where does it need to get traction?

[oliviertassinari]

@dantman It's me nicely saying, low priority, let's move to a different problem.

[hanseonghye]

<RadioGroup
      ...
      sx={{
        width: 'auto',
        flexWrap: 'nowrap',
      }}
>


      <FormControlLabel 
            ...
            sx={{
                  width: '100%', margin: '0 !important'
            }}
      >

Im using this way.