Components · Inputs
Text Area
Multi-line free text. Identical to Text Input in every state; the difference is that the user can see, and should be able to resize, more than one line at a time.
Figma source: Text Area ↗Examples
Resizable text area
Plain text. Drag the lower-right corner to resize.
<div class="cds-field">
<label class="cds-field__label" for="abstract">Abstract</label>
<textarea class="cds-textarea" id="abstract" rows="4"
aria-describedby="abstract-help"></textarea>
<span class="cds-field__caption" id="abstract-help">Plain text.</span>
</div>States
Placeholder
Error
Disabled
Figma properties
| Property | Values | Notes |
|---|---|---|
State | Default · Focus · Disabled · Error | Same four states as Text Input. |
Text Type | Blank · Placeholder · Entered | Current contents. |
Entered Text / Placeholder Copy | text | Value and hint. |
Usage
When to use it
- Use where the expected answer runs to a sentence or more — abstracts, justifications, comments.
- Set
rowsto roughly the expected answer length, so the field itself signals how much to write. - Keep vertical resizing available.
- Show a character counter when there is a hard limit — and let the user exceed it while telling them by how much, rather than silently truncating.
When not to use it
- Do not use for a single short value.
- Do not disable resizing.
- Do not use for formatted content — that is the Rich Text Editor.
- Do not let the field grow wider than about 70 characters; long lines are hard to read back.
Accessibility
- Same labelling rules as Text Input:
<label for>,aria-describedby,aria-invalid. - Horizontal resizing is disabled deliberately — widening past the container breaks reflow at 320px and fails SC 1.4.10.
- If a character counter is present, mark it
aria-live="polite"so the remaining count is announced without interrupting typing.
Tokens consumed
| Token | Applied to | Resolves to |
|---|---|---|
--input-background | Field fill | --color-white |
--input-border | Resting border | --color-gray-400 → #888c8c |
--input-text | Entered value | --color-black → #111111 |
--input-focus-border | Focus ring | --focus-ring → #44a3db ⚠ |
--input-error-background | Fill in error | --color-red-100 |
--input-error-border | Border in error | --color-red-500 |
--input-disabled-background | Fill when disabled | --color-gray-100 |
--input-disabled-text | Value when disabled | --disabled-text → #888c8c |
--input-label | Label | --color-black |
--input-required | Required asterisk | --color-red-500 |
--input-caption | Help text and placeholder | --color-gray-500 |
--input-error-caption | Error message | --color-red-500 |