Let Form Controls Size Themselves With field-sizing

Making a <textarea> grow with its content has traditionally meant measuring it with JavaScript. field-sizing: content gives CSS a direct way to do it.

textarea,
select,
input {
  field-sizing: content;
}

The browser sizes each control from its content rather than keeping its usual fixed size. It can apply to text inputs, number inputs, file inputs, textareas, selects, and related controls, though the exact result depends on the control.

Do not forget the limits

An input that grows forever is technically responsive and practically awkward. Add minimum and maximum sizes that fit the layout:

textarea {
  field-sizing: content;
  min-block-size: 4lh;
  max-block-size: 12lh;
  max-inline-size: 100%;
}

The default value is fixed, which keeps the familiar control sizing. Because field-sizing was still a new feature when this article was written, check current browser support before relying on it without a fallback. The Chrome platform status page tracks the original implementation.

For a small progressive enhancement, this is a nice property. Keep the control usable without it, add sensible limits, and let supporting browsers remove a bit of JavaScript.

← Back to all articles