Float Label
No library Intermediate
The label lives inside the field at rest and floats above the text on focus or when a value is present. Pure CSS transitions, no dependencies.
LLM Prompt
Goal: Create a "Float Label" input animation.
Visual behavior: A text input where the placeholder label sits vertically centered inside the field at rest. On focus (or when the input has a value), the label animates upward to the top of the field, shrinks in font size, and changes color to the accent color. The label never disappears — it reflows to make room for the typed text.
Technique:
- Wrapper div: position relative, acts as the visual field surface
- Label: position absolute, left aligned; transitions top, transform (translateY), font-size, and color simultaneously over ~180ms ease
- At rest: top 50%, translateY(-50%), font-size 15px, muted color
- Lifted: top 8px, no transform, font-size 11px, accent color
- Input: transparent background, no border/outline; padding-top increases when lifted to push text below the label
- Track focus + value.length > 0 to determine lifted state
Accessibility: Use a real <label> with htmlFor — the label is always in the DOM and associated to the input, so screen readers announce it regardless of visual position.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.