Textarea

The inherited Ecology multi-line input, wearing the Beacon skin. Optional auto-resize, packaged with its label and help/error text; form-associated via ElementInternals with a teal focus ring.

Inheritedwcimport '@esa/ecology/esa-textarea';

Preview

<esa-textarea label="Description" placeholder="Describe the project…" help-text="Plain text only."></esa-textarea>

Rows + auto-resize

<esa-textarea label="Fixed 5 rows" rows="5" placeholder="Five rows tall"></esa-textarea>
<esa-textarea label="Auto-resize" auto-resize max-rows="8" placeholder="Grows as you type, up to 8 rows"></esa-textarea>

Sizes

<esa-textarea label="Extra small" size="xs" placeholder="Extra small"></esa-textarea>
<esa-textarea label="Small" size="sm" placeholder="Small"></esa-textarea>
<esa-textarea label="Medium" size="md" placeholder="Medium"></esa-textarea>
<esa-textarea label="Large" size="lg" placeholder="Large"></esa-textarea>

States

<esa-textarea label="Required" required placeholder="Cannot be empty"></esa-textarea>
<esa-textarea label="With error" error-text="A description is required." required></esa-textarea>
<esa-textarea label="Disabled" disabled value="Read only content"></esa-textarea>

API

Prop	Type	Default	Description
`label`	`string`	`''`	Visible label rendered above the textarea.
`value`	`string`	`''`	Current value; mirrored to the form on every input.
`placeholder`	`string`	`''`	Placeholder shown when empty.
`rows`	`number`	`3`	Initial visible row count.
`auto-resize`	`boolean`	`false`	Grows the textarea to fit content as the user types.
`help-text`	`string`	`''`	Helper text shown below the textarea.
`error-text`	`string`	`''`	Error message; replaces help text and turns the field red when present.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`disabled`	`boolean`	`false`	Disables interaction.

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ value: string }>`	—	Fired on every input. Composed and bubbling; detail.value is the current string.