CSS Showcase · Live Demo

Inputs that adapt.

One field component that floats its label with :placeholder-shown on desktop and grows into large touch targets on mobile.

Featured demo

mobile · stacked-large
Must be at least 8 characters

mobile design patterns

input-stacked-large.css
/* Large touch fields */
.field[data-pattern="stacked-large"] input {
  min-height: 44px;
  font-size: 1rem;
  border-radius: 0.75rem;
  padding-inline: 1rem;
}

.field[data-pattern="stacked-large"] label {
  font-size: 0.8rem;
  font-weight: 600;
}

CSS features used

  • • :placeholder-shown
  • • Peer-style label transforms
  • • Focus-visible rings
  • • data-invalid styling
  • • CSS custom properties
  • • Semantic tokens