form · Normal DOM only

Textarea

Multi-line text entry — same chrome as Input, vertical resize handle, focus ring.

Use Textarea when the value is more than a sentence (notes, descriptions, internal comments). For short labels use Input; for rich content (links, formatting, mentions) reach for a dedicated rich-text editor.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Textarea } from '@8maverik8/twenty-design';

Examples

Basic

Markdown supported.
tsx
<Field label="Description" hint="Markdown supported.">
  {({ id }) => <Textarea id={id} fullWidth rows={4} placeholder="Tell us about this deal…" />}
</Field>

Invalid & disabled

tsx
<Textarea invalid rows={3} defaultValue="Required" />
<Textarea disabled rows={3} defaultValue="Locked notes" />

Guidelines

✓
Pick rows so the empty state shows three lines minimum.A one-line textarea feels like an Input and confuses users about how much to write.
✓
Allow vertical resize — power users will pull it down when pasting.Locking resize makes long content harder to review while typing.
✕
Use Textarea for inline editing inside a table cell.Cells should grow with the content via a contenteditable or a popover Input — a textarea baked into a row breaks alignment.