I first had the idea for a new input pattern back in August, 2013. The idea was simple enough - animate placeholder text to show an icon beside the input so you don't lose your context.

I had been doing 99% mobile work for the past 2 years and little things like this can really add up. I wanted a solution that saved space, looked clean and clear, but didn't forego usability.

first new pattern attempt

Even a simple username and password scenario can be frustating with no labels. I can never quite remember if it says "username" or "username or email" in the first field. And that's a big deal when logging in. It's frustrating to not know if something is right or not because there's no label. I still thought the orginal concept had merit, but quickly realized that an icon alone is not enough to be fully accessible.

After scrapping the icon idea I thought:

"There needs to be a way to make this simple enough to use out of the box without needing to come up with, and design an icon set for every use of this form."

That's when I designed a new version using text only, plus a slight animation for the float label. I spent a long time thinking about the micro-interactions of when the active color would change and how soon would the text animate after someone typed. These were tiny decisions made down to the very last keyframe in my 30 FPS file.

float label pattern

In my mind it was a small idea towards making my app that much easier to use.

(Aside: This was designed for a post-only Craigslist app I was tinkering with.)

I had no idea it would be so well received. To my surprise it made it to the #1 spot on Dribbble's popular page for the day. That definitely helped get some early traction.

A few days later a long time Twitter friend, Jared Verdi, busted out the first real implementation in Obj-C. Super cool.

Somehow Jared's github post blew up a bit and everyone seemed to be tweeting about it. Thankfully he named it something cool when he first implemented it because I never did - JVFloatLabeledTextField. The "float label pattern" was born.

Jared deserves oodles of credit for breathing life into the idea, which otherwise may have fizzled out in the corner of the internet like a sad and lonely mediocre cat gif.

Remember that crazy, dancing guy video called First Follower posted by Derek Sivers?


As expected, there are a few naysayers to put some healthy tension on the subject, but ultimately this is worth exploring. Especially on small mobile forms.

Thanks to all who've contributed to the idea so far. 🙏


Float Label Resources

Scroll to the bottom of this page to see the Float Label in action.

Additional Posts

iOS

CSS Only

CSS/JavaScript

Angular

Android

Axure

Did you experiment with the float label? If so, let me know I'll do my best to get it into this post.

You can visit http://floatlabel.com to go straight to my orginal Dribbble shot or follow @floatlabel to see tweets from examples in the wild.