Best viewed at @2x.
View live demo 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.
I wrote a blog post "How the Float Label Pattern Started" http://mds.io/S9Ob
@jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField
7 months ago
Nice concept man!
I really like this concept @Matt D. Smith I could see this working nicely for desktop as well as tablets / mobile.
@Matt D. Smith I've been struggling with the same issue and I really like this solution. The only problem I could see is the font size for the top-aligned label. How legible is it?
Nice idea, congratulations!
@Regy That's been the biggest issue for me, too. Right now it's at 14pt (retina), which translates to 7pt. Really tiny, but still legible for me. It could potentially use a larger size, but this is kind of the starting point, yah know? I just attached the full size comp so you could check it out.
really nice idea Matt! Have you checked this on an actual iPhone? The top text becomes just a wee bit small IMO.
@Matt D. Smith Just took a look at the screen on my phone, I think this actually works. Considering its just for reference, it does a pretty good job of staying subtle, yet helpful. The description text is pretty clear on its own too. I know right away what each field implies without needing to look at the label
@Matt D. Smith Didn't see your comment above re:font size. Youre right, it is legible, I did have to get close though.
@Regy @Adam Yeah, I think that's the trick here - staying subtle and helpful with the field label.
really like the transition of placeholder text alias form name to above the user generated text as soon as he starts to type!
I love this. Honestly, the interaction wouldn't really have to be limited to mobile or native apps — it would be equally helpful on desktop and the web.
@Galen I think it could definitely work for desktop, etc. Might have to think about growing the text field vertically once text is entered to allow for a larger field label.
@Matt D. Smith I like this. Approved.
@Colin You are a gentleman and a scholar.
This is so clean. I love it.
Absolutely awesome! Love it.
Very nice... I think that this would be a great addition to any form, and in the case of actually getting it to work on mobile I think it would be overall pretty easy.
I'm diggin it.
Nice accessibility bro
This is amazing! I'm going to learn from this for sure!
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.