Components
Textarea
Several lines of text: messages, notes, descriptions.
Preview
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add textareaExamples
States
Disabled, and with an error.
Add a few words, so the team knows what this is about.
Props
The ones that change how it looks or behaves. The rest are the HTML element's own.
| Prop | Type | Default |
|---|---|---|
| rows | number | – |
| aria-invalid | boolean | false |
Guidelines
Use it
- Text that can run past one line.
- A label, like every field.
Don't
- Use it for a single value like a name or an email.
Used in
The screens in this Base that show it, found in the code.
Accessibility
- Tie it to its label with htmlFor and id.