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 and what we can do instead.

# 1. They’re small and 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 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, float labels can 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 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 sensitive to motion.

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

While float labels can fit within a text box, they don’t work for other controls like checkboxes and select boxes.

As the labels are positioned inconsistently, users can’t scan as easily.

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

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 become obscured 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

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.

Therefore, if they were given a legible font size, then they wouldn’t really save much space.

You could make space as the label moves into position, but that would make the page transition awkwardly as the user starts typing.

# What to do instead

Put a static label above the input and leave space for the answer. Boringly simple with no issues.

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

You can find lots more form design tips in my book.