Textarea
Multi-line text field using the same Control shell as Input, but resizable.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled value. |
onChange | ChangeEventHandler<HTMLTextAreaElement> | — | Change handler. |
rows | number | — | Number of visible text rows. |
placeholder | string | — | Placeholder text when empty. |
noResize | boolean | — | Disables manual resizing (default allows vertical). |
mono | boolean | — | Monospace font. |
invalid | boolean | — | Invalid styling. Defaults to the enclosing Field error state. |
disabled | boolean | — | Prevents interaction. |
readOnly | boolean | — | Non-editable but focusable. |
containerClassName | string | — | Targets the shell; className targets the <textarea>. |
Usage
Textarea shares the same Control shell as Input, so border, background, focus ring, and disabled treatment are visually identical. The textarea itself is vertically resizable by default; use noResize to lock it.
Basic
With rows
No resize
Mono
import { Textarea } from "@solarius/onset";
import type { TextareaProps } from "@solarius/onset";
<Textarea placeholder="Write your message..." />
<Textarea rows={8} noResize />
<Textarea mono defaultValue="code here" />