Textarea

Multi-line text fields for notes, comments, and longer form input. Mark invalid when validation fails.

Examples

Default

Ghost

Invalid

Disabled

Overview

Textarea is a multi-line text control. The default variant uses surface, border, and focus-ring tokens. Ghost drops the border and fill for quiet fields. Both support an invalid state and native resize.

tsx

import { Textarea } from "@standard-ui/react"

<Textarea
  placeholder="Write a short note…"
  aria-label="Note"
/>

Usage

Variants

Variant	Use it for
default	Standard form fields — bordered surface with inset edge.
ghost	Quiet multi-line fields in dense chrome where a border adds noise.

tsx

<Textarea placeholder="Note" aria-label="Note" />
<Textarea
  variant="ghost"
  placeholder="Description…"
  aria-label="Description"
/>

Invalid

Set invalid when the value fails validation. Pair with helper or error text so users know how to fix it. aria-invalid is set automatically.

tsx

<Textarea invalid defaultValue="Too short" aria-label="Note" />

Disabled

Disabled textareas use reduced opacity and cursor-not-allowed. Prefer explaining why a field is unavailable instead of a silent disable.

tsx

<Textarea disabled placeholder="Unavailable" aria-label="Unavailable" />

API

Textarea accepts standard HTML textarea attributes plus visual variants.

Prop	Type	Default	Description
variant	"default" \| "ghost"	"default"	Visual style of the field.
invalid	boolean	false	Shows the invalid border.
disabled	boolean	false	Disables the textarea.
placeholder	string	—	Hint text when the field is empty.

Guidelines

Do

Always provide an accessible name via aria-label, aria-labelledby, or a wrapping label
Use invalid with visible error text, not color alone
Keep placeholders as hints — not as replacements for labels
Prefer textarea over input when users need more than one line

Don't

Don't rely on placeholder text as the only field label
Don't disable textareas without explaining why
Don't use invalid for non-error emphasis