Float Label Pattern

In 2013 Matt D Smith shared an innovative form interaction pattern popularly known as “Float Label Pattern”; it floats the placeholder up above the input and make it as label after the user focuses on the form field or enters a value.

“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.” — Matt D Smith

[GIF] Float Label Form Interaction

Read more…