Auto-Grow Textarea

A multi-line <textarea> that grows with its content using `field-sizing: content` — no JS observer needed. Falls back to a min-height on browsers without support.

Live DemoMay 4, 2026

Plain CSSTailwind v4

Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code

Check ZTM Course

The code

<label class="if-22">
  <span class="if-22-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-22-hint">Field grows as you type</span>
</label>

<label class="if-22">
  <span class="if-22-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-22-hint">Field grows as you type</span>
</label>

.if-22 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-22-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-22 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font: 500 14px/1.55 system-ui, sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition: border-color 0.2s, background 0.2s;
}

.if-22 textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-22 textarea::placeholder {
  color: #b8b6d4;
}

.if-22-hint {
  font-size: 11px;
  color: #b8b6d4;
}

.if-22 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-22-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-22 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font: 500 14px/1.55 system-ui, sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition: border-color 0.2s, background 0.2s;
}

.if-22 textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-22 textarea::placeholder {
  color: #b8b6d4;
}

.if-22-hint {
  font-size: 11px;
  color: #b8b6d4;
}

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Auto-Grow Textarea
Source: https://codefronts.com/components/css-input-fields/auto-grow-textarea/

A multi-line <textarea> that grows with its content using `field-sizing: content` — no JS observer needed. Falls back to a min-height on browsers without support.
## HTML
```html
<label class="if-22">
  <span class="if-22-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-22-hint">Field grows as you type</span>
</label>
```
## CSS
```css
.if-22 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-22-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-22 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font: 500 14px/1.55 system-ui, sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition: border-color 0.2s, background 0.2s;
}

.if-22 textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-22 textarea::placeholder {
  color: #b8b6d4;
}

.if-22-hint {
  font-size: 11px;
  color: #b8b6d4;
}
```

Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.

Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Auto-Grow Textarea
Source: https://codefronts.com/components/css-input-fields/auto-grow-textarea/

A multi-line <textarea> that grows with its content using `field-sizing: content` — no JS observer needed. Falls back to a min-height on browsers without support.
## HTML
```html
<label class="if-22">
  <span class="if-22-label">Notes</span>
  <textarea name="notes" rows="2" placeholder="Type as much as you need..."></textarea>
  <span class="if-22-hint">Field grows as you type</span>
</label>
```
## CSS
```css
.if-22 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-22-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-22 textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f0eeff;
  font: 500 14px/1.55 system-ui, sans-serif;
  outline: none;
  resize: none;
  min-height: 64px;
  field-sizing: content;
  transition: border-color 0.2s, background 0.2s;
}

.if-22 textarea:focus {
  border-color: #a78bfa;
  background: #1f1f2a;
}

.if-22 textarea::placeholder {
  color: #b8b6d4;
}

.if-22-hint {
  font-size: 11px;
  color: #b8b6d4;
}
```

How this works

field-sizing: content on the textarea tells the browser to size the element to its content instead of the rows attribute. Type a line and the box grows; delete and it shrinks. min-height: 64px holds the resting size and resize: none hides the manual grip since the browser now handles it.

This is the field-sizing: content textarea autogrow pattern that replaces the classic ResizeObserver / scrollHeight dance. No JS, no hidden mirror element, no reflow loop — just one CSS declaration doing what every form library used to script.

Make it yours

Set an upper bound with max-height plus overflow-y: auto so very long input scrolls instead of pushing the page.
Adjust the resting size via min-height or the rows attribute — both are respected as a floor.
Restyle focus with the #a78bfa accent and matching background swap.
Widen line-height (1.55) or padding to give the growth more breathing room per line.

Gotchas — read before shipping

field-sizing: content is only in Chrome 123+ and Safari 26+; Firefox landed it in 137. On older browsers the textarea stays at rows="2", which is a graceful fallback but not auto-grow — pair with a JS input-event resize if you need parity.
The property only accepts content or fixed today — no min/max shorthand, so bounds are enforced via min-height and max-height.
Growing the field can shift form layout below it; wrap in a grid or flex container that tolerates the height change.

Browser support

Chrome	Safari	Firefox	Edge
123+	26+	137+	123+

Newly landed. Older browsers fall back to the rows attribute and a JS resize handler if you need auto-grow parity.