Loading…
Live component · try it
Premiuminput · focus · light
Floating Label Input
Text fields whose label sits inside as a placeholder and floats up to the top edge when you focus or type, shrinking as it goes; the border thickens in the accent on focus, an inline check appears when the value is valid and a shake plus a message when it is not. Works without script for the float itself.
The mechanic
Label: `translateY(0) scale(1)` → `translateY(−22px) scale(0.8)` over 0.2 s `cubic-bezier(.2,.8,.2,1)` when the input is focused or not `:placeholder-shown`; the label sits on a `bg` background so it cuts the border. Field border 1 px fg@20% → 2 px accent via `box-shadow` (no layout change). Invalid on blur: `.bad` runs a 0.4 s shake (±4 px) and shows the message; valid: a check path draws in 0.3 s.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
