MDS

[GIF] Float Label Form Interaction

by MDS in Craigslist

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.

-----------------------
Update 1

@jverdi created an iOS prototype here: https://github.com/jverdi/JVFloatLabeledTextField

-----------------------
Update 2
I wrote a blog post "How the Float Label Pattern Started" http://mds.io/S9Ob

-----------------------
Update 3
Google released their "Material" design guidelines on June 25, 2014, which contains "floating labels." Pretty cool!

97 Responses (page 1 of 4)

oldest newest liked

  1. Richard Gil Richard Gil

    Nice concept man!

    likes

    about 6 years ago

  2. Alex Wright Alex Wright Pro

    I really like this concept @Matt D. Smith I could see this working nicely for desktop as well as tablets / mobile.

    likes

    about 6 years ago

  3. Regy Perlera Regy Perlera Pro

    @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?

    likes

    about 6 years ago

  4. Cliff Seal Cliff Seal

    YES.

    likes

    about 6 years ago

  5. Néstor Palao Néstor Palao

    Nice idea, congratulations!

    likes

    about 6 years ago

  6. MDS MDS Pro

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

    about 6 years ago

  7. Adam Coulombe Adam Coulombe

    really nice idea Matt! Have you checked this on an actual iPhone? The top text becomes just a wee bit small IMO.

    likes

    about 6 years ago

  8. Regy Perlera Regy Perlera Pro

    @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

    likes

    about 6 years ago

  9. Adam Coulombe Adam Coulombe

    @Matt D. Smith Didn't see your comment above re:font size. Youre right, it is legible, I did have to get close though.

    likes

    about 6 years ago

  10. MDS MDS Pro

    @Regy @Adam Yeah, I think that's the trick here - staying subtle and helpful with the field label.

    about 6 years ago

  11. Tim Herbig Tim Herbig

    really like the transition of placeholder text alias form name to above the user generated text as soon as he starts to type!

    likes

    about 6 years ago

  12. Galen Gidman Galen Gidman

    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.

    likes

    about 6 years ago

  13. MDS MDS Pro

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

    about 6 years ago

  14. Colin Devroe Colin Devroe

    @Matt D. Smith I like this. Approved.

    likes

    about 6 years ago

  15. MDS MDS Pro

    @Colin You are a gentleman and a scholar.

    about 6 years ago

  16. Robbert Esser Robbert Esser

    This is so clean. I love it.

    likes

    about 6 years ago

  17. Luca Lopez Luca Lopez

    Amazing!!

    likes

    about 6 years ago

  18. Artur Tkhruni Artur Tkhruni Pro

    very nice!

    likes

    about 6 years ago

  19. Deepak Jose Deepak Jose

    Absolutely awesome! Love it.

    likes

    about 6 years ago

  20. Oscar Waczynski Oscar Waczynski

    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.

    likes

    about 6 years ago

  21. Elvis Nuñez Elvis Nuñez

    JESUS CHRIST!

    likes

    about 6 years ago

  22. Marco Suarez Marco Suarez

    I'm diggin it.

    likes

    about 6 years ago

  23. Kyle Ledbetter Kyle Ledbetter

    Nice accessibility bro

    likes

    about 6 years ago

  24. Jeff Broderick Jeff Broderick Pro

    This is amazing! I'm going to learn from this for sure!

    likes

    about 6 years ago

  25. Jared Verdi Jared Verdi

    Big fan of this concept Matt, great work. I thought it warranted a quick iOS demo and open-sourced my work for those who are interested in contributing/furthering this idea: https://github.com/jverdi/JVFloatLabeledTextField

    likes

    about 6 years ago

← Prev
Pinterest icon Pin Copy

Attachments

345,057 views
3,487 likes
1,023 saves
Sep 30, 2013

5 Rebounds

  1. Somewhere / Sometime
  2. [GIF] Keynote animation of Matt Smith’s Label Form Interaction
  3. Floating Labels - Request a Demo
  4. Form label

More from MDS

  1. shift nudge landing
  2. Flowkit for Figma
  3. Fibrestream Dashboard
  4. Figma Animation

keyboard shortcuts: L or F like