Components
Textarea
Displays a form textarea or a component that looks like a textarea. Use it for multi-line text such as messages, comments, and descriptions.
Preview
Rendered with live Cognition tokens — surface, border, and focus ring remap on theme change, no dark: classes. It matches the Input field, just multi-line.
States
<Textarea placeholder="Type your message here" /><Textarea aria-invalid defaultValue="Too short" /><Textarea disabled placeholder="Type your message here" />Invalid styling keys off the native aria-invalid attribute, so it stays in sync with form validation.
API
Prop
Type
Default
Description
placeholder
string
undefined
Hint shown while the field is empty.
rows
number
undefined
Visible line count before it scrolls.
value / defaultValue
string
undefined
Controlled / uncontrolled value.
disabled
boolean
false
Dims and blocks input.
...props
TextareaHTMLAttributes
—
All native textarea attributes pass through.
Don't and Do
Don't
Don't use a Textarea for a single line of input — that's an Input. And don't hardcode border-gray-300; the variant is token-driven.
Do
<label htmlFor="bio">Bio</label>
<Textarea id="bio" rows={4} />import { Textarea } from "@/components/ui/textarea";
export function Message() {
return <Textarea placeholder="Type your message here" rows={4} />;
}Drop-in ready. It spreads every native textarea prop (rows, value, onChange, …).