Textarea

Multi-line text input for longer content.

Textareas are width: 100% by default. Do not add af-w-full.

Basic textarea

<textarea class="af-textarea" placeholder="Enter your message"></textarea>

With rows

<textarea class="af-textarea" rows="6" placeholder="Enter your message"></textarea>

States

<textarea class="af-textarea" placeholder="Normal"></textarea>
<textarea class="af-textarea" aria-invalid="true" placeholder="Error state"></textarea>
<textarea class="af-textarea" disabled placeholder="Disabled"></textarea>

Auto-grow textarea

Textareas can automatically grow with content using the af-is-auto-grow class. This uses the CSS field-sizing: content property — see Browser support below for versions.

<textarea class="af-textarea af-is-auto-grow" placeholder="This textarea grows with content"></textarea>

Browser support

Feature	Chrome	Edge	Safari	Firefox
field-sizing: content af-is-auto-grow	✓ 123 Supported from 123	✓ 123 Supported from 123	✓ 26.2 Supported from 26.2	✓ 152 Supported from 152

Safari versions cover iOS Safari too. Without support: a fixed-height textarea that scrolls — still usable, just not growing. Versions checked against MDN browser-compat-data, August 2026. See Browser Support for Airframe's baseline.

Adding auto-grow yourself

Airframe ships no JavaScript, so the fallback is where it stops. If you need auto-grow on older versions too, this is the whole enhancement — it does nothing once field-sizing is supported:

if (!CSS.supports('field-sizing', 'content')) {
  const grow = (el) => {
    el.style.height = 'auto';
    el.style.height = `${el.scrollHeight}px`;
  };

  document.querySelectorAll('textarea.af-is-auto-grow').forEach((el) => {
    el.addEventListener('input', () => grow(el));
    grow(el);
  });
}

Run it after the textareas are in the DOM, and again for any you add later.