feat(checkbox, radio): Provide a way to vertically align checkboxes and radios in stacked layouts

[amakhrov]

Feature Description

MDC increased checkbox and radio touch areas. It means that in a stacked layout, the checkboxes/radios are visually indented to the right. It can be seen in the checkbox docs: https://material.angular.io/components/checkbox/examples (the "Checkboxes with reactive forms" example).

It makes forms visually unbalanced - because other elements (labels, text inputs) don't have such indentation.

While a workaround with custom CSS is possible, it would relies on internal details of the Material components (sizes).

It would be great to have the official / documented way to do that. Maybe expose a variable as public API, add an Input to the components, or something else.

Use Case

No response

[andrewseguin]

Are you asking to have a supported way to apply negative margin to the checkbox/radio? Or have a variable that provides how far other elements should be padded to line up?

[amakhrov]

Perhaps the latter. The actual margin to apply depends on how the material components are structured internally, and I wanted to avoid hardcoding it in a project.

Also wondering whether such negative margin should be applied by default e.g. in a form field. That's what React MUI seems to do:

[andrewseguin]

I could see it being nice if we expose a variable to say how far over to scoot other elements, but I expect this to be a low priority. Also in general, negative margins are definitely something to avoid

[amakhrov]

I would love to avoid negative margins if I knew a better way to align checkboxes with the rest of the form. Wondering whether it's just "us" problem, or if it is going to be a typical design challenge across different projects that adopt the MDC components

[jahusa02]

Having the same problem. The Checkbox and Radio Buttons are indented to the right and we would have to use negative margins aswell