A library agnostic, pragmatic implementation of the Float Label Pattern.

Online example: https://richardvenneman.github.io/floatl/example

Features

• Library agnostic (compatible with but not depending on jQuery)
• Browser support all the way down to IE8
• Supports textfields and textareas
• Small (less than 2 KB minified)
• Customizable Plain CSS styling
• Compatible with CommonJS

Installation

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

npm install floatl --save

# or

bower install floatl --save

Using the global Floatl (classic browser environment)

If you're not using a module bundler, you can download and include the globally built lib/js/floatl.global.js in your app. This version adds Floatl to the global namespace.

Usage

First make sure the script is loaded. If you use a module bundler, you can simply require the floatl package, otherwise include the script on your webpage.

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

<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 a DOM element:

var element = document.getElementById('my-floatl-element');

// Module approach
var floatl = require('float');
new floatl(element);

// When using the global Floatl
new Floatl(element);

// When using jQuery, you can pass in a jQuery object
new Floatl($('.js-floatl'))

Usage with Ruby on Rails

You can use Floatl in your Rails project with rails-assets:

# application.js.coffee
#= require floatl

// application.scss
//= require floatl/floatl.css

Usage with Ember.js

Install Floatl via Bower in your Ember.js project and add the files to ember-cli-build.js to use the global Floatl function:

app.import('bower_components/floatl/lib/css/floatl.css');
app.import('bower_components/floatl/lib/js/floatl.global.js');

Usage with AngularJS

After including the float.js and floatl.css, you can define and use the directive below:

.directive('ngFloatl', function () {
  return {
    link: function (scope, elem, attrs, ctrl)  {
      var wrapper = elem[0];
      var label = wrapper.querySelector('label');
      var input = wrapper.querySelector('input');

      angular.element(elem).addClass('floatl');
      angular.element(label).addClass('floatl__label');
      angular.element(input).addClass('floatl__input');

      new Floatl(wrapper);
    }
  }
})

<div ng-floatl>
  <label for="first_name">First name</label>
  <input name="first_name" type="text" placeholder="First name" />
</div>

Usage with React

Add Floatl to your project:

1. npm install --save floatl
2. Copy the default styling or add your own

In your component:

import React, { Component } from 'react';
import Floatl from 'floatl';

class MyComponent extends Component {
  componentDidMount () {
    const floatls = ReactDOM.findDOMNode(this).querySelectorAll('.floatl');
    
    for (let i = 0; i < floatls.length; i++) {
      new Floatl(floatls[i]);
    }
  }
  
  render () {
    return (
      <div className='floatl'>
        <label for='first_name' className='floatl__label'>First name</label>
        <input name='first_name' type='text' className='floatl__input' placeholder='First name' />
      </div>
    );
  }
}

export default MyComponent;

CSS styling

All styling (including transitions) is basically done by toggling CSS classes. Because of this it is easy to apply your own styling. Take a look at the default styling to get an idea of where to override attributes. Or check out this Gist with example styling – we currently apply this on our site.

Browser support

The CSS is Autoprefixed with the following string: "> 5%, ie >= 8".

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

Development & testing

First install the dependencies with npm install. This project uses some Gulp tasks to build the CSS and JavaScript files. See the Gulpfile for more information.

This project uses Jasmine with the Karma Test Runner.

• Install dependencies with npm install
• Run the test suite with: npm test (or npm run tdd for Test Driven Development)
• Add tests in test/floatlTest.js and implementation in lib/js/floatl.js

License

This library is released under the MIT License.