Skip to content

bug(form-field): label position doesn't take outline-width into consideration #31474

Open
@Julien-Marcou

Description

@Julien-Marcou

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

When using form-field with the outline appearance, the vertical position of the label isn't taking into consideration the outline width.
which means that the thicker the outline is, the more the label is offset from the center.

Image

When using 2px outline, this is not really visible, unless you dynamically change the outline width from 1px to 2px when hovering the form-field, which is really annoying to experience 😅

Image

Reproduction

https://stackblitz.com/edit/tk7fhpq7?file=src%2Fexample%2Fform-field.scss

Expected Behavior

The label should remain vertically centered like the input value/placeholder is.

Actual Behavior

The label isn't vertically centered like the input value/placeholder is.

Environment

  • Angular: 20.0.4
  • CDK/Material: 20.0.4
  • Browser(s): Chrome 137
  • Operating System: macOS

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