floatl

by richardvenneman

richardvenneman / floatl

:cloud: A pragmatic implementation of the Float Label Pattern for the web

204 Stars 19 Forks Last release: over 2 years ago (2.0.1) 342 Commits 16 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

☁️ Floatl

A pragmatic implementation of the Float Label Pattern for the web.

NPM Build Status Maintainability Test Coverage

Floatl

Try it for yourself: https://richardvenneman.github.io/floatl/

Features

πŸ€™ Supports textfields and textareas

🏝 Dependency-free and maintained

⚑️ Small size, < 1Kb gzipped

🀣 Oldie browser support Sauce Test Status

* Supports IE8 & IE9 as well, but I couldn't get them to run on SauceLabs 😰

Installation

Floatl is built primarily for module bundlers such as Browserify and webpack. As such it is distributed via NPM.

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.

Styling

Add the required styling to your app. Please refer to the GitHub wiki page on styling for more information.

Usage

NOTE: Check the GitHub wiki page for instructions on how to use with React, AngularJS and Stimulus.

Markup your

label
and
input
(or
textarea
) with the floatl classes and wrap them in an element with the
floatl
class:

Instantiate Floatl by passing in the wrapping DOM element:

import Floatl from "floatl";

var element = document.getElementById("my-floatl-element"); new Floatl(element);

Destroying instances

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()

Placeholder polyfilling

While the JavaScript supports IE8+, Floatl aims to be good at Floating Labels and only that. The Floating Labels Pattern works best with placeholders and it is therefor recommended to install legacy browser placeholder support should you need it, for example Placekeeper or Placeholders.js.

Motivations

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.

Contributing

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

This project uses Jasmine with the Karma Test Runner.

  • Install dependencies with
    yarn install
  • Run the test suite with:
    yarn test
    (or
    yarn run tdd
    for Test Driven Development)

License

This library is released under the MIT License.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.