HTML + CSSInputs
Corner floating label
The label sits inside the field and slides up to the top corner as soon as you start typing.
Settings
16px
1x
Code
<label class="uv-in2f"><input placeholder=" "><span>Email</span></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
Floating labels save space in forms where every pixel counts: the email field of a login box, the address step of a checkout on mobile or a short contact form. The label never disappears, it just moves out of the way. A floating label input in HTML and CSS, with a soft focus ring.
Keep labels short, one or two words, because they shrink when they float. For long hints like password rules, add a line of help text under the field instead of stuffing it into the label.