For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/textarea.md.
A3S UI
  • English
  • next

      • Textarea

      Textarea captures one plain-text value whose line breaks are meaningful. It preserves native multiline editing while keeping large pastes, validation, and availability states contained.

      Release note

      Include the result, how it was verified, and what to do if verification fails. Use no more than 320 characters.

      0 / 320 characters

      Usage

      Import Tailwind and one complete A3S UI style bundle:

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      For component-level loading, import the base styles, Textarea structure, Field structure, and one visual style in that order:

      @import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/textarea.css";
@import "@a3s-lab/ui/components/field.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Use class="textarea" on a native <textarea>. In production forms, compose it with Field so a persistent label, ordinary guidance, length policy, and current error remain in one relationship.

      <div class="field">
  <label for="release-note">Release note</label>
  <textarea
    id="release-note"
    class="textarea"
    name="releaseNote"
    rows="5"
    maxlength="320"
    aria-describedby="release-note-help"
  ></textarea>
  <p id="release-note-help" data-field-description>
    Include verification evidence and a rollback path.
  </p>
</div>

      Use Textarea for native plain text. Use an editor when the value needs document structure, formatting, or syntax behavior; use Task Composer when the task also needs mentions, attachments, tools, and submission state.

      Parameters

      ParameterPurpose
      idConnects the native control to one persistent visible label
      nameSupplies the submitted field key; a disabled Textarea is excluded from FormData
      rowsSets the authored initial viewport without enabling automatic growth
      minlength, maxlength, requiredExpress native constraints only when they match the real plain-text contract
      wrap, spellcheck, autocompletePreserve or refine native editing behavior instead of recreating it
      aria-describedbyAssociates persistent guidance and the current error while each is relevant
      aria-invalid="true"Exposes a failed validation attempt without discarding the attempted text
      disabledRemoves focus, editing, validation, and form submission; pair it with a visible reason
      readonlyKeeps focus, selection, copying, scrolling, and submission while preventing mutation

      States and variants

      Empty and ready are ordinary value states. Invalid begins only after validation has run. Disabled and read-only express different native availability contracts and must not be presented as interchangeable styling variants.

      Bounded native editing

      The default Textarea is a stable editing viewport with internal overflow and vertical native resize. It does not use unbounded content sizing. A product that deliberately adds auto-growth must cap the height, retain an internal scroll fallback, and prove that paste, undo, IME composition, and responsive transitions do not move unrelated controls.

      rows chooses a useful initial viewport. Large pastes remain fully editable without increasing the page height indefinitely.

      Validation and recovery

      Keep a required Textarea neutral before the first validation attempt. On failure, preserve every line, identify the missing requirement, focus the Textarea, and add the error to its description relationship. Clear stale error semantics as soon as the value is valid or the form resets.

      Release handoff

      Use 40–320 characters to name the verification result and rollback path.

      0 / 320 characters

      Client validation improves recovery but never replaces server validation, sanitization, authorization, or stale-response handling. Do not validate, transform, persist, or submit while an IME composition is active.

      Disabled and read-only

      Disabled removes the value from focus, editing, constraint validation, and FormData. Read-only keeps the value focusable, selectable, copyable, scrollable, and submitted. Both keep full text opacity and a visible reason.

      Availability semantics

      Archived workspaces keep their history but cannot change this value.

      Only the release owner can edit it; the value remains selectable and is included in form submission.

      RTL and mixed text

      Use the document or Field direction for authored prose. A nested technical token may set its own direction when punctuation order must remain left-to-right.

      RTL release note

      اذكر ما تغيّر وكيف تم التحقق وما الذي يجب فعله عند الفشل.

      Accessibility

      • Keep one persistent visible label. Placeholder text may demonstrate content but never supplies the only accessible name.
      • Keep the stable length policy in persistent guidance and associate it through aria-describedby. Give a visible live count its own localized label, keep it out of the description relationship, and avoid announcing every keystroke. Add the current error ID only after validation, then remove it after recovery.
      • Preserve native newline editing, selection, undo, paste, spellcheck, dictation, drag-selection, and IME behavior.
      • Keep the viewport bounded and vertically resizable so long input does not move the page while users edit near the caret.
      • Use one continuous inset focus boundary. Forced-colors mode replaces it with a system Highlight outline.
      • On coarse pointers, editable text remains at least 16px to avoid mobile focus zoom.
      • Test real mobile keyboards, physical CJK input methods, 200% zoom, touch selection, Windows forced colors, and screen-reader/browser combinations before release.