ComponentsFields
Textarea
A Textarea allows users to enter several lines of text and grows as they type.
When to Use
- for text that runs to several lines, such as a note for a client
- for a form of one value, with a Button under it, such as “Add note”
When Not to Use
- for a value that fits on one line (use an Input)
- for Buttons or a character count inside the edge, as in a message box (use an Input Group with
InputGroupTextarea)
Behavior
By default, a Textarea fits two lines of text and grows with every further line. It has no maximum height, so set max-h-* to limit it. The text then scrolls inside the Textarea.
rows doesn’t set the height. To set the starting height, use min-h-*.
Accessibility
A Textarea renders a native textarea element, so the browser provides its role and its keys. To add a label, a description, and an error to a Textarea, use a Field.
A Textarea needs a name so that screen readers can announce it, as WCAG 2.2 SC 4.1.2 Name, Role, Value requires. To provide one, place it in a Field with a
FieldLabel, connect a Label to its id with htmlFor, or set aria-label.Installation
npx shadcn@latest add @summit/textareaUsage
import { Textarea } from '@/components/ui/textarea';
<Textarea placeholder="Add a note for the client" aria-label="Note" />;Set the Height
To set the height at which a Textarea starts, use min-h-*. To set the height at which it stops growing and scrolls, use max-h-*.
<Textarea aria-label="Note" className="max-h-64 min-h-32" />API Reference
Textarea adds no props. Its props are passed to the textarea element.