React-toolbox: Input hint behaving as a placeholder

Created on 2 Feb 2017  路  3Comments  路  Source: react-toolbox/react-toolbox

I want to say that I disagree with the current implementation of input hints (which seems like was first introduced in #371 and #292).

According to the specs, this is what hints should look like:

Spec, subtitle "Hint text"

Instead, they are acting like placeholders:

image taken from the Input playground

Hints should be always visible to help guide the user on what it should do with that field.

I'm using v1.3.4, so if this was not fixed yet, I highly suggest this change to be made before releasing v2.0.0 final, as it implies in breaking stuff.
The current work-around is to pass a node to the error prop overriding the text color (so it's not red).


Meanwhile, you can also provide a placeholder prop to the Input component (it will be carried over to the underlying input element).
It almost works, except:

  • it is overlapped by the label when no value is present
  • it doesn't have that cool disappearing like the hint prop has

Enhancement Material Spec

Most helpful comment

Yes, it has to be changed. I will do it with the refactor

All 3 comments

Ah, small correction regarding the following:

The current work-around is to pass a node to the error prop overriding the text color (so it's not red).

While this works for the hint, the label will still appear red because the errored class is applied to it.

Just to piggy back off of this, the password section of Text fields has better example.

image

Yes, it has to be changed. I will do it with the refactor

Was this page helpful?
0 / 5 - 0 ratings