Posted 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.
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.


  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.


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.

Well, now what?

Work with Me

I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!

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 reply to nearly every comment. Let's talk. :)

Longren.io is proudly hosted by DigitalOcean

About these ads