The Float Label Pattern was originally conceived by Matt D. Smith, where he needed to solve the issue of input field labels and space issues on mobile forms.  Matt shared a Dribble of his innovative solution, the Float Label Interaction, which combines the idea of using both placeholder text and a label to identify form fields.

The challenge with form field labels on mobile devices is that they take up a lot of space.  If you left align a label, the input field would have limited horizontal length, and a top aligned label would increase the vertical length of the page. Using placeholders (or inline labels) does not completely solve the problem either, once they the placeholder disappears the user will lose the defining context around the input field.  In Mobile Form Usability: Never Use Inline Labels, Jamie Appleseed has a detailed study of the usability problems with inline labels.

The Float Label Interaction proposed by Matt, is a compromise between field label visibility and maximizing the space available.  Floating the label element over an empty input field defines the input expected, upon user input the label is shrunk and placed above the input.  This pattern allows the user never to lose context around the input field, while allowing the form to maximize the space of the viewable screen area.

Brad Frost brought more attention to this concept in his post which explores some of the pros, cons and points for improving the Float Label Pattern.  He highlights the potential for issues with web accessibility standards, where developers and designers should be aware of the pitfalls of sloppy implementations of this pattern.  Developers should continue to maintain the best practices in creating web forms, having label elements for inputs, associating for attributes, and a tabindex.  Designers should consider a good contrast color ratio, spacing between label and input, and the smaller text size of the floated label.  Google has included the floating labels pattern in their Material Design guidelines, they include their definitions of contrast colors, states, spacing and text size.  This implementation shows an acceptance of the pattern, as well sets a standard for usage.

Material Design - Text Field States

Material Design – Text Field States

Material Design - Text Field Spacing

Material Design – Text Field Spacing

The Float Label pattern is an elegant solution to maximizing the space of form fields on mobile devices.  For trivial input such as name, city or description, the float label pattern is a perfect fit.  An area that has to be addressed is when an input field asks for a specific format, such as date, phone number or postal code.  Where placeholder text would generally be used to offer a hint or suggested input format, is now re-purposed as the label for the field.  With the efficient field layout, there is no space allocated for displaying validation errors.  There may be some issues to be resolved, as developers and designers solve them, we will see a wider adoption rates of the pattern.

Resources

Tuts+ Web Design – Implementing the Float Label Form Pattern

Marcus Pohorely’s jQuery Plugin – floatlabels.js

Chris Coyier’s CSS only solution – CSS-Tricks

Jonathan Snook – Floated Label Pattern with CSS only

Angular Material Design – Input