~/css/tailwind-floating-label-inputs

6 Tailwind Floating Label Inputs

6 TailwindPublished 2026-10-05Free · no sign-up

Six floating label fields in Tailwind: an outlined field with the label on the border, a filled field, an underline with a growing line, a textarea, a dark search field with an icon and an email field with validation.

Filter demos

01. Tailwind Outlined Floating Label

TailwindInputPeer

The classic floating label built with the peer modifier: the input has placeholder=" " so peer-placeholder-shown tells whether it is empty, and the label sits inside the field until focus or text lifts it onto the border.

View code

<div class="relative w-full max-w-xs">
  <input id="twfl1" type="text" placeholder=" " autocomplete="name" class="peer block w-full rounded-lg border border-slate-400 bg-white px-3 py-3 text-base text-slate-900 focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600">
  <label for="twfl1" class="pointer-events-none absolute left-2 top-0 -translate-y-1/2 bg-white px-1 text-xs text-slate-600 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-xs peer-focus:text-indigo-700 motion-reduce:transition-none">Full name</label>
</div>

02. Tailwind Filled Floating Label

TailwindInputFilled

A filled field with a tinted background and a strong bottom border, the label resting in the middle and shrinking to the top on focus. Extra top padding on the input leaves room for the raised label.

View code

<div class="relative w-full max-w-xs">
  <input id="twfl2" type="email" placeholder=" " autocomplete="email" class="peer block w-full rounded-t-lg border-0 border-b-2 border-slate-500 bg-slate-200 px-3 pb-2 pt-6 text-slate-900 focus:border-teal-700 focus:bg-slate-100 focus:outline-none focus:ring-0">
  <label for="twfl2" class="pointer-events-none absolute left-3 top-2 text-xs text-slate-700 transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-base peer-focus:top-2 peer-focus:text-xs peer-focus:text-teal-800 motion-reduce:transition-none">Email address</label>
</div>

03. Tailwind Underline Floating Label

TailwindInputUnderline

A minimal underline field where a coloured line grows from the left on focus. The line is an aria-hidden span after the input, scaled from 0 to full width with peer-focus:scale-x-100.

View code

<div class="relative w-full max-w-xs pt-4">
  <input id="twfl3" type="text" placeholder=" " autocomplete="address-level2" class="peer block w-full border-0 border-b border-slate-400 bg-transparent px-0 py-2 text-slate-900 focus:outline-none focus:ring-0">
  <label for="twfl3" class="pointer-events-none absolute left-0 top-0 text-xs text-slate-600 transition-all peer-placeholder-shown:top-6 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-xs peer-focus:text-rose-700 motion-reduce:transition-none">City</label>
  <span aria-hidden="true" class="absolute bottom-0 left-0 h-0.5 w-full origin-left scale-x-0 bg-rose-600 transition-transform duration-300 peer-focus:scale-x-100 motion-reduce:transition-none"></span>
</div>

04. Tailwind Floating Label Textarea

TailwindTextarea

The same peer technique on a textarea, which also supports placeholder-shown. The label floats to the top padding instead of onto the border, which suits tall fields, and the focus ring is a soft violet glow.

View code

<div class="relative w-full max-w-xs">
  <textarea id="twfl4" rows="4" placeholder=" " class="peer block w-full resize-none rounded-xl border border-slate-400 bg-white px-3 pb-2 pt-6 text-slate-900 focus:border-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-600/30"></textarea>
  <label for="twfl4" class="pointer-events-none absolute left-3 top-2 text-xs font-medium text-slate-600 transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-base peer-focus:top-2 peer-focus:text-xs peer-focus:text-violet-700 motion-reduce:transition-none">Your message</label>
</div>

05. Tailwind Floating Label with Icon

TailwindInputIcon

A rounded search field on a dark surface with a leading icon. The label starts beside the icon and floats onto the border; its background matches the field so the border appears to break around it.

View code

<div class="relative w-full max-w-xs">
  <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2 text-slate-400"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
  <input id="twfl5" type="search" placeholder=" " class="peer block w-full rounded-full border border-slate-600 bg-slate-800 py-3 pl-11 pr-4 text-slate-100 focus:border-cyan-400 focus:outline-none focus:ring-1 focus:ring-cyan-400">
  <label for="twfl5" class="pointer-events-none absolute left-9 top-0 -translate-y-1/2 rounded bg-slate-800 px-1 text-xs text-slate-300 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-base peer-focus:top-0 peer-focus:text-xs peer-focus:text-cyan-300 motion-reduce:transition-none">Search products</label>
</div>

06. Tailwind Floating Label with Validation

TailwindInputValidation

An email field that turns red only after something has been typed and the value is invalid, using the arbitrary peer variant peer-[:not(:placeholder-shown):invalid]. An error line appears in words, so the state is not shown by colour alone.

View code

<div class="relative w-full max-w-xs">
  <input id="twfl6" type="email" placeholder=" " autocomplete="email" aria-describedby="twfl6h" class="peer block w-full rounded-lg border border-slate-400 bg-white px-3 pb-2 pt-5 text-slate-900 focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600 [&:not(:placeholder-shown):invalid]:border-red-600 [&:not(:placeholder-shown):invalid]:ring-red-600">
  <label for="twfl6" class="pointer-events-none absolute left-3 top-1.5 text-xs text-slate-600 transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1.5 peer-focus:text-xs peer-[:not(:placeholder-shown):invalid]:text-red-700 motion-reduce:transition-none">Work email</label>
  <p class="mt-1.5 hidden text-xs font-semibold text-red-700 peer-[:not(:placeholder-shown):invalid]:block">That doesn’t look like an email address yet.</p>
  <p id="twfl6h" class="mt-1.5 text-xs text-slate-600">Use the format name@company.com.</p>
</div>

About these Tailwind Floating Label Inputs

The peer trick

Put peer on the input and the label after it. Give the input placeholder=" "; then peer-placeholder-shown: styles the label while the field is empty and peer-focus: lifts it on focus.

Variant order does the work

Tailwind emits focus styles after placeholder-shown styles, so peer-focus:top-0 wins over peer-placeholder-shown:top-1/2 without any extra specificity.

Keep the real label

The floating text is a real label with for, so the field keeps its accessible name; pointer-events-none lets clicks pass through to the input.

Validation after typing

peer-[:not(:placeholder-shown):invalid]: shows errors only once something has been typed, and the error appears in words, not colour alone.

Frequently asked questions

Does this need JavaScript?

No. All six fields work with CSS only.

Why placeholder with a space?

The :placeholder-shown selector only works when a placeholder exists; a single space is invisible.

Is there a CSS version?

Yes, see the CSS floating label inputs collection.