Float labels are problematic

Float labels are labels that start off inside the input. When the user starts typing, the label floats to the top of the text box to make room for the answer.

This works a lot better than supplanting labels with placeholders, but it still causes several problems which make it difficult for users to fill out a form.

Here I'll explain what the issues are and what we can do instead.

1. There's no space for a hint

Float labels start off inside the input which leaves no space for hint text.

2. Small text is hard to read

Float labels have small text so that when they float, they takes up as little space as possible. But small text is difficult to read.

3. They don't save space

Float labels need space to move in to. If the label has a legible font size, that space would be so big that the pattern wouldn't save little to no vertical space.

Theoritically, you could create space as the label moves into it. However, this would make the page jump awkwardly.

4. Animation causes issues

Animation can be disorientating and cause sickness. And when zoomed in, the label can disappear off screen as Geri Reid attests to:

“I saw first hand what a headache [float labels] can be for a person using a zoom tool as the label can disappear off-screen as it floats up. And the testers who work at DAC are expert users [...]”

5. They have low contrast

Float labels have low contrast in order to differentiate itself from the user's answer. But low contrast text is difficult to read.

6. They may go unanswered

The float label starts out as a placeholder which some people mistake for a real value, causing them to not answer the question.

When the user submits the form, they'll get an unexepcted error to deal with slowing them down and causing frustration.

7. They're inconsistently located

While a text input can accomodate a float label, other inputs like checkboxes and select boxes can't. This results in inconsistent label position and behaviour.

8. Long labels get cut off

Long labels get cropped by the bounds of the input which means users won't be able to understand the question.

Summary

Float labels attempt to save space and give users a minimalistic look.

But they don't really save space, and they create several usability problems in the form of small, low contrast, moving labels that can be cropped and cause inconsistency.

Ultimately, this pattern makes it difficult to fill in forms.

Instead, put labels above the input where they can be consistently located, styled to be legible and accomodating of longer content, leaving the input for input.

More on good form design.