← Back to gallery
CSS

Floating Label Input

A form input where the visible label shrinks and translates up on focus, on value presence, and on autofill — keeping the label accessible and never collapsing to a placeholder-only state.

Duration
1s
Resolution
1440×900
Format
CSS
floating-labelform-inputaccessibility:focus-within:placeholder-shown

Form / floating label / accessibility

Floating label input

Reimplements three floating-label flavors where the label is always visible and shifts into a compact caption on focus or when the field carries a value, driven by :placeholder-shown.

outlined — lift -22px / scale 0.80

Material-style outline notch

Outlined

A bordered input where the label rests inside the box at rest and floats up to notch the top border on focus or when the field has a value.

  • outlined
  • border notch
  • visible label

Subtle fill with bottom line

Filled

A filled surface with a thicker bottom border animates the label upward while the fill color and border react to the focus state.

  • filled
  • bottom border
  • mobile

Minimal single underline

Underlined

An underline-only field where the label floats high and the baseline underline grows from the focal point to signal focus.

  • underline
  • minimal
  • dense form

Floating label inspector

Outlined

Type a value, then clear it, to see the label re-anchor.

Lift
-22px · 0.80x
Duration
0.20s

Works well on light and dark surfaces because the border carries the shape and the label never fights with placeholder text for space.

css
.floating-label {
  position: relative;
  display: block;
}

.floating-label input {
  width: 100%;
  padding: 18px 12px 10px;
  background: transparent;
  color: inherit;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  outline: none;
}

.floating-label span {
  position: absolute;
  left: 12px;
  top: 14px;
  padding: 0 4px;
  background: var(--surface);
  color: rgba(148, 163, 184, 0.8);
  pointer-events: none;
  transition: transform 0.20s ease, color 0.20s ease;
  transform-origin: left top;
}

/* Float up when focused OR when input has content (placeholder is blank) */
.floating-label input:focus ~ span,
.floating-label input:not(:placeholder-shown) ~ span {
  transform: translateY(-22px) scale(0.80);
  color: #7dd3fc;
}

.floating-label input:focus {
  border-color: #7dd3fc;
}

@media (prefers-reduced-motion: reduce) {
  .floating-label span { transition: none; }
}