Floating Form Field with Tailwind CSS

[giscus[bot]]

Floating Form Field with Tailwind CSS

Learn how to build a floating form field with Tailwind CSS

https://notiz.dev/blog/floating-form-field-with-tailwindcss

[jstevenson81]

to add to what you did, awesome btw, you can add another pseudo class so when you leave the textbox, you can transition back:

input:not(:focus-within) ~ label {
  @apply transform duration-300 scale-100;
}

Thank you! this saved me a TON of time.

[CavalcanteLeo]

amazing

[alexfaus08]

Awesome stuff! This is such a concise way to implement this versus others I have seen.

With the outline version, if you want it so that you can have placeholders that show up on focus, you can add w-full to the label and then add w-fit to the outline css:

.outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-4 z-0 ml-3 px-1 py-0 w-fit;
}