/// Inputs

Textarea

Sunken multi-line text control, with an opt-in auto-resize that grows the field to fit its content.

import { Textarea } from "@protocore/pds";

View as Markdown

Basics

A multi-line sibling of Input for longer free text — descriptions, notes, incident reports. rows sets the initial height; the field scrolls once content overflows.

Incident description

Auto-resize

Set autoResize to grow the field with its content instead of scrolling. rows becomes the minimum height. Works with both controlled and uncontrolled values.

States

invalid paints the danger border and sets aria-invalid; native disabled mutes the control. Pair invalid with a Field error for the explanation.

When to use

Use Textarea whenever the input is more than a single line — commit messages, runbook notes, descriptions. Wrap it in a Field for the label and hint.

Turn on autoResize for composer-style inputs where a scrollbar would feel cramped; leave it off for fixed-height slots in dense forms.
For a single line of text, use Input instead — a one-row Textarea just invites accidental newlines.
For structured or code content, consider a dedicated editor rather than a raw Textarea.

Do & don't

Use Textarea for genuinely multi-line input.
Enable autoResize for composers and note fields so content stays visible.
Set a sensible rows minimum so the field doesn't start as a sliver.
Wrap it in a Field for its label, hint, and error wiring.

Don't

Don't use a one-row Textarea where an Input belongs.
Don't combine autoResize with a fixed height style — they fight.
Don't rely on the red border alone for invalid; add a Field error.
Don't drop the label; a bare Textarea is unnamed to assistive tech.

Accessibility

Renders a native `<textarea>`; label it via Field or a wrapping `<label>`.
`invalid` sets `aria-invalid`; pair it with Field's `error` text.
`autoResize` is a visual convenience only — it doesn't change semantics or value.
Respects the shared focus ring and accent focus border like every control.

`Textarea` props

Prop	Type	Default	Description
`autoResize`	`boolean`	—	Grow the field to fit its content instead of scrolling. Respects `rows` as the minimum.
`className`	`string`	—
`invalid`	`boolean`	—	Mark the field invalid — danger border plus `aria-invalid`.
`size`	`enum`	`md`	Control padding scale: `sm` · `md` (default) · `lg`.
`style`	`CSSProperties`	—