Textarea

<ComponentPreview styleName="radix-nova" name="textarea-demo" previewClassName="*:max-w-xs" />

Installation

npx shadcn@latest add textarea

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="textarea" title="components/ui/textarea.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

Usage

import { Textarea } from "@/components/ui/textarea"

<Textarea />

Examples

Field

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

<ComponentPreview styleName="radix-nova" name="textarea-field" previewClassName="*:max-w-xs" />

Disabled

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

<ComponentPreview styleName="radix-nova" name="textarea-disabled" previewClassName="*:max-w-xs" />

Invalid

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

<ComponentPreview styleName="radix-nova" name="textarea-invalid" previewClassName="*:max-w-xs" />

Button

Pair with Button to create a textarea with a submit button.

<ComponentPreview styleName="radix-nova" name="textarea-button" previewClassName="*:max-w-xs" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.