angular / angular/components

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

Open
#27,049 5 comments 1 reaction 0 assignees View on GitHub
area: material/checkbox area: material/radio feature P4
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.