Forms & Inputs Pure CSS peer-placeholder-shown Zero-JS Tailwind v4

Floating Label Input

Modern animated floating label form controls utilizing HTML5 placeholder-shown pseudo-class and Tailwind peer selectors.

Interactive Preview

Live Edit & Viewport Resizer

Variants:

Installation

Add the Floating Label Input component to your project via CLI:

terminal bash

npx plain-ui add floating-label-input

Features

✓ Zero JavaScript - 100% pure CSS peer animations
✓ Smooth label translation, scaling, and color transitions
✓ Outlined border notch and filled background styles
✓ Leading and trailing icon support
✓ Interactive password toggle and validation helper text

Variants & Examples

With Leading Icon

Floating label input with icon placement.

floating-label-input-with-leading-icon.html html

<div class="max-w-sm mx-auto p-4">
  <div class="relative">
    <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none text-zinc-400">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
    </div>
    <input 
      type="text" 
      id="search-input" 
      placeholder=" "
      class="peer block w-full ps-10 pe-3.5 pt-4 pb-2 text-sm text-zinc-900 dark:text-zinc-100 bg-transparent rounded-lg border border-zinc-300 dark:border-zinc-700 appearance-none focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent transition-all"
    />
    <label 
      for="search-input"
      class="absolute text-sm text-zinc-500 dark:text-zinc-400 duration-200 transform -translate-y-3.5 scale-75 top-4 z-10 origin-[0] start-10 bg-white dark:bg-zinc-950 px-1 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-placeholder-shown:bg-transparent peer-focus:scale-75 peer-focus:-translate-y-3.5 peer-focus:bg-white dark:peer-focus:bg-zinc-950 peer-focus:text-blue-600 dark:peer-focus:text-blue-400 pointer-events-none"
    >
      Search components...
    </label>
  </div>
</div>

Attributes & Classes

Attribute / Prop	Type	Default	Description
placeholder=' '	string	-	Required single space placeholder to enable CSS :placeholder-shown state.
peer	class	-	Tailwind class placed on input to enable peer sibling targeting on label.

Accessibility & Keyboard Navigation

• Label element is properly associated with the input via matching for and id attributes.
• Retains full keyboard focus visibility.

← Popover Border Beam →