Floating Labels
Input labels sit inside the field and shrink upward on focus or when filled — saving space while keeping context visible.
Also called: material input, animated label, inline label
How it works
The label is absolutely positioned inside the input. :focus and :not(:placeholder-shown) move it up and shrink the font size.
- Use a space character as placeholder to enable
:placeholder-shown - Add extra top padding on the input for the floated label