Textarea
Default
With rows
Disabled
A disabled field keeps its text readable: dim text on a muted fill, with the control outline, and no fade.
Inside a Field
Free-form text. Max 2000 chars.
Props
| PROP | TYPE | DEFAULT | REQUIRED |
|---|---|---|---|
rows | number | 4 | no |
value | string | — | no |
defaultValue | string | — | no |
placeholder | string | — | no |
disabled | boolean | false | no |
required | boolean | false | no |
invalidOverride Field's invalid state. | boolean | — | no |
name | string | — | no |
Accessibility
- Native
textareasemantics; inheritsid,aria-describedby,aria-invalid, andrequiredfrom Field. invalidwins overaria-invalid, and what is announced matches the border drawn.- The field outline is the control outline (
--oprt-border-control, 3:1 or more). - Native resizing is disabled.
Manifest entry
<Field label="MISSION NOTES" help="Free-form text.">
<Textarea placeholder="ENTER NOTES..." />
</Field>View agent manifest
{
"description": "Multi-line text input. Fixed rows (default 4); scroll on overflow. No native resize handle (rounded grip violates radius rule).",
"props": {
"rows": {
"type": "number",
"default": 4
},
"value": {
"type": "string"
},
"defaultValue": {
"type": "string"
},
"placeholder": {
"type": "string"
},
"disabled": {
"type": "boolean",
"default": false
},
"required": {
"type": "boolean",
"default": false
},
"invalid": {
"type": "boolean",
"description": "Override Field's invalid state."
},
"name": {
"type": "string"
}
},
"composable_with": [
"Field"
],
"never_inside": [
"Button",
"Badge"
],
"example": "<Field label=\"MISSION NOTES\" help=\"Free-form text.\">\n <Textarea placeholder=\"ENTER NOTES...\" />\n</Field>"
}