Skip to content
SkillCodex
Menu

Textarea

Textarea

A labeled control for entering or editing free-form text across multiple lines.

Try the component
Context, sources and actions
Sources and revision
Updated
Version
v1.0.26 · r2
Sources
5 sources
Status
Published
Read the sources

You may have searched for: a big box for writing a messageenter several lines of feedbacka comment field that can grow

All phrasings
Save and share

Recognize

Enter text

Try it

Is the expected value short, multiline, or a search query?

Textarea

Shared trial context

A form collects text, with field length and submission intent determining the appropriate input control.

Textarea

Mission

Textarea

Write two paragraphs, resize the field, exceed the limit, and recover without losing the draft.

Write one or more paragraphs. Line breaks are preserved.

0 of 500 characters

Live result

The multiline note has not been saved yet.

Step 1 of 3

Try

Try the component. Your live result appears just above. Move on at your own pace.

Behavior and edge case
What to observe
The Handoff note, guidance, and character count remain readable as the multiline control grows or scrolls.
Edge case
At the character limit, input and pasted text are handled consistently and a specific linked error preserves the full draft.

What this example shows

Textarea accepts line breaks and longer free-form content; Text field is single-line, while Search field is a query input with search submission behavior.

Which fits your need?

Textarea

Collecting a message, note, or description

Text field

Entering a name, email, code, or other short value

Which component will you use here?
Difference and sources

Textarea accepts line breaks and longer free-form content; Text field is single-line, while Search field is a query input with search submission behavior.

