Textarea

Displays a form textarea for multi-line text input.

Installation

import { Textarea } from "@gradeui/ui"

Usage

Examples

With Label

Message

With Default Value

Disabled

With Character Limit

Bio

Max 200 characters

With Helper Text

Project Notes

Notes are only visible to you.

Props

Prop	Type	Default	Description
placeholder	string	-	Placeholder text displayed when empty.
disabled	boolean	false	Whether the textarea is disabled.
rows	number	-	Number of visible text lines.
className	string	-	Additional CSS classes.

Accessibility

Uses native <textarea> element
Always pair with a Label component for accessibility
Supports all standard textarea attributes
Focus ring visible for keyboard users

Sidecar

The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/textarea.md and shipped inside the published @gradeui/ui tarball.

---
name: Textarea
import: "@gradeui/ui"
props:
  - All native textarea HTML attrs (rows, value, onChange, placeholder, disabled)
when_to_use: Multi-line text entry (descriptions, messages, comments). Pair with a Label. Single-line input → use Input instead.
composes_with: [Label, Form, Card (in CardContent)]
aliases: [text area, multiline, comment box, message field, text editor, multi-line text, multiline input, multiline text field, comments box, multiline textinput]
---

```jsx
<Label htmlFor="bio">Bio</Label>
<Textarea id="bio" rows={4} placeholder="Tell us about yourself." />
```

Input

Label