{"_id":"@anyblades/float-label-css","name":"@anyblades/float-label-css","dist-tags":{"latest":"2.3.1"},"versions":{"2.3.1":{"name":"@anyblades/float-label-css","version":"2.3.1","description":"Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser","repository":{"type":"git","url":"git+https://github.com/anyblades/float-label-css.git"},"keywords":["float-label","css-only","classless"],"author":{"name":"Anton Staroverov"},"license":"MIT","homepage":"https://blades.ninja/css/float-label/","scripts":{"build":"cp ./node_modules/@anyblades/blades/css/float-label.* ./dist/"},"devDependencies":{"@anyblades/blades":"^2.3.1"},"gitHead":"13971de929e12a5d04995a1b84eacf9c107f494a","_id":"@anyblades/float-label-css@2.3.1","bugs":{"url":"https://github.com/anyblades/float-label-css/issues"},"_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-kidv18W91LGnptzisb0H4yaECzbg5hR4H7wNm3+p6OfEC4/Bh6TK+30DhKin45i6mRsFKPNjXzTjPjO4W3Q2fg==","shasum":"cd8b337563435fa0ee44757baf26830cefad787e","tarball":"https://registry.npmjs.org/@anyblades/float-label-css/-/float-label-css-2.3.1.tgz","fileCount":48,"unpackedSize":1328727,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCGai6N6JdxjF2xEg6gdj9QTPR+fdwsb4UuHBzP+hqIfgIhAN1IF0GapGysl3UGobOMtxghDiM0C4wLzqiKcN+rGY8K"}]},"_npmUser":{"name":"tonycorp","email":"by@any.digital"},"directories":{},"maintainers":[{"name":"tonycorp","email":"by@any.digital"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/float-label-css_2.3.1_1780532142404_0.6891127313060961"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T00:15:42.228Z","2.3.1":"2026-06-04T00:15:42.593Z","modified":"2026-06-04T00:15:42.882Z"},"maintainers":[{"name":"tonycorp","email":"by@any.digital"}],"description":"Bulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser","homepage":"https://blades.ninja/css/float-label/","keywords":["float-label","css-only","classless"],"repository":{"type":"git","url":"git+https://github.com/anyblades/float-label-css.git"},"author":{"name":"Anton Staroverov"},"bugs":{"url":"https://github.com/anyblades/float-label-css/issues"},"license":"MIT","readme":"# 🥷 Classless CSS-only Float Label. Finally.\n\n<!--section:summary-->\n\nBulletproof classless CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.\n\n![](https://img.shields.io/github/v/release/anyblades/float-label-css?label=&color=darkslategray&style=for-the-badge&include_prereleases)\n[![](https://img.shields.io/badge/Code-gainsboro?logo=github&logoColor=black&style=for-the-badge)](https://github.com/anyblades/float-label-css)\n[![](https://img.shields.io/github/stars/anyblades/float-label-css?label=Star&labelColor=gainsboro&color=silver&style=for-the-badge)](https://github.com/anyblades/float-label-css)\n\n<!--section:gh-only-->\n\n## [Demo & docs ↗](https://blades.ninja/css/float-label/#demo)\n\n[<img src=\"float-label-css-v2.gif\" width=\"600\">](https://blades.ninja/css/float-label/#demo)\n\n<!--section:docs-demo-install-->\n\nExamples:\n\n- [**Pico + *Bl*ades** with Float Label CSS v2 included](https://blades.ninja/css/float-label/#demo)\n- [**Tailwind v4** + Float Label CSS v2](https://codepen.io/tonystar/pen/ALaZrV)\n- [**Float Label CSS v2 only**](https://codepen.io/tonystar/pen/JRLaKw) (no CSS frameworks)\n\n---\n\n## Killer features\n\n- No JS — pure CSS\n- No hacks with `required` and `:valid`  \n  ↳ HTML5 validation support\n- Compatible with `<select>` and `<textarea>` fields\n- No need to define `for=\"...\"` attribute on `<label>`\n- <mark>NEW</mark> in **v2:** Finally, the text label can be placed BEFORE the input field!\n- <mark>NEW</mark> in **v2:** Class-less!\n\n---\n\n## Install <!-- same as https://raw.githubusercontent.com/anyblades/blades/refs/heads/main/README.md -->\n\n###### <mark>Via CDN</mark>\n\n<!--prettier-ignore-->\n```html\n<link rel=\"stylesheet\" href=\"\n  https://cdn.jsdelivr.net/npm/@anyblades/blades@0/assets/float-label.min.css\n\">\n```\n\n###### <mark>Via npm</mark>\n\n```sh\nnpm install @anyblades/blades\n```\n\nThen in your `.css`:\n\n```css\n@import \"@anyblades/blades/float-label\";\n```\n\n<!--section:gh-only-->\n\n###### <mark>Included with</mark>\n\n- https://github.com/anyblades/blades 🥷\n- https://github.com/anyblades/pico ✨\n\n<!--section:docs-->\n\n---\n\n## Usage\n\nSimply place `<input>` inside `<label>` to enable float label:\n\n```html\n<label>\n  <span>Email</span>\n  <input type=\"email\" placeholder=\"email@example.com\" />\n</label>\n```\n\n**NOTE:** W3C [allows this](http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL)!\n\n<div><hr></div>\n\nAlternatively wrap `<label>` and `<input>` inside `.has-float-label`:\n\n```html\n<div class=\"has-float-label\">\n  <label for=\"email\">Email</label>\n  <input id=\"email\" type=\"email\" placeholder=\"email@example.com\" />\n</div>\n```\n\n**NOTE**: `for=\"...\"` attribute is required on `<label>` in this case\n\n---\n\n## Credits\n\n- [Matt D. Smith](https://x.com/mds) for [original pattern](https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction)\n- Emil Björklund for [`:placeholder-shown`](https://thatemil.com/blog/2016/01/23/floating-label-no-js-pure-css/)\n- [Anton Staroverov](https://x.com/AntonStarovero_) for [`:has(*:placeholder-shown:not(:focus)) label`](https://blades.ninja/css/float-label/#how)\n  - to finally support labels before input fields\n  - instead of [`input:focus + label`](https://css-tricks.com/float-labels-css/) used previously\n\n---\n\n## Browser support\n\nAny browser with https://caniuse.com/css-placeholder-shown, https://caniuse.com/css-has and https://caniuse.com/css-nesting.\n\nAll non-supporting browsers should gracefully fall-back to the default layout.\n\n=> Can be used in ANY browser _as is_!\n\n---\n\nFeatured by:\n\n- https://github.com/dbohdan/classless-css\n- https://github.com/pryley/float-labels.js\n- https://github.com/uptonking/note4yaoo/blob/main/toc/toc-lib-css-only.md#css-tools\n- https://github.com/bcgov/moh-fpcare `package.json`\n\n<!--section:gh-only-->\n\n---\n\n## PS: [How it works?](https://blades.ninja/css/float-label/#how)\n","readmeFilename":"README.md","_rev":"1-d2bb9521230ce3eb7b2f9202ce8e6231"}