formsBeginnerfocus

Flowline Input

A minimal input with a label that floats up and a colored line that draws in on focus.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a 'flowline' input: floating label that animates from inside the input to a small label above on focus or when filled. Underline draws in left-to-right via scaleX on focus. Pure CSS, no JS. Use the placeholder=" " + :placeholder-shown trick.

Code

html

<!--
  Source: Steve Schoger
  https://x.com/steveschoger
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/input-flowline
-->
<form class="f"><label class="field"><input required placeholder=" "/><span>Email address</span></label></form>