> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Textarea

> A Textarea allows users to input and edit multiple lines of text. It is designed for collecting longer or more complex information such as comments, feedback, messages, descriptions, or additional notes.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-textarea--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-textarea--default" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-textarea--default&viewMode=story&globals=theme:light" title="Textarea default story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

* Multi-line text input: For collecting longer, free-form responses such as comments, descriptions, messages, or feedback.
* Editable content: When users need to input or edit large chunks of text.
* Forms: For fields like Bio, Notes, or Detailed explanations and descriptions.

## When to use something else

* Single-line input: use [Input](/cdf/aura/primitives/input).
* Structured formats (phone numbers, dates): use masked [Input](/cdf/aura/primitives/input), [Date picker](/cdf/aura/primitives/date-picker), [Select](/cdf/aura/primitives/select), or [Combobox](/cdf/aura/primitives/combobox).
* Rich text (bold, lists): use a rich-text editor, not a plain [Textarea](/cdf/aura/primitives/textarea).

## Dos and don'ts

* **Do** use concise labels and placeholder copy to help users understand what information is being requested from them.
* **Do** always allow for scroll when the Textarea reaches its max height but content continues beyond that.
* **Don't** set a small fixed height if it's expected the user will input a lot of text.
* **Don't** force the user to scroll both horizontally and vertically inside the Textarea.
* **Don't** use long placeholder descriptions that repeat the label name.
* **Don't** use any default filled text as users may skip changing it, which could cause problems when submitting forms.

## Behavior

Resizing:

* Textareas can optionally be resized by the user with a drag handle placed in the bottom right corner. Resizing can be forced to horizontal only, vertical only or allow for both horizontal and vertical resizing simultaneously. It's imperative to consider the potential consequences of allowing user resizing as this can result in layout shifts.
* In general, it is preferred to let the browser handle resizing or restrict to a single resize orientation (e.g., vertical) as this is more predictable for users. Below are some guidelines on when to allow for resizing vs not to.

Restrict resizing when:

* Layout or design integrity must be preserved: In tightly designed forms or primitives where resizing could break the layout or overlap other UI elements.
  Example: Inline forms in cards, modals, or sidebars where space is limited.
* Textarea size is controlled programmatically: If the textarea automatically expands as users type (autoResize prop), manual resizing is redundant or could conflict with the behavior.
* Consistent user experience across devices: In responsive designs where resizing could cause inconsistent behavior on different screen sizes.
* Input content is short and doesn't require extra space: If the textarea is intended for brief responses (e.g., short notes, comments under 3 lines or limited characters), resizing is unnecessary. Instead, ensure the textarea default size will accommodate the input limitations.

## Often used with

[Label](/cdf/aura/primitives/label), [Helper text](/cdf/aura/primitives/helper-text); optional character count in helper line; resize handle per [Behavior](#behavior).

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### With label

Pair a Textarea with a visible label in forms so users know what information to enter, and use helper text when the field needs additional guidance.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-textarea--with-label" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-textarea--with-label&viewMode=story&globals=theme:light" title="Textarea with label story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With character limit

Show a character limit when input length is restricted—for example, comments, descriptions, or fields with API constraints—so users know how much space remains.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-textarea--with-character-limit" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-textarea--with-character-limit&viewMode=story&globals=theme:light" title="Textarea with character limit story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With error

Show an error state when the entered text fails validation—for example, a required field left empty, text that exceeds the limit, or content that does not meet format rules.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-textarea--with-error" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-textarea--with-error&viewMode=story&globals=theme:light" title="Textarea with error story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Disabled

Use a disabled Textarea when the content cannot be edited, and explain why in helper text or a tooltip so users know what must happen before they can enter text.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-textarea--disabled" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-textarea--disabled&viewMode=story&globals=theme:light" title="Textarea disabled story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>