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

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!