Overview
Use Textarea for multi-line responses where people need space to explain, summarize, comment, or provide structured free-form context.
Change rationale
Type to see the live character count update.
Anatomy
Textarea combines a persistent label, multi-line control, entered content, supporting feedback, and optional count or resize affordance.
- 1Label
Names the expected response and required state.
- 2Input area
Provides a visible multi-line entry boundary.
- 3Content
Wraps naturally and scrolls or expands as configured.
- 4Supporting message
Provides guidance, error, or success feedback.
- 5Count and resize
Shows length constraints and optional manual resizing.
When to use
Use Textarea when a response may contain multiple sentences, paragraphs, or line breaks.
Recommended
- Collect rationale or notes
Give enough room for decisions, review comments, and operational context.
- Accept variable-length responses
Use counting to make meaningful limits visible.
- Preserve line breaks
Choose Textarea when formatting across lines helps comprehension.
When not to use
Use a more constrained control when the expected value is short, enumerable, or structurally complex.
Avoid
- Do not collect short identifiers
Use Input for names, IDs, emails, and single-line values.
- Do not hide governed choices
Use Select or Combobox for constrained values.
- Do not build a rich editor
Use a dedicated editor for formatting, mentions, or attachments.
Variants
Treatment, size, resizing, and content-driven height adapt the control to different form contexts.
Outlined
Default visible field boundary.
Filled
Tonal surface for grouped forms.
Underlined
Compact treatment for restrained layouts.
Resize behavior
None, vertical, both, or automatic height.
States
Textarea communicates availability, focus, validation, and content constraints without replacing application validation.
| State | Trigger | Visual response | Interaction |
|---|---|---|---|
| Empty | No value entered | Placeholder may provide an example | Ready for entry |
| Focused | Control receives focus | Primary border and ring | Text entry active |
| Error | Value fails validation | Error border and message | Editable correction |
| Success | Value is confirmed | Success border and message | Remains editable |
| Disabled | Field unavailable | Reduced emphasis | Not focusable |
| Read-only | Value cannot change | Tonal surface | Content remains selectable |
Behavior
Textarea follows native text-entry behavior and adds design-system guidance, validation, counting, and height management.
Text wrapping
Long text wraps without horizontal scrolling by default.
Character count
Count reflects controlled or uncontrolled values.
Auto-resize
Height follows scroll height while manual resize is disabled.
Form integration
Native name, required, disabled, and maxLength remain available.
Accessibility
Textarea preserves native semantics and programmatically connects labels, messages, counts, and invalid state.
| Key | Action |
|---|---|
| Tab | Moves focus into or away from the field. |
| Enter | Creates a new line. |
| ShiftTab | Moves focus to the previous control. |
- Provide a persistent visible label for every textarea.
- Use helper text for instructions that remain relevant during entry.
- Expose invalid state and connect error text with aria-describedby.
- Do not use placeholder text as the only label.
- Set a meaningful maxLength before showing a limit count.
- Keep resize or auto-resize behavior usable at high zoom.
Content guidelines
Labels and guidance should make the expected depth, purpose, and constraints of the response clear.
Name the response
Use a concise noun phrase.
Change rationale
Explain purpose
Say how the response will be used.
Included in the audit record.
Demonstrate format
Use placeholder examples sparingly.
Summarize the customer impact…
Write corrective errors
Explain how to resolve the problem.
Add at least 20 characters.
Examples
Controlled value and auto-resize support review workflows while validation remains application-owned.
Controlled response
Props / API
Textarea extends native textarea attributes except the conflicting size attribute.
Props