Float labels are problematic

Float labels are labels that start off inside the input. When the user starts typing, the label ‘floats’ up to make space for the answer.

Float labels were designed to address the problem with using placeholder labels – that the label disappears as soon as the user starts typing.

And while they’re certainly better than placeholder labels, they create several usability issues.

Here, I’ll run through them all and I’ll explain what to do instead.

# 1. They’re small and hard to read

Float labels have small text in order to make it fit inside the input. 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 also makes them hard to read.

# 3. They may be mistaken for an actual answer

Like placeholder labels, float labels may cause users to think the field has already been completed.

This often leads to users seeing validation errors when the user later goes to submit the form.

# 4. A long float label will be cut off by the input

Long float label text will get cut off by the input which makes the question difficult to understand.

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

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

The float label function only really applies to a text input. They cannot really be applied to checkboxes, radio buttons and select boxes. This can make the label harder to scan across different types of fields.

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

With float labels there’s no space inside the input for hint text.

Hint text could be placed underneath the text box but this means that:

• it can be obscured off by the browser’s autocomplete dialog or on-screen keyboard
• it’s further disconnected from the label that it’s meant to be elaborating on

# 8. Any error message has to go under the input which isn’t ideal

Any error message has to go under the input as there’s no other place for it to go.

But like the hint text issue above, putting the error under the input means the autocomplete dialog or on-screen keyboard can obscure them from users.

# 9. They don’t actually save space

Float labels need a place to move to.

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

Maybe you could make space as the label animates into position, but that would make the page jump awkwardly as the user starts typing.

# What to do instead

Instead of float labels, it’s much better to use a static label positioned above the input which means that:

• the label can be as long as it needs to be
• any hint text and error message can be positioned above the input where it is easy to see without it being obscured in anyway
• it’s easy for users to work out where the answer goes

# Summary

While float labels are ceraintly better than placeholder labels, they cause several usability and accessibility issues that can prevent users from what they’re trying to do.

And while saving space can be valuable, in this case saving space and getting that minimal aesthetic sacrifices far too much. And in reality, float labels don’t really save space.

To avoid the issues, just use a static label above the input.

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