google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.28k stars 5.03k forks source link

Text Fields: changing floating label when it floats above the field #4051

Closed rtarnec closed 8 years ago

rtarnec commented 8 years ago

I don't know if this is in line with the MD specifications, but it would be nice for text fields to be able to change the floating label when it floats above the field. This would allow indicating some hints/constraints for filling in the field that are only shown when the field is empty.

Example: When field is empty, label is "User Name (mandatory)", when it is floating above, label is only "User Name".

On the other hand, what IS in the MD specifications, is the possibility to add a star at the end of the field label, which turns red when floating, see https://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields.

The proposed feature above would allow a similar behavior not only for mandatory fields but also for any extra info that would help the user filling in the field (e.g. specific format).

Thanks for sharing your thoughts on this!

Garbee commented 8 years ago

Changing labels is something you need to handle in JS. No need for us to manage that. It isn't specified that this action should occur.

The asterisk, once again up to you with JS. We use native validation APIs to handle error states. It means we do defer from the spec a bit due to the limitations it currently has, but provides the most robust experience for web developers.

As a guiding part of the library to keep things as lite was we can, these features are minor details developers can implement on their own.