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.
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.
I 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
- Upload CSS and JS files.
- Add <link rel=”stylesheet” href=”css/jvfloat.css”> to your <head> section.
- Add <script src=”js/jvfloat.min.js”></script> right before the closing </body> tag. Be sure you’ve loaded jQuery (or Zepto) first.
- Initialize JVFloat somewhere in your javascript (or on page directly in script tags) $(‘.float’).jvFloat();
- 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.
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
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?
1. Not sure I understand what you mean. Sorry. 🙁
2. Not a problem with either method.
3. No. Any format.
FloatLabel.js fails miserably with JS disabled.
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.
Maybe, but if you consider this and apply the correct CSS I think this is a much better approach than placeholder or swapping values.
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?