Components

Textarea

A multiline text input component with density-aware sizing, focus glow, and accessibility features.

Preview

Installation

npx blackboard-ui@latest add textarea

Usage

import { Textarea } from "@/components/ui/textarea";

export default function Example() {
  return <Textarea placeholder="Type your message here." />;
}

Examples

Sizes

Use the size prop to control the min-height, padding, and font size.

<Textarea size="sm" placeholder="Small" />
<Textarea placeholder="Default" />
<Textarea size="lg" placeholder="Large" />

With Label

Pair with Field, FieldLabel, and FieldDescription for accessible form fields.

Bio

Max 500 characters.

<Field>
  <FieldLabel htmlFor="bio">Bio</FieldLabel>
  <Textarea id="bio" placeholder="Tell us about yourself" />
  <FieldDescription>Max 500 characters.</FieldDescription>
</Field>

Disabled

Use the disabled prop to disable the textarea.

<Textarea placeholder="This textarea is disabled" disabled />

Invalid

Wrap with Field using data-invalid and aria-invalid on the textarea. Labels and errors cascade to destructive styling.

Feedback

Feedback must be at least 20 characters.

<Field data-invalid>
  <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
  <Textarea aria-invalid="true" defaultValue="hi" />
  <FieldError>Feedback must be at least 20 characters.</FieldError>
</Field>

API Reference

Textarea

Prop	Type	Default
size	"default" \| "sm" \| "lg"	"default"
placeholder	string	—
disabled	boolean	false
className	string	—

Also accepts all standard HTMLTextAreaElement attributes (onChange, value, rows, etc.).