Textarea

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/textarea

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components cn

Anatomy

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

<Textarea
  label="Address"
  description="Please enter your address"
/>

Examples

Description

You can add a description to the textarea by using the description prop.

Controlled

Pass value and update it with onChange to control the textarea.

Uncontrolled

Use defaultValue to set the initial text of an uncontrolled textarea.

Validation

Try submitting the form without filling it out to see the error state in action.

With autocomplete

You can add autocomplete to a textarea by wrapping it with the Autocomplete component. This is useful for tags, mentions, or similar input patterns.

Readonly

When the textarea is set to readonly, it cannot be edited.

Disabled

When the textarea is disabled, it becomes non-editable and appears inactive.

Component API

Textarea