Floating Label Input

Preview

Code

<!--
  The trick that makes this work without a line of JavaScript: the input carries
  placeholder=" " - a single space, never empty. :placeholder-shown then means
  exactly "the user has typed nothing", and the label parks itself over the box
  in that state and floats up otherwise.

  This is still a real <label for>, not a placeholder cosplaying as one. It is
  in the accessibility tree the whole time; it only moves.
-->
<div class="float-field">
  <input
    class="float-field__input"
    id="float-field-name"
    name="fullName"
    type="text"
    placeholder=" "
    autocomplete="name"
  />
  <label class="float-field__label" for="float-field-name">Full name</label>
</div>

Props

Variants

Customization

`placeholder=" "` - a single space, never empty - is load-bearing. It makes `:placeholder-shown` mean exactly "the user has typed nothing", which is what drives the float, and it is why the TypeScript variant omits `placeholder` from the inherited attributes: a caller-supplied one would silently pin the label in its floated position forever. This is still a real `<label for>` that lives in the accessibility tree the whole time; it only moves. `pointer-events-none` lets clicks pass through to the input underneath, and the asymmetric `pt-5` reserves the strip the label lands in so the value never shares a row with it.

Details

Author

ADYSRE

Version

1.0.2

Created

2026-05-14

Updated

2026-07-06

Related components