Skip to content

bug(radio): extra padding when label is empty #30872

@Schoko19961

Description

@Schoko19961

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Similar to checkboxes, the label in radio-buttons should be hidden when empty to avoid having the 4px padding of the label.
checkbox.scss

Maybe this could be added to internal-form-field.scss?

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-xhypjnpx?file=src%2Fmain.ts,src%2Fglobal_styles.css,src%2Fmaterial-module.ts
Steps to reproduce:

  1. Add/Remove: .mat-internal-form-field > label:empty { display: none; }

Expected Behavior

The <label> of mat-radio-button should not be displayed if empty, similar to how it's done with mat-checkbox

Actual Behavior

The label is displayed and therefore the mat-radio-button has a width of 44px (40px + 4px padding of the label)

Environment

  • Angular: 19.2.4
  • CDK/Material: 19.2.7
  • Browser(s): all
  • Operating System (e.g. Windows, macOS, Ubuntu): windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions