Skip to content
Relements Relements

Autosize textarea

Add data-autosize to a .re-textarea to make it grow with its content. Modern engines do this in pure CSS via field-sizing: content (Chrome 123+, Safari 26.2+). For engines without it (Firefox at the floor), opt into the fallback behavior:

import { enhanceAutosize } from "@relements/core/behaviors/autosize";
enhanceAutosize(document); // no-op where field-sizing is supported

enhanceAutosize feature-detects field-sizing and, only when it’s missing, measures scrollHeight on input. With no JavaScript and no field-sizing, the textarea stays a normal resizable textarea — nothing breaks. Cap the growth with --re-autosize-max-block-size (default 18rem); past the cap it scrolls.

Basic

Section titled “Basic”
Live example
<label class="re-field">
  <span class="re-field__label">Bio</span>
  <textarea
    class="re-textarea"
    data-autosize
    id="ta-autosize"
    rows="2"
    placeholder="Grows as you type…"
  ></textarea>
</label>

Accessibility

Section titled “Accessibility”

This is a native <textarea> with autosizing layered on top — autosizing is a visual concern only and changes nothing about how assistive technology sees the field.

  • Keyboard — native <textarea>: Tab moves focus in and out, typing edits the value, Enter inserts a newline. No keys are added or intercepted; the fallback behavior only listens to input to recompute height. When the value exceeds --re-autosize-max-block-size the box stops growing and scrolls, so all content stays reachable by caret and wheel.
  • Focus — a visible :focus-visible ring (--re-shadow-focus, with the border recoloured to --re-color-focus-ring) shared with .re-input and .re-select.
  • Semantics — wrap the <textarea> in <label class="re-field"> with a .re-field__label span (as the demo does) so the label is associated by containment; screen readers announce it as a multi-line edit field with that name. Set aria-invalid="true" to flag a validation error — it recolours the border to --re-color-danger-border (matching the native :user-invalid state) and is announced as invalid.

See the field and textarea pages for label, required, and error-message wiring, and the accessibility guide.