<Textarea placeholder="Comment..." />Examples
Variants
Use the variant prop to change the appearance of the textarea.
<div className="flex flex-col gap-2">
<Textarea variant="subtle" placeholder="Subtle" />
<Textarea variant="outline" placeholder="Outline" />
</div>Sizes
Use the size prop to change the size of the input.
<div className="flex flex-col gap-2">
<Textarea placeholder="size (xs)" size="xs" />
<Textarea placeholder="size (sm)" size="sm" />
<Textarea placeholder="size (md)" size="md" />
<Textarea placeholder="size (lg)" size="lg" />
<Textarea placeholder="size (xl)" size="xl" />
</div>Helper Text
Pair the textarea with the Field component to add helper text.
Max 500 characters.
Max 500 characters.
<div className="flex gap-10">
<Field required label="Comment" helperText="Max 500 characters.">
<Textarea placeholder="Start typing..." />
</Field>
<Field required label="Comment" helperText="Max 500 characters.">
<Textarea placeholder="Start typing..." variant="outline" />
</Field>
</div>Error Text
Pair the textarea with the Field component to add error text.
Field is required.
Field is required.
<div className="flex gap-10">
<Field invalid label="Comment" helperText="Field is required.">
<Textarea placeholder="Start typing..." />
</Field>
<Field invalid label="Comment" helperText="Field is required.">
<Textarea placeholder="Start typing..." variant="outline" />
</Field>
</div>Field
Compose the textarea with the Field component to add a label, helper text, and error text.
<div className="flex gap-10">
<Field required label="Email">
<Input placeholder="me@example.com" />
</Field>
<Field required label="Email">
<Input placeholder="me@example.com" variant="outline" />
</Field>
</div>Disabled
Use the disabled prop to disable the textarea.
<Textarea disabled placeholder="disabled" />