🥷 Classless CSS-only Float Label. Finally.

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

Demo

• Pico + Float Label CSS v2 via Blades

• Tailwind v4 + Float Label CSS v2
• Float Label CSS v2 only (without any CSS framework)

---

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:

Just Float Label CSS:

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

Or with all CSS Blades included:

<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-beta/assets/blades.min.css" rel="stylesheet" />

Via npm:

npm install @anydigital/blades

Then import just Float Label CSS:

@import "@anydigital/float-label";

Or with all CSS Blades included:

@import "@anydigital/blades";

---

Usage

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

<label>
  <span>Email</span>
  <input type="email" placeholder="email@example.com" />
</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@example.com" />
</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?