A pragmatic implementation of the Float Label Pattern for the web.
Try it for yourself: https://richardvenneman.github.io/floatl/
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
Floatl to 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
<div class="floatl"> <label for="first_name" class="floatl__label">First name</label> <input name="first_name" class="floatl__input" placeholder="First name" type="text" /> </div>
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
destroy instance method:
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:
- Report bugs
- Fix bugs and submit pull requests
- Write, clarify, or fix documentation
- Suggest or add new features
- Write missing tests
- Improve the TypeScript implementation
Development & testing
- Install dependencies with
- Run the test suite with:
yarn run tddfor Test Driven Development)
This library is released under the MIT License.