Primitives
TextArea
A multi-line text field sized in rows
Plain text only.
Release notes cannot be empty.
Usage
import { Label, TextArea, labelledBy } from "@gpuixui/primitives";
const notes = "Description";
const help = "Markdown is not interpreted.";
<Label description={help}>{notes}</Label>
<TextArea
{...labelledBy(notes)}
description={help}
value={value}
onValueChange={setValue}
minRows={3}
maxRows={8}
fullWidth
/>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
minRows | number | runtime default | visible floor, in whole rows: a fraction floors, an unusable count reads as one, and a saved value that is not a number (JSON's null, text) leaves the runtime's own height |
maxRows | number | runtime default | rows after which the field scrolls, in whole rows: a fraction floors, an unusable count reads as one, a saved value that is not a number leaves the runtime's own height (a cap read as one row collapsed a restored six-line field), and a cap below minRows is raised to it |
value | string | — | controlled text |
defaultValue | string | "" | initial text when uncontrolled |
onValueChange | (value: string) => void | none | called after each edit |
onChange | (value: string) => void | none | deprecated alias for onValueChange |
placeholder | string | none | empty-state text: painted in the placeholder role and announced as the field's description while the box is empty (the host's own hint is a fixed grey no theme reaches) |
readOnly | boolean | false | accepts focus, refuses edits |
disabled | boolean | false | read-only, out of the tab order |
invalid | boolean | false | border and focus ring take the destructive role |
autoFocus | boolean | false | takes focus on mount |
size | "sm" | "md" | "lg" | "md" | row padding from density (a textarea's height is its rows) |
fullWidth | boolean | false | width: 100% |
label | string | none | accessible name |
description | string | none | announced help (aria-description); a caller's permanent help wins over the hint |
tabIndex | number | none | the field's place in the tab order; a disabled field sits at -1 |
ref / aria-id / onLayout | host props | none | the native <textarea> is the addressed element |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the field's own; yours runs first |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StateStyle<FieldState> | — | resolved against the live state, merged last |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/textarea.mdx