11 min read

·

10 hours ago

Floating labels offer no significant value to the user, inject needless confusion, and are ultimately pointless.

The floating label pattern was a clever way to address the lack of visual space available for mobile devices, but it bled over into desktop web pages, where it never needed to be.

In a previous article, I explained why developers should stop using placeholders altogether. Some have argued in the comments of that article (as well as others) that the floating label addresses those concerns — namely, the issue of placeholders disappearing when the user is typing in the control.

Unfortunately, it still doesn’t address several of the other problems, and it introduces a few, as well.

Let’s go over what the floating label pattern is, how it came about, and why it needs to ride off into the sunset, never to return.

What is the floating label pattern?

The floating label pattern is generally a text box that styles its label similar to a placeholder. Upon focus (or the user starts typing — depending on the implementation), the label:

• Moves above where the user’s entry goes
• Shrinks to a smaller font size
• (Often) Changes color, casing, and/or style
• Remains in that state as long as there is a value in it or it has focus

Here is a gif from Matt D. Smith’s blog post How the Float Label Pattern Started:

This is typically done with JavaScript, but there are a few CSS-only versions out there (Example: Float Labels with CSS by Chris Coyier). There are also variations of this, such as the text moving to the bottom or to the left. Implementations (like Bootstrap’s) keep the label inside the borders of the text box, even when focused:

This is called the floating infield label. Though, for the purposes of this article, that’s a distinction without much of a difference.