Textarea
textareaCollects multiline text in an auto-sizing field.
Usage
Basic usage
For multi-line input, rows controls the initial number of visible lines (default 3).
<Textarea placeholder="Write something..." className="w-64" />Dimensions
size provides three levels of sm / md (default) / lg.
<>
<Textarea size="sm" placeholder="sm" className="w-64" />
<Textarea size="md" placeholder="md" className="w-64" />
<Textarea size="lg" placeholder="lg" className="w-64" />
</>Adaptive height
autoResize automatically grows in height according to the content, and rows is used as the lower limit.
<Textarea autoResize defaultValue={"Grow taller with the content\n second line\n third line"} className="w-64" />Invalid state
invalid marked with red border and focus ring (manual transmission when used independently).
<Textarea invalid defaultValue="Wrong content" className="w-64" />Disabled
disabled Reduce transparency and block interaction.
<Textarea disabled defaultValue="Disabled" className="w-64" />When to use
Use Textarea for multiline notes, descriptions, or messages. Use Input for one line, or Select for a fixed option. Enable autoResize to grow with content while treating rows as the minimum height. Inside HulianUI Field, label, error, and ARIA associations are inherited automatically.
Import
import { Textarea, textareaVariants } from "@hulianui/ui"Props
Inherit the native <textarea> properties (except size is overwritten, such as value/onChange/rows/placeholder/disabled…).
| Name | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Size (CVA variant, overrides native size) |
| invalid | boolean | false | Marked red when used independently; automatically driven by Field.Root invalid in hulian Field |
| autoResize | boolean | false | Adapt height according to content (JS scrollHeight, rows is the lower limit) |
| rows | number | 3 | Initial/minimum row height |
| disabled | boolean | false | Disable |
Events
| Event | Type | Description |
|---|---|---|
| onChange | (e: ChangeEvent<HTMLTextAreaElement>) => void | Transparently transmit native input callback (used with value when controlled) |
Example
<Textarea placeholder="Write something…" className="w-64" />{/* Adaptive height */}
<Textarea autoResize defaultValue={"Grows with content\nSecond line\nThird line"} className="w-64" />Usage guidelines
- See [[base-ui-field-control-render-textarea-type-safe]] when extending a Field-aware Textarea. Base UI Field has no Textarea primitive, so textarea-specific props such as
ref,rows, andonInputbelong on therenderelement rather thanField.Control; otherwise TypeScript rejects the ref or Field accessibility wiring is silently lost. - Do not repeat
invalidinside HulianUI Field; Field.Root drives it automatically.
Related
Playground
<Textarea size="md" placeholder="Write something..." rows={3} />