Add a disclaimer that Floating Label only works without validation rules.

[renatodeleao]

If you change input type to anything but text, and of course you should for email, url, tel (...) for accessibility (and to prompt the proper keyboard) the browser will have default validations checks for those types which means that the use of :invalid pseudo-selector won't work when the user actually enters invalid content. By this I mean that If, for example, the user inserts an invalid email and tab or focus the next field, the label will overlap the content.

You also have type="password" example, but that only works because there's not a pattern for the password so a 1 character long password will be considered valid, but of course this is not a real usecase.

If a validation pattern exists, which is mandatory in real sites, even if you use input[type="text"] for every field and user don't match it, the label will overlap the content.

Example fail usecases

CSS4

In the future there will be a proper solution using the :placeholder-shown pseudo selector, but its support is really bad (chrome only) at the time of writing.

CSS4 Example

---

Nice repo btw 👏 I gave a workshop for beginners on this a few months ago.. it was supposed to be turned into a repo of components like yours, you can check it for some magic :target solutions as well! (sry for the bad code organization, it was the result of a live coding workshop).

Cheers!

[stevemao]

@renatodeleao PR welcome

[Julix91]

This demo works without the :invalid selector and instead with the :placeholder-shown like you mentioned - and the author mentioned he would like his project on here, too. -- But I don't know if/how his version handles validation, whereas your example has it built in. Neat :)

And support has gotten better (Firefox, etc.) - except of course IE and edge...

So maybe one or both of you should add your version to the list.