Textarea

Multi-line text input with adjustable height and accessible states.

Message

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add textarea

What add textarea installs alongside the component. The CLI skips any you already have in a compatible version.

3 examples · 1 component

Linked label, help text and error. Try submitting the empty field.

Reference

Keeps the content and the control's native semantics.

Reference

ZUNO project

Keeps the content and the control's native semantics.

Keeps the props, events and refs of the matching Base UI primitive, plus ZUNO's styles.

Prop	Type	Default
`rows` Initial height in lines; can be resized vertically.	`number`	`4`
`value / defaultValue` Controlled value or initial value.	`string`	—
`onValueChange` Receives the updated text.	`(value, eventDetails) => void`	—
`disabled / readOnly` Disables editing or makes the textarea read-only.	`boolean`	`false`

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Identifiable 1 px border (input token).
Focus visible	2 px ring outline merged with the border.
Invalid	Inside Field, destructive border and a text error.
Resizable	Grows with its content; vertical resize without clipping the text.
Disabled	disabled prevents interaction and focus.
Read-only	readOnly keeps the content selectable.

Link the control to a label as with Input. Accepts native textarea props, including required, maxLength, ref and onChange.

Keep focus visible and explain errors with text; the control grows with its content without clipping it.