The Trouble With Floating Labels

The question of where to place a label in a web form has shifted over the years. Once it was about alignment—left versus top. Today, the debate centers on the floating label: a label that starts inside the input field and moves up out of the way once the user begins typing. Proponents often point to Google’s Material Design as validation for this pattern. However, a closer look at user behavior and the rationale behind Material Design suggests that floating labels are not the usability win they’re made out to be.

What Floating Labels Fail To Fix

Floating labels were created to solve the issues introduced by placeholder labels—text placed inside the input that disappears on focus. From years of testing forms for organizations like Boots, Just Eat, and Gov.uk, it’s clear that placeholder labels create distinct problems:

  • They vanish as soon as the user types, making it harder to recall what the field requires, especially for users with cognitive impairments.
  • They can be mistaken for an actual answer, causing users to skip the field entirely.
  • They are typically greyed out to signal they aren’t real input, which lowers contrast and readability.

Floating labels address the disappearance issue only partially. They still suffer from poor contrast and the risk of being confused with an actual answer. Furthermore, the floating pattern introduces its own set of drawbacks. To fit inside the box, the label must be tiny and therefore hard to read. It also cannot accommodate long labels, as they become cropped by the input’s boundary.

Conventional Text Fields Are The Better Baseline

The problems above disappear with the conventional text field design: a label placed outside the input and a distinct border around the entire field. This setup makes it obvious where the answer should go, it makes the label fully legible and available at all times, and it has no restriction on label length. If hint text is needed, it fits easily beneath the field.

Observing hundreds of users interacting with forms has shown that conventional text fields never cause the kind of confusion that placeholder and floating labels do. They do occupy more vertical space, but trading a little height for clarity, ease of use, and accessibility is a tradeoff well worth making.

What Google’s Research Actually Shows

Google’s own documentation on the evolution of Material Design’s text fields details a usability study, but that study compared only two variants, both of which used floating labels. The test never included conventional text fields, meaning they haven’t measured whether their floating design is better than the standard one. In responses to comments on the article, Google suggested that usability wasn’t the sole or even primary objective.

Designer Michael Gilbert, who worked on Material’s text fields, commented on the balance sought between aesthetics and usability. In one reply, he noted that the team leaned toward minimalism, emphasizing color and animation to highlight usability. In another, he stated that the goal of the research was not simply to prove one version better, but to identify design characteristics that delivered the most usable and most beautiful experience.

The net result is that Material Design’s floating label was born from an aesthetic preference masquerading as a usability solution. This is a false tradeoff: aesthetics and usability need not be competitors. A clean visual treatment doesn’t have to force users to decode how a form field works. The two goals can coexist, and conventional text fields demonstrate that intersection.

Making The Right Call For Forms

Floating labels are an improvement over placeholder labels, but they are still a compromise. Conventional text fields outperform both because they look like form fields and always have a readable, in-context label. Moving the label inside the input doesn’t beautify the form; it only makes it measurably harder for people to use. For most forms, the answer is straightforward: keep the label on top, keep the border around the input, and don’t make users think about where to type.