Floating Label Input

Preview

Tailwind Classes

relative [&>input]:peer [&>input]:placeholder-transparent [&>label]:absolute [&>label]:left-3 [&>label]:top-2 [&>label]:text-gray-500 [&>label]:transition-all peer-focus:[&>label]:-top-2.5 peer-focus:[&>label]:text-xs peer-focus:[&>label]:text-blue-600

CSS Code

.floating-label {
  position: relative;
}
.floating-label input::placeholder {
  color: transparent;
}
.floating-label label {
  position: absolute;
  left: 0.75rem;
  top: 0.5rem;
  color: #6b7280;
  transition: all 0.2s;
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: -0.625rem;
  font-size: 0.75rem;
  color: #2563eb;
}

HTML Example

<div class="relative">
  <input type="email" id="email" placeholder="Email" class="peer w-full px-3 py-2 border rounded-lg placeholder-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" />
  <label for="email" class="absolute left-3 top-2 text-gray-500 transition-all peer-focus:-top-2.5 peer-focus:text-xs peer-focus:text-blue-600 peer-[:not(:placeholder-shown)]:-top-2.5 peer-[:not(:placeholder-shown)]:text-xs bg-white px-1">
    Email Address
  </label>
</div>

Use Cases

Browser Support

All modern browsers