FormsStable

Textarea

Sourcecomponents/Textarea.astro

Multi-line

Same field styling as Input, taller and resizable. Drag the bottom-right corner to grow it.

Resizes vertically

Tell us about your project

A sentence or two is plenty.

Default, filled, error and disabled — the box carries the same states as the Input.

Default

Filled

Error

Tell us a little more.

Disabled

White treatment for dark sections — surface="dark".

surface="dark"

Message

Prop	Type	Default	Notes
`label`	string	`—`	Field label above the box.
`placeholder`	string	`—`	Ghost text when empty.
`value`	string	`—`	Prefilled content.
`rows`	number	`4`	Starting height in text rows.
`helper`	string	`—`	Optional hint beneath the box.
`error`	string	`—`	Error message; flips to the error style.
`optional`	boolean	`false`	Shows "(optional)" beside the label.
`required`	boolean	`false`	Marks the field required.
`disabled`	boolean	`false`	Dims and blocks input.
`surface`	'light' \| 'dark'	`'light'`	Dark surface treatment.

Use it only for genuinely long input — a message, a brief. For anything single-line, use Input.

<Textarea
  name="message"
  label="Tell us about your project"
  placeholder="What are you building?"
  rows={4}
  required
/>

Size rows to the expected answer — 3–4 for a short brief.

Leave vertical resize on so people can expand as they write.

Don't

Use a Textarea for a name, email or one-liner — that's Input.

Let it resize horizontally — it breaks the form’s column.