Theme
Text area
Several lines of text. It grows with what is typed (field-sizing: content), with no script measuring it.
Examples
Up to twenty lines show before it scrolls.
Props
TextArea
Several lines of text. It grows with what is typed, up to twenty lines, then scrolls.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`. |
description? | ReactNode | — | Help shown under the field and read with it. |
errorMessage? | ReactNode | ((validation: ValidationResult) => ReactNode) | — | Shown when the field is invalid; defaults to the browser's validation message. |
placeholder? | string | — |
Also takes 118 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Accessibility
- The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
- Invalid fields are marked aria-invalid, and the error is announced when it appears.
- The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.
Browser support
field-sizing: content is in Chromium-based browsers; Safari and Firefox keep the minimum height and the area scrolls and can be resized by hand.