Over a million developers have joined DZone.

UI Pattern: Float Label

DZone's Guide to

UI Pattern: Float Label

· Mobile Zone ·
Free Resource

This is a nice bit of clever for more elegant layout of your form entry screens; have the placeholder text animate into a label!

How the Float Label Pattern Started

I first had the idea for a new input pattern back in August. The idea was simple enough – animate placeholder text to show an icon beside the input so you don’t lose your context. I’ve 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…

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

Screen Shot 2013-10-31 at 7.08.44 AM.png

… A few days later a long time Twitter friend, Jared Verdi, busted out the first real implemenation 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.

And people who struggle with the design space on small screens — oh, wait, that’s everybody — are finding the concept of great interest; check the ‘Resources’ section at the bottom of that post and you’ll find links to proof of concepts in a variety of environments. Specifically to try it out in iOS at the moment, you have:

jverdi / JVFloatLabeledTextField — the original UITextField POC described above

iwasrobbed / RPFloatingPlaceholders — UITextField and UITextView versions

h/t: ManiacDev!


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}