Tag Label
No library Intermediate
On focus the label slides upward and a colored pill badge background expands behind it via scaleX. The label transforms from a plain hint into a bold field identifier tag.
Username
On focus the label slides upward and a colored pill badge background expands behind it via scaleX. The label transforms from a plain hint into a bold field identifier tag.
Goal: Create a "Tag Label" input animation.
Visual behavior: A labeled input field. At rest, the label above the input is plain and muted (normal font size, low opacity). On focus or when the field has a value, the label transforms: it shrinks, goes bold, switches to uppercase, gets an accent color, and a colored pill/badge background expands behind it via scaleX from 0 to 1 (transform-origin: left). The input border also shifts to the accent color. All reverses on blur with empty value.
Technique:
- A label div above the input with overflow:hidden relative to a positioned parent
- A pill span inside the label with scaleX CSS transition (transform-origin: left center)
- Label text in a relative span that stays above the pill
- All transitions: ~200ms cubic-bezier(0.22,1,0.36,1)
- isActive = focused || value.length > 0
Accessibility: Under prefers-reduced-motion, label styling changes instantly without the scaleX animation.
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.