Coloured floating label
The label sits inside the field and floats to the top, smaller and colored, when you start typing.
Settings
Code
<label class="uv-if"><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
A floating label input keeps forms compact without losing the label once someone types, which is the problem with plain placeholders. It suits a login screen, the shipping address step of a checkout or the contact form of a dental clinic. Click in and the label glides to the top, shrinks and takes your main color.
It is at its best on mobile, where vertical space is short. Keep labels to a word or two, since they shrink to three quarters of their size. For long questions, a regular label above the field reads better.