29 / INPUT
Floating Label
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
Task: Focus the field and type.
NAIVE
THOUGHTFUL
resting
resting
patternfloat on focus/value
How it works
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.