Textarea
StableMulti-line text that grows with its content up to a maximum, with an optional character count. Give it a label prop or place it inside a Field.
Reviewers read this first. Say what changed and why.
Reviewers read this first. Say what changed and why.
When to use
Use it for
- Free text longer than one line: pull request summaries, release notes, review comments.
- showCount with maxLength when there is a hard limit.
Not for
- A short single value: use Input.
- Structured content (lists of tokens, key-value pairs): use dedicated fields.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Size it for the expected answer
rows sets the starting height; autosize grows it, so short boxes do not hide long answers.
Hiding the limit until it is hit
Show the count while typing so users can edit before the error.
Accessibility
- Native textarea through Base UI Field: label, description and error are wired for you.
- Focus shows a 2px signal edge; invalid sets aria-invalid and a danger edge with a text error.
- The visual counter is hidden from screen readers to avoid announcing every keystroke; maxLength is enforced natively.
- On touch screens the text is 17px so iOS does not zoom on focus.
Anatomy and tokens
Read from packages/react/src/components/Textarea/Textarea.module.css at build time. Every value is a token: open one to see its
alias chain in both themes.
- Container
.wrapper - Native textarea
.textarea - Native textarea, placeholder
.textarea::placeholder - Native textarea, hover
@media (hover: hover) .textarea:hover:not([data-disabled], [data-invalid], [aria-invalid="true"], :focus) - Native textarea
.textarea:focus - Native textarea
.textarea[data-invalid], .textarea[aria-invalid="true"] - Native textarea
.textarea[data-invalid]:focus, .textarea[aria-invalid="true"]:focus - Native textarea, disabled
.textarea:disabled - Native textarea, disabled
.textarea:read-only:not(:disabled) - Character count
.count - Native textarea
@media (pointer: coarse) .textarea
Props
Parsed from the TypeScript types in packages/react/src/components/Textarea/Textarea.tsx, so this table cannot drift from the
code.
It also accepts every native <HTMLTextAreaElement> attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | none | Visible label. When set, the Textarea wraps itself in a Field. Leave unset inside a Field. |
hint | ReactNode | none | Helper text under the label. |
error | ReactNode | none | Error message. Marks the textarea invalid and announces the message. |
rows | number | 3 | Minimum visible lines. Default 3. |
maxRows | number | 12 | Grow with the content up to this many lines, then scroll. Default 12. |
autosize | boolean | true | Grow with the content. Default true. When false the user can resize vertically. |
showCount | boolean | false | Show "used / maxLength" under the field. Needs maxLength. |
hideLabel | boolean | none | Visually hide the Field label. Only with `label`. |
onValueChange | (value: string) => void | none | Called with the new string value on every change. |
Playground
Change the props and see the real Textarea update. Controls are generated from the TypeScript props; nothing here changes the system.
Reviewers read this first. Say what changed and why.
<Textarea label="Change summary" hint="Reviewers read this first. Say what changed and why." />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Textarea in Storybook) .
Embed Storybook stories here (5)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay
empty.
Default
WithCount
Invalid
Resizable
AllStates
Changelog
- New
Forms: Field (label, description, error wired by Base UI Field) and Input rebuilt on it (prefix, suffix, sizes; label, hint and error props kept). New Textarea (autosize, character count), Select (groups, descriptions), Combobox (filtering, async loading and empty states, multiple with chips), Checkbox (indeterminate, parent), CheckboxGroup, RadioGroup, Switch, Slider (single and range), NumberField (steppers, units) and Form (server errors with a focusable error summary, FormActions footer).
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026