Textarea

Multiline input with optional auto-resize, packaged with its label and help/error text. Form-associated via ElementInternals; emits a composed change event.

Inherited wc import '@esa/ecology/esa-textarea';

Preview

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

Rows + auto-resize

Set a fixed rows count, or add auto-resize to grow with content up to max-rows.

<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>

Form participation

The element is form-associated. Submitting logs the FormData entry for notes.

<form>
  <esa-textarea label="Notes" name="notes" placeholder="Type then submit"></esa-textarea>
  <button type="submit">Submit</button>
</form>

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.
`max-rows`	`number`	`10`	Row cap when auto-resize is on.
`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.
`required`	`boolean`	`false`	Marks the field required and renders an asterisk on the label.
`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.