Float labels are problematic

Float labels are labels that start off inside the input like placeholder text. But when the user starts typing, it floats upwards to make room for the answer.

They’re often used for their space-saving and minimal aesthetic but float labels are problematic and don‘t really save space anyway.

Here I’ll explain why that is what we can do instead.

# 1. They’re small and hard to read

Float labels have a small text which is hard to read

Float labels have small text in order to take up as little room as possible. But that makes them hard to read.

# 2. They have poor contrast

Float labels have poor contrast

Float labels have poor contrast in order to distinguish itself from an actual answer. But this makes them hard to read.

# 3. They may be mistaken for an actual answer

Like placeholder text, a float label could be mistaken for already being filled out.

When the user submits the form they‘ll get an unexpected error which causes friction and frustration.

# 4. They may get cropped by the text box

Long float labels get cropped

Long labels may get cropped by the text box which means the question may not be clear.

# 5. Animation can cause problems for some people

Float labels animate into position which can be disorientating and problematic for users who are motion sensitive.

And when zoomed in, the label may disappear off screen as Geri Reid explains:

“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 […]”

# 6. They’re inconsistently located

Float label location is inconsistent across different form controls

Text inputs can fit a float label inside, but other controls like checkboxes and select boxes cannot.

This results in an inconsistent label position and experience throughout the same form.

# 7. They don’t make room for hint text

There’s no space for a hint when using float labels

Float labels are designed in such a way that means there’s no space for hint text.

You could put hint text underneath the text box but that means the hint text is far away from the label it relates to. And the text may get cut off by browser autocomplete dialogs.

You could put hint text above the input but that would put the hint text before the label which is confusing.

# 8. They force error messages to go below the field which can cause problems

There’s no space for an error above the field

Float labels are designed in such a way that means the error message has to go below the field.

But putting errors below the field means the auto-complete dialog or on-screen keyboard can obscure them.

You could put the error above the field, but it would look strange as the error comes before the label and answer.

# 9. They don’t actually save space

Float labels need space to move in to. If they were given a large enough font size to be read, then they wouldn’t really save much space at all.

You could make space as the label moves into position, but that would make the page jump awkwardly.

# What to do instead

Put a static label above the input and leave space for the answer. Boringly simple with none of the above problems.

# Summary

Float labels promise to save space, but in reality, space should not be saved at the cost of usability – and in any case, float labels don’t actually save space.

Instead, put labels above the input where they can be seen, understood, accessed and located easily.

More on good form design.