---
title: "Textarea"
description: "A multi-line text field wired to its label, hint, and error text."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/textarea"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/textarea.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Textarea

A multi-line text field wired to its label, hint, and error text.

```tsx
import { Textarea } from "@sanity/sanity-id/components/textarea"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `id` | `string` | yes | — | Unique textarea ID; connects the textarea to its label element |
| `error` | `ReactNode` | no | — | Error message displayed below the textarea |
| `hint` | `ReactNode` | no | — | Hint text displayed below the label |
| `label` | `ReactNode` | no | — | Label displayed above the textarea |

Also accepts every prop of `ComponentProps<"textarea">`.

## Usage

```tsx
import { Textarea } from "@sanity/sanity-id/components/textarea"

export default () => {
	return (
		<div className="flex flex-col gap-32 max-w-md">
			<Textarea id="textarea-example-1" />
			<Textarea
				id="textarea-example-2"
				placeholder="Textarea with placeholder"
			/>
			<Textarea
				id="textarea-example-3"
				label="Textarea with label"
				required
			/>
			<Textarea
				id="textarea-example-4"
				label="Optional textarea with label"
			/>
			<Textarea
				id="textarea-example-5"
				label="Textarea with long label. Velit excepteur sint nulla est dolore reprehenderit officia sint velit dolor"
			/>
			<Textarea
				id="textarea-example-6"
				label="Textarea with hint"
				hint="Laboris cupidatat in cupidatat incididunt"
				required
			/>
			<Textarea
				id="textarea-example-7"
				label="Textarea with long hint"
				hint="Consectetur elit irure non nulla mollit qui officia proident nostrud non aliqua. Ullamco quis deserunt ut enim deserunt do in mollit est est ea."
				required
			/>
			<Textarea
				id="textarea-example-8"
				label="Textarea with error"
				error="Enim sunt fugiat nostrud amet cupidatat"
				required
			/>
			<Textarea
				id="textarea-example-9"
				label="Textarea with long error"
				error="Do dolore culpa incididunt aute commodo cupidatat proident ea ipsum laborum aute amet elit. Dolore ipsum exercitation sit mollit occaecat amet duis sint consequat aute elit."
				required
			/>
		</div>
	)
}
```