🥷 Classless CSS-only Float Label. Finally.

Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.

Demo & docs ↗

Examples:

• Pico + Blades with Float Label CSS v2 included
• Tailwind v4 + Float Label CSS v2
• Float Label CSS v2 only (no CSS frameworks)

Killer features

• No JS — pure CSS
• No hacks with required and :valid
  ↳ HTML5 validation support
• Compatible with <select> and <textarea> fields
• No need to define for="..." attribute on <label>
• NEW in v2: Finally, the text label can be placed BEFORE the input field!
• NEW in v2: Class-less!

Install

Via CDN

<link rel="stylesheet" href="
  https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/float-label.min.css
">

Via npm

npm install @anyblades/blades

Then in your .css:

@import "@anyblades/blades/float-label";

Included with

• https://github.com/anyblades/blades 🥷
• https://github.com/anyblades/pico ✨

Usage

Simply place <input> inside <label> to enable float label:

<label>
  <span>Email</span>
  <input type="email" placeholder="[email protected]" />
</label>

NOTE: W3C allows this!

Alternatively wrap <label> and <input> inside .has-float-label:

<div class="has-float-label">
  <label for="email">Email</label>
  <input id="email" type="email" placeholder="[email protected]" />
</div>

NOTE: for="..." attribute is required on <label> in this case

Credits

• Matt D. Smith for original pattern
• Emil Björklund for :placeholder-shown
• Anton Staroverov for :has(*:placeholder-shown:not(:focus)) label
  • to finally support labels before input fields
  • instead of input:focus + label used previously

Browser support

Any browser with https://caniuse.com/css-placeholder-shown, https://caniuse.com/css-has and https://caniuse.com/css-nesting.

All non-supporting browsers should gracefully fall-back to the default layout.

=> Can be used in ANY browser as is!

Featured by:

• https://github.com/dbohdan/classless-css
• https://github.com/pryley/float-labels.js
• https://github.com/uptonking/note4yaoo/blob/main/toc/toc-lib-css-only.md#css-tools
• https://github.com/bcgov/moh-fpcare package.json

PS: How it works?