Textarea
Multi-line text field with label and validation messaging.
Add it to your project
Eject the complete textarea group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject textareabash
npx toucan eject textareaapp.tsx
import { Textarea } from '@/components/toucan/textarea';Use when
Users enter free-form text that may span multiple lines.
Avoid when
The expected value is short and single-line.
Example
Optional field
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Textarea
Textarea
Props type: TextareaProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
description | string | undefined | No | Supporting text connected to the control. |
error | string | undefined | No | Validation error text or error state. |
hideLabel | boolean | undefined | No | Visually hide the label while keeping it available to assistive technology. |
label | string | undefined | No | Visible or accessible label for the control. |
required | boolean | undefined | No | Marks the control as required. |
resize | "none" | "both" | "horizontal" | "vertical" | 'vertical' | No | Allowed browser resize direction for the textarea. |
Also accepts the native children or textarea attributes that are not replaced by a Toucan prop.
Type exports
TextareaProps
Accessibility
- Labels, descriptions, required state, and errors are connected to the textarea.
Token families
textareafocus