Textarea
Multi-line text with the shared control chrome and a real resize contract.
@luc/ui/components/textareaExamples
Multi-line text
The same shell as `Input`, so hover, focus, invalid and disabled look identical across the family.
<Textarea
rows={3}
placeholder="Notes for this run"
defaultValue="Rebalance moved into the close."
aria-label="Run notes"
/>Three sizes
A size sets the text and padding scale; `rows` decides how much is visible before it scrolls.
<Textarea rows={3} size="sm" placeholder="Compact" aria-label="Small textarea" />Auto-resize
`autoResize` uses `field-sizing: content` where the browser supports it and falls back to a comfortable fixed minimum, so the caller never has to measure.
<Textarea
rows={2}
autoResize
defaultValue="This field grows with its content instead of scrolling."
aria-label="Auto-resizing notes"
/>Read-only, disabled and invalid
Read-only keeps the text selectable and copyable and draws the dashed treatment; `disabled` takes it out of the tab order, and `invalid` marks what the form refused.
<Textarea
rows={2}
readOnly
defaultValue="Imported from the archived spec."
aria-label="Read-only notes"
/>Usage
import { Textarea } from "@luc/ui/components/textarea";<Textarea rows={3} placeholder="Notes for this run" aria-label="Run notes" />Package setup — peer requirements, the stylesheet and the provider — is on installation.
API
Read from the published TypeScript API, so a prop that is not listed here does not exist and a default that is listed is the one the compiler sees.
| Export | Kind | Signature |
|---|---|---|
Textarea | 3 documented props | ({ className, size, invalid, autoResize, id, required, disabled, readOnly, rows, ...props }: TextareaProps) => import("@types/react").JSX.Element |
Textarea props
Type: TextareaProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
autoResize? | boolean | undefined | — | Grow with content instead of scrolling. Uses `field-sizing: content` where supported and falls back to a comfortable fixed minimum height. |
invalid? | boolean | undefined | — | |
size? | ControlSize | undefined | — |
Guidelines
Do
- Set `rows` for how much is visible at rest and let the field scroll beyond it; `autoResize` when the text is the content.
- Use `size` for the density of the row, exactly as `Input` does — they share one shell.
- Reach for `readOnly` when the text must stay selectable and copyable.
Don't
- Fight the browser's own resize handle with CSS: a reader who resizes a textarea is telling you the field was too small.
- Use a textarea for a single line of structured input — the field's own `Input` is the one that validates it.
- Set `autoResize` on a field that must not grow inside a fixed-height panel.
Accessibility
The element is a real `<textarea>`, so its label, description and message come from `Field`. `readOnly` keeps the text selectable and copyable and draws the dashed treatment; `disabled` removes it from the tab order, which is why a value a reader may still need is read-only rather than disabled.
Family
Forms
Inputs, their validation surfaces and the form lifecycle around them.
24 documented entries in this family. Open the family index
Related