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.
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.
Both are extremely easy to implement on your site. Just include the js and css like you usually would. But here’s more detail.
- 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.
- 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.
Comments are open below or you can discuss on Hacker News.
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.