🎟️ Flash Sale - 50% OFF ALL TICKETS - Dribbble Workshop with Adobe Partner Brandon Groce on 4/21 - build your dream career & win new clients. Don't miss out 🎟️
Trending designs to inspire you
Work designers are riffing on
Interviews, tutorials, and more
Prompt to flex your design skills
Find your dream design job
An exclusive list for contract work
Find, contact, and hire designers
The #1 job board for creatives
Board for freelance & contract work
Read the origin story here.
I've been experimenting a lot lately with mobile forms. Left aligned, top aligned, placeholder text only, etc. for client projects and personal projects.
Placeholder text works great for a simple username and password form, but not so much when there is more information. It's easy to forget which field is which once you've typed into all of the inputs.
If you opt for left aligned fields always exposed you end up with much less space. And space on mobile is precious. If top aligned fields are always exposed, it makes the vertical height grow very quickly.
This idea combines the best of both worlds with placeholder text and top aligned text. Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won't forget what an individual field represents.
Tweet examples to @floatlabel.
@jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField
I wrote a blog post "How the Float Label Pattern Started" http://mds.io/S9Ob
Google released their "Material" design guidelines on June 25, 2014, which contains "floating labels." Pretty cool!