Prototype library

Textarea

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

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

<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

PropTypeDefaultDescription
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

EventTypeDefaultDescription
change CustomEvent<{ value: string }> — Fired on every input. Composed and bubbling; detail.value is the current string.