Textarea

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

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

Props

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

Textarea props
PropTypeDescription
id (required)string

Unique textarea ID; connects the textarea to its label element

errorReactNode

Error message displayed below the textarea

hintReactNode

Hint text displayed below the label

labelReactNode

Label displayed above the textarea

Required.

Usage

Laboris cupidatat in cupidatat incididunt

Consectetur elit irure non nulla mollit qui officia proident nostrud non aliqua. Ullamco quis deserunt ut enim deserunt do in mollit est est ea.

Enim sunt fugiat nostrud amet cupidatat

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.

1import { Textarea } from "@sanity/sanity-id/components/textarea"
2
3export default () => {
4        return (
5          <div className="flex flex-col gap-32 max-w-md">
6            <Textarea id="textarea-example-1" />
7            <Textarea
8              id="textarea-example-2"
9              placeholder="Textarea with placeholder"
10            />
11            <Textarea
12              id="textarea-example-3"
13              label="Textarea with label"
14              required
15            />
16            <Textarea
17              id="textarea-example-4"
18              label="Optional textarea with label"
19            />
20            <Textarea
21              id="textarea-example-5"
22              label="Textarea with long label. Velit excepteur sint nulla est dolore reprehenderit officia sint velit dolor"
23            />
24            <Textarea
25              id="textarea-example-6"
26              label="Textarea with hint"
27              hint="Laboris cupidatat in cupidatat incididunt"
28              required
29            />
30            <Textarea
31              id="textarea-example-7"
32              label="Textarea with long hint"
33              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."
34              required
35            />
36            <Textarea
37              id="textarea-example-8"
38              label="Textarea with error"
39              error="Enim sunt fugiat nostrud amet cupidatat"
40              required
41            />
42            <Textarea
43              id="textarea-example-9"
44              label="Textarea with long error"
45              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."
46              required
47            />
48          </div>
49        )
50      }