When to use
Use for free-text content that exceeds one line
Descriptions, comments, notes, addresses, bios, email body composition.
Wrap in a Field for label + error display
Same as Input — never render Textarea bare in a form.
Set a sensible rows count for the expected content length
Don't default to 10+ rows for short notes. Match the visible size to the typical input length.
Don't use for single-line input
Names, emails, search queries → Input.
Don't use for rich text
Bold, lists, links, etc. → use a dedicated rich-text editor (not part of @marmoui/ui). Plain text only here.
Don't use for code editing
Use a code editor component (Monaco, CodeMirror, etc.). Textarea has no syntax highlighting or indent handling.
Choosing the right alternative
| You want… | Use this |
|---|---|
| Single-line text (name, email, URL) | Input |
| Rich text (bold, lists, links) | A dedicated rich-text editor — not in @marmoui/ui |
| Code editing with syntax highlighting | A code editor component (CodeMirror / Monaco) |
| Multi-value tag entry | TagsInput |
| Markdown editing with preview | A Markdown editor — not in @marmoui/ui |
| Numeric input | NumberInput |
Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Textarea } from '@marmoui/ui';Examples
Basic Textarea
Default Textarea
Simple multi-line text input
<Textarea placeholder="Enter your message..." />With Label and Helper
With Context
Textarea within a form field with label and helper text
Maximum 500 characters
<div className="flex flex-col gap-1.5">
<label className="text-sm font-medium text-ink-dark">Description</label>
<Textarea placeholder="Describe your campaign..." rows={4} />
<p className="text-xs text-ink-light">Maximum 500 characters</p>
</div>Disabled
Disabled State
Textarea that is not editable
<Textarea disabled value="This content cannot be edited" />Best Practices
Set appropriate height
Use the rows prop to set a reasonable default height based on expected content length.
Provide placeholder guidance
Use placeholder text to hint at the expected format or content type.
Don't use for single-line input
Use the Input component for short, single-line values like names or emails.
Don't hide character limits
If there's a max length, show remaining characters to prevent frustration.
Props
Props
Accessibility
- Associates with labels via
idandhtmlForattributes. - Supports
aria-describedbyfor helper and error text. - Standard keyboard navigation: Tab to focus, type to enter text.
- Ensure visible focus indicators are present.