Bring a polished, JavaScript-free floating label to your forms using Tailwind’s peer utilities. Below is a live demo you can play with, just start typing to see the label lift and shrink!


How It Works

Tailwind’s peer strategy lets one element (the peer) drive styles on another. Here’s the breakdown:

  • peer on the <input>
    Marks the input as the reference point.
  • peer-placeholder-shown:
    Targets the label when the input is empty (the placeholder is visible). In our demo it keeps the label sitting over the field.
  • peer-focus:
    Triggers when the input is focused here we move and scale the label upward.
  • peer-not-placeholder-shown:
    Fires whenever the input has content (placeholder hidden), so the label stays floated even after blur.

Happy coding!

Demo