48 Floating Label. 48 of 95.
48/INPUT/48 of 95
Floating Label
The label can stay without stealing the space.
The problem
Placeholder-only fields lose their label as soon as you type, leaving you unsure what the field was for.
The solution
The label floats above the field on focus or value and stays put.
Experiment
How it works
- At rest, the label sits in the field as the placeholder so it does not take a second line.
- Focus, or a value already in the field, is the cue to move the label out of the way.
- The label animates upward rather than disappearing.
- Its type shrinks so it reads as a caption above the value.
- It stays visible for as long as the field is focused or filled, so the field never becomes unlabeled.
Seen in
Sign-up forms
Fields keep their label after you begin typing.
Material inputs
The floating label pattern from Material Design.
Checkout
Dense forms stay legible without separate label rows.
Settings
Compact fields retain context while filled.