Skip to content

Outlined TextField Label start position doesn't meet Material Design Specs #67707

@feinstein

Description

@feinstein

On issue #54028 the height of the label was fixed with a opt-in fix. I can't comment on the original issue, as it's locked, but from what I can see not only the height is shifted, but also where the label starts.

This is a screenshot from the original issue:

image

I added some vertical red lines to show the difference in start positions.

From what I can verify the issue persists. On the left is the https://material.io/components/text-fields, on the right in purple is a Flutter App:

image

As you can see the start position of the label on the Flutter App is too much on the left side.

This is the Material spec on the start position of the label:

image

I think this initial position should be fixed to match the specs, but also I would like to suggest that the user has the option to provide a "start position" value that can push the label to the end if positive and to the start if negative. This is useful when we change the radius of the outline border and the label gets in the middle of a hole:

image

So having a more customizable border will help to avoid this behavior.

In summary:

  • Match the floating label start position to the Material Design specifications.
  • Add more customization to the outline border so we can vary the label's start position and the distance from the label to the outline (the gap size).

I understand this will break many golden image tests, but also did #54028.

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms bettera: text inputEntering text in a text field or keyboard related problemsf: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found in release: 3.6Found to occur in 3.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions