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

# TextArea

> A multi-line text input with optional label, helper/error text, and clear button.

```tsx theme={null}
import { TextArea } from "@fanvue/ui";
import type { TextAreaProps, TextAreaSize } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-textarea--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TextArea — Default" />
</Frame>

```tsx theme={null}
import { TextArea } from "@fanvue/ui";

<TextArea label="Label" placeholder="Text Area" />
```

## Error Without Message

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-textarea--error-without-message&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TextArea — Error Without Message" />
</Frame>

```tsx theme={null}
import { TextArea } from "@fanvue/ui";

<TextArea
  label="Description"
  placeholder="Enter your description..."
  error
  helperText="This field is required"
  defaultValue=""
/>
```

## Without Label

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-textarea--without-label&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TextArea — Without Label" />
</Frame>

```tsx theme={null}
import { TextArea } from "@fanvue/ui";

<TextArea placeholder="No label" aria-label="Description" />
```

## All States

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-textarea--all-states&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TextArea — All States" />
</Frame>

```tsx theme={null}
import { TextArea } from "@fanvue/ui";

<div className="flex w-[375px] flex-col gap-6">
  <TextArea label="Default" placeholder="Text Area" />
  <TextArea label="With helper" placeholder="Text Area" helperText="Helper text" />
  <TextArea label="With value" defaultValue="Typed text" />
  <TextArea label="With clear button" showClearButton defaultValue="This can be cleared" />
  <TextArea label="With min rows" minRows={4} placeholder="Starts with 4 rows" />
  <TextArea label="Error" error errorMessage="Error message" defaultValue="invalid" />
  <TextArea label="Disabled" placeholder="Text Area" disabled />
  <TextArea label="Disabled with value" defaultValue="Value" disabled />
</div>
```

## Full Width

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-textarea--full-width&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="TextArea — Full Width" />
</Frame>

```tsx theme={null}
import { TextArea } from "@fanvue/ui";

<TextArea
  label="Full Width"
  placeholder="This field spans the full width"
  fullWidth
/>
```

## Props

## TextArea

A multi-line text input with optional label, helper/error text, and clear button.

Provide at least one of `label`, `aria-label`, or `aria-labelledby` for accessibility — a console warning is emitted in development if none are set.

<ParamField path="error" type="boolean" default="false">
  Whether the text area is in an error state.
</ParamField>

<ParamField path="errorMessage" type="string">
  Error message displayed below the textarea. Shown instead of `helperText` when `error` is `true`.
</ParamField>

<ParamField path="fullWidth" type="boolean" default="false">
  Whether the text area stretches to fill its container width.
</ParamField>

<ParamField path="helperText" type="string">
  Helper text displayed below the textarea. Replaced by `errorMessage` when `error` is `true`.
</ParamField>

<ParamField path="label" type="string">
  Label text displayed above the textarea. Also used as the accessible name.
</ParamField>

<ParamField path="maxRows" type="number">
  Maximum number of rows (lines) for the textarea.
</ParamField>

<ParamField path="minRows" type="number">
  Minimum number of rows (lines) for the textarea.
</ParamField>

<ParamField path="onClear" type="(() => void)">
  Callback fired when the clear button is clicked. Note: `onChange` is also called with an empty value when clearing.
</ParamField>

<ParamField path="resizable" type="boolean" default="false">
  Whether the textarea can be resized by the user.
</ParamField>

<ParamField path="showClearButton" type="boolean" default="false">
  Whether to show a clear button when text is present.
</ParamField>

<ParamField path="size" type="&#x22;32&#x22; | &#x22;40&#x22; | &#x22;48&#x22;" default="48">
  Minimum height of the text area in pixels.
</ParamField>

<ParamField path="validated" type="boolean" default="false">
  Whether the text area is validated.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `TextAreaProps`, `TextAreaSize`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)