Underline input
A minimal field with just a bottom line; on focus a gradient line grows out from the center.
Settings
Code
<label class="uv-il"><input placeholder="Your name"><i></i></label>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
Where to use it
An underline input keeps the page clean, which is why designers like it for short, elegant forms: the “Your name” field of a wedding RSVP, the contact form of a photographer's portfolio or the email box in a restaurant newsletter. There is no box, just a hairline. When you click, a colored line spreads out from the middle.
Some people don't recognise a single line as a field, so keep these forms short and obvious. The placeholder disappears as soon as someone types; with more than two fields, add a visible label above each one.