:cloud: A pragmatic implementation of the Float Label Pattern for the web
A pragmatic implementation of the Float Label Pattern for the web.
Try it for yourself: https://richardvenneman.github.io/floatl/
🤙 Supports textfields and textareas
🏝 Dependency-free and maintained
⚡️ Small size, < 1Kb gzipped
yarn add floatl # or npm i -S floatl
An UMD build is available from the GitHub releases page if you're not using a module bundler. This version adds
Floatlto the global namespace.
Add the required styling to your app. Please refer to the GitHub wiki page on styling for more information.
NOTE: Check the GitHub wiki page for instructions on how to use with React, AngularJS and Stimulus.
textarea) with the floatl classes and wrap them in an element with the
Instantiate Floatl by passing in the wrapping DOM element:
import Floatl from "floatl";
var element = document.getElementById("my-floatl-element"); new Floatl(element);
If you keep a reference to your Floatl instance, it's easy to remove all of the event handlers by calling the
var myFloatl = new Floatl(element); myFloatl.destroy()
There are several libraries available that implement the Float Label Pattern, most notably floatlabels.js and FloatLabel.js. However, these libraries did not quite fulfill the requisites I had in mind (see features above) and I did not find any Bower compatible libraries when I started this project. Furthermore I like to use a well-maintained library. Since we're using this library in production at CitySpotters I'm keeping this library up to date.
Everyone is encouraged to help improve this project. Here are a few ways you can help:
yarn run tddfor Test Driven Development)
This library is released under the MIT License.