Floating Label
Also called Float label, Animated placeholder
The placeholder label moves up and shrinks above the field when it is focused or filled.
Use for
Forms, login inputs
Variants
- focus float
- not(:placeholder-shown)
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Floating Label" (also called a float label or animated placeholder) to [where].
When the field is focused or has a value, the label sitting inside it should glide up and shrink onto the top edge of the field, smoothly and quickly, and drop back only when the field is empty and unfocused.
Keep it a real label tied to the input, and make sure the field height does not change so the form never shifts.