Skip to content
Components

Textarea

Renders a textarea element for multi-line text input (Base UI Field.Control rendering a <textarea>). Inside a Field it is the field's control: the FieldLabel targets it, FieldDescription/FieldError describe it, and it inherits the field's invalid state.

Usage

import { Textarea } from "@instruments/materia-ui/components/textarea";

Best practices

  • Inside a Field, let invalid state cascade like Input - omit hasError; pass it only to force error styling on a standalone Textarea.

  • It auto-grows with content (field-sizing-content); set rows for a minimum height in lines rather than pinning height via CSS.

  • Give it a label - inside a Field a FieldLabel targets it with no ids to wire; standalone, point a Label's htmlFor at its id. A placeholder is not an accessible name.

Props

PropTypeDefaultDescription
hasErrorboolean

Force error styling and aria-invalid; otherwise inherits an ancestor Field's invalid state.

testIdstring

Composition

Builds on

Field

Used by

InputGroup