Textarea

A textarea that grows with its content. The autogrow JavaScript you've written five times is one CSS declaration now.

field-sizing

PreviewCode

<textarea
  rows="3"
  placeholder="Your message — I grow as you type."
  aria-label="Message"
  class="field-sizing-content max-h-48 w-full max-w-md rounded-lg border border-input bg-background px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50"
></textarea>

How it works

field-sizing-content (field-sizing: content) makes the textarea size itself to its value. No hidden mirror element, no scrollHeight measuring, no resize listener.
rows="3" sets the starting height, max-h-48 caps the growth — past that it scrolls.
Browsers without field-sizing simply keep the fixed rows height and scroll. Nothing to polyfill.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
field-sizing: contentBaseline 2026 · newly available	123	123	152	26.2	The textarea keeps its fixed rows height and scrolls.