feat(checkbox, radio): Provide a way to vertically align checkboxes and radios in stacked layouts
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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_
Contributor guide
Research direction
Start with the checkbox docs' “Checkboxes with reactive forms” example and the checkbox and radio component entry points. Compare the stacked layout with neighboring labels and inputs, then define the public alignment behavior and how it should be documented. Done means both components have an official, stable way to align without relying on internal sizes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100