Textarea

Displays a form textarea or a component that looks like a textarea.

Installation


pnpm dlx shadcn@latest add @force-ui-ember/textarea

import { Textarea } from '@/ui/textarea';

<Textarea />

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

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

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

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

Use the @variant prop to change the visual style of the textarea.

To enable RTL support in Force UI, see the RTL configuration guide.

The Textarea component displays a multi-line text input field.

Prop	Type	Default
`@variant`	`"outline" \| "filled" \| "underline" \| "ghost"`	`"outline"`
`@class`	`string`	-

On This Page

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.