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.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`placeholder`	`string`	`''`	Placeholder shown when empty.
`help-text`	`string`	`''`	Helper text shown below the textarea. Property: `helpText`.
`error-text`	`string`	`''`	Error message; replaces help text and turns the field red when present. Property: `errorText`.
`required`	`boolean`	`false`	Marks the field required and renders an asterisk on the label.
`disabled`	`boolean`	`false`	Disables interaction.
`name`	`string \| undefined`	—	Form field name — the key this control submits under.
`rows`	`number`	`3`	Initial visible row count.
`auto-resize`	`boolean`	`false`	Grows the textarea to fit content as the user types. Property: `autoResize`.
`max-rows`	`number`	`10`	Row cap when auto-resize is on. Property: `maxRows`.
`value`	`string`	`''`	Current value; mirrored to the form on every input.
`minlength`	`number \| undefined`	—
`maxlength`	`number \| undefined`	—
`autocomplete`	`string`	`''`	Autofill hint. The only way to satisfy SC 1.3.5 Identify Input Purpose (AA).
`live-error`	`boolean`	`false`	Announce the error the moment it appears rather than only on focus. Off by default — see the long note on `esa-text-field.liveError` for why (the house pattern is validate-on-submit with `<esa-error-summary>`, and a live region per field races it). Property: `liveError`.

Events

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

Binding these events from Angular

Every one of these is a CustomEvent, so the payload is on $event.detail — $event.target.value reads empty, with no error. The names are lowercase and Angular passes them to addEventListener verbatim, so camel-casing one means it never fires.

(change)="onChange($event.detail)"