Diwa Design System

Textarea

A multi-line text input for longer freeform content. Supports validation states, labels, descriptions, and resizing.

Properties

Name	Type	Default	Description
`label`	`string`	`''`	Visible label text. Always provide a label for accessibility.
`description`	`string`	`''`	Supplementary description below the label.
`state`	`'none' \| 'error' \| 'success'`	`'none'`	Validation state affecting border and message colour.
`message`	`string`	`''`	Feedback message shown when state is "error" or "success".
`name`	`string`	`''`	Native name attribute for form submission.
`value`	`string`	`''`	Current value. Update in response to the input event (controlled).
`placeholder`	`string`	`''`	Placeholder text shown when the textarea is empty.
`required`	`boolean`	`false`	Whether the field is required.
`disabled`	`boolean`	`false`	Disables all interaction.
`readOnly`	`boolean`	`false`	Makes the content non-editable while still selectable.
`maxLength`	`number`	`—`	Maximum number of characters allowed.
`minLength`	`number`	`—`	Minimum number of characters required.
`rows`	`number`	`4`	Number of visible text rows.
`resize`	`'none' \| 'both' \| 'vertical' \| 'horizontal'`	`'vertical'`	Which resize handles are shown.
`compact`	`boolean`	`false`	Enables dense mode with reduced padding and font size.
`hideLabel`	`boolean`	`false`	Hides the label visually; the label is still used as the accessible name.
`theme`	`'dark' \| 'light'`	`'dark'`	Per-component theme override.

Events

Name	Detail type	Bubbles	Description
`input`	`string`	Yes	Emitted on every keystroke with the current value.
`change`	`string`	Yes	Emitted when the textarea loses focus and the value has changed.
`blur`	`FocusEvent`	No	Emitted when the textarea loses focus.

Slots

Slot	Description
`label-after`	Content placed after the label text, e.g. a diwa-popover for additional help.