Skip to content
Relements Relements

Textarea

Multiline text input styled with .re-textarea. Resizes vertically only.

Basic

Section titled “Basic”
Live example
<label class="re-field">
  <span class="re-field__label">Message</span>
  <textarea
    class="re-textarea"
    id="ta-basic"
    name="message"
    rows="4"
    placeholder="Tell us…"
  ></textarea>
  <span class="re-field__hint">Plain text. Resize vertically.</span>
</label>

Sizes

Section titled “Sizes”
Live example
<div class="grid">
  <label class="re-field">
    <span class="re-field__label">Small</span>
    <textarea class="re-textarea" data-size="sm" id="ta-sm" rows="2"></textarea>
  </label>
  <label class="re-field">
    <span class="re-field__label">Large</span>
    <textarea class="re-textarea" data-size="lg" id="ta-lg" rows="3"></textarea>
  </label>
</div>

States

Section titled “States”
Live example
      <div class="grid">
        <label class="re-field">
          <span class="re-field__label">Disabled</span>
          <textarea class="re-textarea" id="ta-disabled" disabled>Locked</textarea>
        </label>
        <label class="re-field">
          <span class="re-field__label">Invalid</span>
          <textarea
            class="re-textarea"
            id="ta-invalid"
            aria-invalid="true"
            aria-describedby="ta-invalid-msg"
          >
wrong</textarea
          >
          <span id="ta-invalid-msg" class="re-validation-message">Please revise.</span>
        </label>
      </div>

Accessibility

Section titled “Accessibility”
  • Keyboard — fully native. Tab moves focus to and from the textarea; typing, caret movement, multiline newlines, and text selection all stay native. .re-textarea only styles the element — there is no extra JavaScript keyboard model.
  • Focus — a visible :focus-visible ring (--re-shadow-focus, drawn with border-color: --re-color-focus-ring plus a box-shadow) appears on keyboard focus; an invalid textarea keeps a ring in the danger color while focused.
  • Semantics — it stays a real <textarea>, so its role, value, and form serialization are all native. Wrapping it in a <label class="re-field"> with a .re-field__label span associates the label implicitly, and .re-field__hint text should be wired to the textarea via aria-describedby.
  • Notes — the danger border lights up on [aria-invalid="true"] or the native :user-invalid pseudo-class (only after the user interacts), so error styling never fires prematurely; point aria-describedby at the .re-validation-message so the message is announced. Disabled textareas render at reduced opacity with a not-allowed cursor. Horizontal resize is locked (vertical only) to prevent layout breakage. The optional data-autosize grow-with-content is purely visual: native field-sizing: content where supported, with enhanceAutosize as a no-JS-safe fallback — neither changes the accessible value or keyboard model. See the accessibility guide.