TextFields (and TextFormFields) should allow displaying error state without error text

@justinmc

Use case

There are occasions where multiple TextField (or more likely TextFormField) are used on a page and the UX could call for a custom error solution instead of each textfield displaying an error message. We want to maintain the validate logic that exists on the Form but allow the developer to decide whether each textfield should show its error text.

Proposal

Adding a new parameter to InputDecoration that tells TextFields they should not display their error text but still display any other error specific content (errorBorder, etc)

This would have to also work with the validate logic of TextFormField as well so that if a form is validated the error text can choose to not be displayed on each text field.

cc @justinmc
Similar to #52634

This is something I do too! Right now this is how I do it:

decoration: InputDecoration(
  counterStyle: const TextStyle(height: 0),
  counterText: ' ',
  errorStyle: const TextStyle(height: 0),
),

And then error for the validator is simply an empty string. So when there is an error all that is shown is the red error line.

yup I'm using this workaround for now as well but it would be nice to have a more formal way to support this.

The workaround from @MichaelPriebe has a problem: it causes an empty space to appear under the textfield (where the error used to be). I would be nice to have a solution without this space.

The workaround from @MichaelPriebe has a problem: it causes an empty space to appear under the textfield (where the error used to be). I would be nice to have a solution without this space.

Try this: TextStyle(height: 0.01), I get it working here with master.

The workaround from @MichaelPriebe has a problem: it causes an empty space to appear under the textfield (where the error used to be). I would be nice to have a solution without this space.

Try this: TextStyle(height: 0.01), I get it working here with master.

Thank you this worked by using 0.001 however this is a very ugly solution.
We need a real solution to lose error text and prevent text field outline getting shorter height.
It is crazy such a simple thing is not still solved.

Thanks! using TextStyle(height: 0.001) worked to hide the error message.

It would be nice to be able to decide how to show the error message from the different options:

not showing this at all
showing it under the textform
showing the error text as tooltip.

Similar problem here on web platform:

The TextFormField on the left is using the "0.01" workaround, and the one on the right is using the TextStyle(height: 0) solution (which I'm pretty sure it worked fine some time ago, as I used it in another project of mine)

In conjunction with this, an errorLabelTextStyle property seems reasonable.

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

Navigation Menu

Repository navigation

TextFields (and TextFormFields) should allow displaying error state without error text #54104

Use case

Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextFields (and TextFormFields) should allow displaying error state without error text #54104

Description

Use case

Proposal

Activity

mikuhl-dev commented on Apr 6, 2020

rami-a commented on Apr 6, 2020

roti commented on Mar 21, 2021

talski commented on Aug 6, 2021

aytunch commented on Dec 17, 2021

Lorenzohidalgo commented on Feb 9, 2022

boganiLuca commented on Feb 2, 2023

jbryanh commented on Aug 27, 2023

flutter-triage-bot commented on Oct 23, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions