Textarea
A multi-line text box that grows with what's typed.
<Textarea aria-label="Message" placeholder="Type your message here." />Installation
$ npx shadcn@latest add @constella/textareaUsage
import { Textarea } from "@/components/primitives/textarea";<Textarea />Size
Use the size prop to match the controls beside it. The text is 12px at sm and 13px otherwise, and 16px on a touch screen, so iOS doesn't zoom on focus.
<Textarea size="sm" />| Size | Minimum height | Text |
|---|---|---|
sm | 56px | 13px |
default | 64px | 14px |
lg | 72px | 14px |
Disabled
Use the disabled prop on Field to disable the textarea and dim its label. On a bare textarea, use disabled on the textarea.
<Field disabled> <FieldLabel>Message</FieldLabel> <Textarea placeholder="Type your message here." /></Field>Invalid
Use the invalid prop on Field to mark the textarea. On a bare textarea, add aria-invalid.
Please enter a valid message.
<Field invalid> <FieldLabel>Message</FieldLabel> <Textarea placeholder="Type your message here." /> <FieldDescription>Please enter a valid message.</FieldDescription></Field>Button
Pair with Button to send what's typed.
const styles = stylex.create({ stack: { display: "grid", gap: space.xs },});
<div {...stylex.props(styles.stack)}> <Textarea aria-label="Message" placeholder="Type your message here." /> <Button variant="primary">Send message</Button></div>;Field
Use Field, FieldLabel and FieldDescription to give the textarea a label and helper text. They link to it on their own, so no id or htmlFor is needed.
Enter your message below.
<Field> <FieldLabel>Message</FieldLabel> <FieldDescription>Enter your message below.</FieldDescription> <Textarea placeholder="Type your message here." /></Field>API Reference
Textarea renders Base UI's Field.Control as a <textarea>, so inside a Field it takes the field's name, state and validation. It starts two rows tall and grows with its content; set rows for a taller start. It takes size and sx, applied last.