Float

in Cool

Create Floating Form Labels with FloatLabel.js or JVFloat.js

Floating labels are cool. People tend to have pretty strong opinions about floating labels, but overall, I like the idea, and have liked most implementations I’ve seen. The first one I saw was on CodePen. There’s a good article @mds on how the design pattern got started. There’s a lot of other cool thoughts on floating labels, specifically how they enhance (or undermine) the end user’s experience.

Where It Started

The Floating Labels pattern was based on a concept by Matt D. Smith. You can read more about the history of the floating label pattern at this blog post.
Original from Matt D. Smith
A search for “floating labels” on CodePen return about 200 results. You could probably take code from any of those pens and use it to implement a possibly slimmer floating label pattern for yourself. But, how can you choose which is the best way to do floating labels?

I Like Plugins

Personally, I like to roll with jQuery plugins for this sort of thing. The smaller the plugin, the better.
jvfloat
I’ve used JVFloat and really like it. Super easy to implement and the styling is extremely minimal by default, which is a good thing. The default looks decent with pretty much any UI but can easily be modified via CSS.

FloatLabel.js is similar to JVFloat. The CSS that comes with FloatLabel.js is also extremely minimal and can be easily customized to fit your UI. I am going to be using FLoatLabel.js in future projects, like kegplan.io.

Responsive Ready?

FloatLabel.js appears to have better responsive support. In JVFloat, the floated labels and their respective input fields are really scrunched together, in the default CSS at least.
FloatLabel.jsI haven’t witnessed this problem with FloatLabel.js. Check out the FloatLabel.js demo to see how it responds when you resize your browser window. Now have a look at the JVFloat demo, and again, resize your browser window to see how it responds. JVFloat.js doesn’t look as good as FloatLabel.js, it’s that simple.

So, if you’re looking for a good floating labels plugin I’d suggest FloatLabel.js, as it’s more responsive-friendly than JVFloat. Both are great jQuery plugins, though. And one bonus is that JVFloat is also a Zepto plugin.

Installation, finally!

Both are extremely easy to implement on your site. Just include the js and css like you usually would. But here’s more detail.

JVFloat.js

  1. Upload CSS and JS files.
  2. Add <link rel="stylesheet" href="css/jvfloat.css"> to your <head> section.
  3. Add <script src="js/jvfloat.min.js"></script> right before the closing </body> tag. Be sure you’ve loaded jQuery (or Zepto) first.
  4. Initialize JVFloat somewhere in your javascript (or on page directly in script tags) $('.float').jvFloat();
  5. Add class="float" to text input fields you wish to have floating labels.

FloatLabel.js

FloatingLabels.js is probably quite similar. Since I’ve never used it, I won’t give you step-by-step directions since I have no experience with it (yet). Instead, refer to the README file at the FLoatLabel.js GitHub repo. It has installation instructions, I just haven’t tested them quite yet.

I really suggest you read this post from Brad Frost before voting. He gives some very good, specific examples of pros and cons of floating labels.

In general, do you think floating labels are a good idea?

View Results

Loading ... Loading ...

Comments are open below or you can discuss on Hacker News.

Update December 30, 2013: Also, check out Label Better, by Pete R. It looks really nice and easy to setup and integrate. You can find a demo over here.

Where to now?

Work with Me

Think you'd need help getting somethink like this setup on your own? Or maybe you've got an idea for a product but don't know how to turn it into 'something'. I can help on both fronts! Just get in touch and we can chat about your needs.

Leave some Feedback

Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and almost always reply to every comment.

Enter your email address to subscribe and receive notifications of new posts by email.

  • Elumalai J.

    Good IDEA. Looks so simple.

    I am also tried this float form style, but i struck with selectbox (combo box) behavior.
    1. Meaning how to show default text / default text with mandatory fields
    2. What about for long forms like expense / recurring expense creations
    3. Is it only for vertical format?

    • http://www.longren.org/ Tyler Longren

      1. Not sure I understand what you mean. Sorry. :(

      2. Not a problem with either method.

      3. No. Any format.

  • Pingback: Create Floating Form Labels with FloatLabel.js or JVFloat.js | Enjoying The Moment

  • http://ashleyconnor.co.uk/ Ashley Connor

    FloatLabel.js fails miserably with JS disabled.

    • http://www.longren.org/ Tyler Longren

      I’ve seen some CSS only implementations which looked promising. I’ll see if I can dig em up on CodePen and link to them here.

      Also, visitors with JS off will be missing a LOT more than just the floating labels.

    • aflorescu

      Maybe, but if you consider this and apply the correct CSS I think this is a much better approach than placeholder or swapping values.

  • Pingback: Tweet Parade (no. 51 Dec 2013) - Best Articles of Last Week | gonzoblog

  • http://franklaemmer.de/ Frank Lämmer

    the idea is neat! i see that the use cases are limited, suitable for a form with two text inputs and a textarea. but what if there are also some radios and a select box?