Read the sources

    Parts of the specimen

    Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.

    Label

    The persistent text that names a control or field.

    Position in the atlas

    Relationship map

    Locate the chapter, neighboring concepts, and the next useful decision.

    • Chapter

      Enter text

      Textarea belongs to this comparison group.

    • Do not confuse

      Text field

      Choose Textarea if the user writes a message, note, or description. Choose Text field if the value is a name, email, code, or another short entry.

      Compare this pair
    • Do not confuse

      Search field

      Choose Textarea if the user writes a message, note, or description that spans several lines. Choose Search field if the user looks for something and expects results, not storage.

      Compare this pair
    • Next step

      Compare the concepts in the chapter before choosing an implementation.

      Open the chapter

    In your own words

    Understand

    What people describe

    Documented aliases: multiline field, comment box, long text input

    • a big box for writing a message
    • enter several lines of feedback
    • a comment field that can grow
    • write a longer description with line breaks
    • a resizable form area for notes
    • show a character count under a long response

    Choose

    Use it when

    • Collecting a message, note, or description
    • Allowing meaningful paragraph breaks

    Avoid it when

    • The value should remain one short line
    • Users need rich-text formatting rather than plain text

    Compare

    Compare similar concepts

    Verification checklist

    Try these actions in the lab, then check the same behaviours in your agent’s result. Adapt the example names to your interface.

    1. 1. Do this

      Write two paragraphs using Enter between them.

      Expected result

      Enter inserts a line break instead of unexpectedly submitting the form, and the visible label remains available.

    2. 2. Do this

      Paste a long draft, then resize the field or let it grow in a narrow window.

      Expected result

      You can read and edit the whole draft, and the field does not hide the form’s actions.

    3. 3. Do this

      If a length limit exists, exceed it by typing and by pasting, then shorten the draft.

      Expected result

      Both input methods follow the stated rule, any problem is explained, and you can recover without losing the whole draft.

    Full contract
    1. 1Enter creates a line break
    2. 2The visible label and guidance remain associated
    3. 3Resize or auto-grow never hides content or actions
    4. 4Length errors preserve the draft and explain recovery

    Understand → Recognize → Choose → Compare

    Pack for your agent

    Pre-written instructions to paste into your agent. Copying executes nothing.

    Implement correctly

    Build Textarea without breaking its behavior

    # Implement Textarea in your agent
    
    ## Objective
    Implement Textarea for this verified behavior: A labeled control for entering or editing free-form text across multiple lines.
    
    ## Prerequisites
    - Inspect the repository, design system, and existing tests first.
    - Preserve unrelated changes and keep the file scope bounded.
    - Confirm that Textarea matches the need before writing code.
    
    ## Required behavior
    - Enter inserts a new line, and the control can grow or scroll without hiding its label.
    - A specific inline message identifies the invalid field and explains how to correct it.
    
    ## States to cover
    - Draft within limit
    - Draft over limit
    
    ## Accessibility
    - ARIA role: textarea
    - The primary control or named region for Textarea has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    - Visible focus surrounds the control and remains visible while the user scrolls within long text.
    - Not applicable: the draft remains until reset, submitted, or deliberately cleared.
    - Label, multiline role, helper, character limit, current invalid state, and error are exposed without announcing every keystroke count.
    - Tab focuses the textarea
    - Enter inserts a new line
    - Native editing and scrolling shortcuts remain available
    
    ## When not to use
    - The value should remain one short line
    - Users need rich-text formatting rather than plain text
    
    ## Acceptance criteria
    - Enter creates a line break
    - The visible label and guidance remain associated
    - Resize or auto-grow never hides content or actions
    - Length errors preserve the draft and explain recovery
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The need is tied to canonical behavior before any technical choice.
    • States, accessibility, and non-goals prevent a merely visual implementation.
    • Acceptance criteria and the output format make verification observable.

    Try next

    Verify Textarea on a real journey

    # Verify Textarea after implementation
    
    ## Objective
    Audit the Textarea implementation against its behavior, states, and accessibility requirements without changing it automatically.
    
    ## Checks
    - Replay the smallest representative journey.
    - Check keyboard behavior, focus, accessible name, and announcements.
    - Tie each gap to a specific acceptance criterion.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:79bea26585c056de0ebbc132fb46fbe7e9ac60283a9e3e15a8b69adb8b1abeec

    Diagnose a problem

    Find and fix the Textarea defect

    # Debug Textarea in your agent
    
    ## Observed symptom
    [DESCRIBE THE SYMPTOM HERE]
    
    ## Observable checks
    - Reproduce the issue with the smallest relevant journey.
    - Compare behavior with the documented states and transitions for Textarea.
    - Verify keyboard behavior, focus, accessible name, and announcements.
    
    ## Possible causes
    - The chosen primitive does not match the expected behavior.
    - A state, transition, or focus return is missing.
    - A neighboring component captures an event or hides an accessible signal.
    
    ## Bounded corrections
    - Fix the reproduced cause without recreating neighboring components.
    - Preserve the public contract and add a focused regression test.
    - Do not install dependencies or change remote state without authorization.
    
    ## Final verification
    - Enter creates a line break
    - The visible label and guidance remain associated
    - Resize or auto-grow never hides content or actions
    - Length errors preserve the draft and explain recovery
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    
    • Web platform
    • Requires · Access to the repository, design system, and tests
    Why it works
    • The explicit symptom prevents starting from an assumed fix.
    • Checks separate behavior, accessibility, and neighboring interference.
    • The fix stays bounded and must produce regression evidence.

    Try next

    Lock in the Textarea fix

    # Prevent the Textarea regression
    
    ## Objective
    Turn the reproduced cause into a focused regression test and compare Textarea with neighboring concepts before widening the fix.
    
    ## Checks
    - Prove that the test fails before the fix.
    - Prove that it passes after the bounded fix.
    - Verify that no neighboring component changed behavior.
    
    ## Guardrails
    - Show the proposed changes before any external action.
    - Do not publish, send, delete, pay for, or change remote state without explicit authorization.
    - Preserve unrelated changes and stop if the scope becomes ambiguous.
    
    ## Output format
    - Outcome or verdict.
    - Files or actions involved.
    - Checks run and observable evidence.
    - Remaining blockers or limitations.
    

    sha256:528c11c2d774a27435719e8e3a72448d9da195afc2b08ac3266104fe4d0b272b

    Full entry, saving and provenance

    Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

    Pack digest: sha256:0c5778ef58046244e14e519c67d898cb8271031b3938318a3a925fd0f69613fd

    In code

    TechnologyPrimitiveVersionCaveat
    Web platform

    label with textarea

    NativeThe native multiline control preserves line breaks, resize behavior, and form semantics while labels and errors stay associated.

    Technical details

    Behaviors

    • Enter multiple lines

      Enter inserts a new line, and the control can grow or scroll without hiding its label.

    • Explain validation

      A specific inline message identifies the invalid field and explains how to correct it.

    States

    • Draft within limit

      Draft within limit

    • Draft over limit

      Draft over limit

    State transitions

    • Draft within limit → Draft over limit

      Typing or pasting takes the preserved multiline draft above 500 characters.

    • Draft over limit → Draft within limit

      Editing the preserved draft back to 500 characters or fewer resolves the linked error.

    Test scenarios

    Context
    A handoff form collects a multiline Handoff note up to 500 characters.
    Mission
    Write two paragraphs, resize the field, exceed the limit, and recover without losing the draft.
    Primary state
    The Handoff note, guidance, and character count remain readable as the multiline control grows or scrolls.
    Edge case
    At the character limit, input and pasted text are handled consistently and a specific linked error preserves the full draft.

    Visual signals

    • Taller editable region
    • Persistent label
    • Resize affordance, helper, or character count when useful

    Behavioral signals

    • Enter inserts line breaks
    • Content scrolls or control grows predictably
    • Validation handles length without deleting text

    Accessibility

    Role
    textarea
    Accessible name
    The primary control or named region for Textarea has a stable accessible name from visible text or an explicit programmatic label; placeholder text and tooltips are not names.
    Focus
    Visible focus surrounds the control and remains visible while the user scrolls within long text.
    Dismissal
    Not applicable: the draft remains until reset, submitted, or deliberately cleared.
    Scroll
    The focused field, helper text, and validation message remain visible while the page or an on-screen keyboard changes the viewport.
    Announcement
    Label, multiline role, helper, character limit, current invalid state, and error are exposed without announcing every keystroke count.
    Keyboard
    • Tab focuses the textarea
    • Enter inserts a new line
    • Native editing and scrolling shortcuts remain available

    Bindings

    Open the HTML, ARIA, Radix, and shadcn matrix
    • label with textarea

      implementationKind
      native
      nativeElement
      label with textarea
      ariaPattern
      textbox
      radixPrimitive
      Not applicable
      shadcnRecipe
      Not applicable
      runtimeDependency
      Not applicable
      packageName
      Not applicable
      exportName
      Not applicable
      exactVersion
      Not applicable
      status
      verified
      sourceId
      source-ui-html-textarea
      deprecationStatus
      active
      replacement
      Not applicable
      validFrom
      Not applicable
      validUntil
      Not applicable

      Equivalence caveat: The native multiline control preserves line breaks, resize behavior, and form semantics while labels and errors stay associated.

      Verify binding source

    Sources

    • WHATWG HTML: The textarea element
      sourceId
      source-ui-html-textarea
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Claim covered: Textarea: normative native semantics, states, attributes, and browser behavior for textarea.

    • WHATWG HTML: Forms
      sourceId
      source-ui-html-forms
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/forms.html
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:730c20c8a823ab6b9a40c77d4731d6aab46895cd98c388fe12c966096d5bdd18
      status
      verified

      Claim covered: Textarea: normative native semantics, states, attributes, and browser behavior for HTML form controls.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Claim covered: Textarea: informative WCAG guidance for evaluating visible keyboard focus appearance.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Claim covered: Textarea: normative ARIA role definitions and constraints for the stated accessible role.

    • WHATWG HTML: The input element
      sourceId
      source-ui-html-input
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/input.html#the-input-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Not stated
      contentDigest
      sha256:4699d26dbf428296b4b352b480b75c846a9a6b23cf3f124d6d6fe6b5e19d4eba
      status
      verified

      Claim covered: Textarea: normative native semantics, states, attributes, and browser behavior for input.