Floatlabels

Sick of boring old labels that take up space and clog up your beautiful websites?

Floatlabels uses floated labels to make your forms look cleaner and smarter. Once a user begins typing, your placeholders automagically turn into labels so the user still has context.

Installation

Add floatlabels to your application's Gemfile:

gem 'jquery-rails' # requires jQuery
gem 'floatlabels'

Require floatlabels inside your application.js file, after jQuery.

//= require jquery
//= require floatlabels

And then execute:

$ bundle

Usage

Add the class to the inputs you want to float the labels on

<%= f.text_field :example, placeholder: 'Example Label', class: 'floatlabel' %>

Initialise floatlabels

$('.floatlabel').floatlabel();

and hey presto, you've got floated labels!

Options

You can override any of the following default options on initialisation:

$('.floatlabel').floatlabel({
  type               : 'inside',   // ('inside' or 'outside')
  slideInput         : true,
  labelHiddenTop     : '5px',
  labelShownTop      : '0px',
  paddingOffset      : '10px',
  transitionDuration : 0.1,
  transitionEasing   : 'ease-in-out',
  labelClass         : '',
  typeMatches        : /text|password|email|number|search|url|tel/,
  focusColor         : '#2996cc',
  blurColor          : '#9D9D9D',
  fontWeight         : 'bold',
  fontSize           : '9px'
});

You can also use data-label="Example Label" to set the label text.

<%= f.text_field :pirate_name, data: {label: 'Pirate Name'}, class: 'floatlabel form-control' %>

Types

I added a quick option to switch between labels inside your text input, and labels above the input.

Using type: 'outside' automatically sets the following:

slideInput    : false,
labelShownTop : '-20px',
paddingOffset : '0px'

This will overwrite any custom options you have set for these values with the above.

More info

More documentation can be found at http://clubdesign.github.io/floatlabels.js.

Credit

All credit goes to Marcus Poherely. This is simply a gemified version of his code with some slightly different defaults.

• URL: http://clubdesign.github.io/floatlabels.js/
• Author: Marcus Pohorely ( http://www.clubdesign.at )
• Copyright: Copyright 2013 / 2014 http://www.clubdesign.at
• Adapted for bootstrap projects by Michael Levin 2/20/14
• Slightly modified and gemified by Matt Cameron 15-Mar-2016

License

The gem is available as open source under the terms of the MIT License.