CSS field-sizing playground

Explore field-sizing with controls for switching between content and fixed, compare compatible form field sizing, and copy production-ready CSS.

HTML

<form class="field-sizing-demo">
  <label>
    Text
    <input type="text" value="BaselineLab" />
  </label>

  <label>
    Email
    <input type="email" value="dev@baseline.lab" />
  </label>

  <label>
    Number
    <input type="number" value="2026" />
  </label>

  <label>
    Password
    <input type="password" value="field-sizing" />
  </label>

  <label>
    Search
    <input type="search" value="CSS forms" />
  </label>

  <label>
    Tel
    <input type="tel" value="+34 600 000 000" />
  </label>

  <label>
    URL
    <input type="url" value="https://baselinelab.dev" />
  </label>

  <label>
    File
    <input type="file" />
  </label>

  <label>
    Select
    <select>
      <option>content</option>
      <option>fixed</option>
    </select>
  </label>

  <label>
    Textarea
    <textarea>field-sizing adapta el tamaño al contenido.</textarea>
  </label>
</form>

CSS

:where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea) {
  field-sizing: content;
}

:where(input[type="email"], input[type="file"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"]) {
  min-inline-size: 10ch;
}

:where(textarea) {
  min-block-size: 3lh;
}