Floating Labels
The label is the placeholder — it travels to the top edge on focus or fill, pure CSS.
Inputs
Text & Email
One empty (label rests inside), one pre-filled (label floated).
Inputs
With Leading Icons
The icon offsets the label's rest position.
Other controls
Select & Textarea
Selects float permanently; textarea pins the label to the top.
States
Valid & Invalid
Floating labels carry the same status colors.
In context
Compact Sign-in
Floating labels keep dense forms tidy. Submit is simulated.
Signed in