inputfloating-labelintermediate

Floating Label Input

A text input with a label that floats above the field on focus using peer classes.

Preview
<div class="relative">
  <input type="text" id="name" placeholder=" " class="peer w-72 px-4 pt-5 pb-2 border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500" />
  <label for="name" class="absolute left-4 top-1/2 -translate-y-1/2 text-sm text-gray-500 transition-all peer-focus:top-2.5 peer-focus:translate-y-0 peer-focus:text-xs peer-focus:text-blue-500 peer-[&:not(:placeholder-shown)]:top-2.5 peer-[&:not(:placeholder-shown)]:translate-y-0 peer-[&:not(:placeholder-shown)]:text-xs">Full Name</label>
</div>

Color Breakdown

Border

border-gray-300

#d1d5db

Text

text-gray-900

#111827

Label

text-gray-500

#6b7280

Focus Border

focus:border-blue-500

#3b82f6

Focus Label

peer-focus:text-blue-500

#3b82f6

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:border-gray-600 dark:text-white dark:text-gray-400 dark:focus:border-blue-400

Use Cases

Login formsRegistration formsContact forms

Browser Support

All modern browsers. Peer selector requires Tailwind v3+.

Related Recipes

Floating Action Button

button - beginner

Newsletter Section

section - beginner

Gradient Form

form - intermediate

Dark Form

form - beginner

Pill Search Bar

input - beginner

Toggle Switch

input - intermediate

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How does the floating label work without JavaScript?▼
It uses Tailwind's peer modifier combined with :placeholder-shown CSS pseudo-class. The placeholder=' ' (space) ensures :placeholder-shown toggles correctly.