Textarea

Basic

A textarea is a larger box where you can type in text, like your name, email, or a longer message.

Installation

npx shadcn@latest add @intentui/textarea

Composed components

Manual installation

npm i react-aria-components

Anatomy

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

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

Description

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

Controlled

You can control the textarea value by using the value prop.

Uncontrolled

You can control the textarea value by using the defaultValue prop.

Validation

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

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.