EccUtilsDesignTextarea Component

Overview

The ecc-utils-design-textarea component provides a multi-line text input field for forms, suitable for capturing longer user input.

Usage

Basic Textarea

This example shows a default textarea with a placeholder.

Textarea with Label

This example shows a textarea with a corresponding label.

Properties

placeholder

Provides a hint to the user about what information to enter in the textarea field.

<EccUtilsDesignTextarea placeholder="Enter your feedback here..." />

value

The current value of the textarea field. Can be used for controlled components in React.

<EccUtilsDesignTextarea value="Pre-filled content goes here" />

disabled

When true, the textarea is non-interactive and visually de-emphasized.

<EccUtilsDesignTextarea disabled={true} placeholder="Cannot edit this" />

rows

Specifies the number of visible text lines for the textarea, controlling its height.

<EccUtilsDesignTextarea rows={5} placeholder="Taller textarea" />

cols

Specifies the visible width of the textarea in average character widths.

<EccUtilsDesignTextarea cols={50} placeholder="Wider textarea" />

invalid and error

error shows a message under the textarea, e.g. one that an API returned for this field (see Field errors), and marks the textarea as invalid: it gets a red border, aria-invalid="true" and aria-describedby pointing to the message, and screen readers announce the message (aria-live="polite"). invalid marks the textarea as invalid without a message, e.g. when the message is shown elsewhere. Clear both when the user changes the value or submits again. The message has the part error for styling (ecc-utils-design-textarea::part(error)).

<EccUtilsDesignTextarea error="Must be at most 300 characters long." />

Events

ecc-input-changed

Fires whenever the user types or pastes content into the textarea, providing the current value.

<EccUtilsDesignTextarea 
  onEccInputChanged={(event) => {
    console.log('Textarea value:', event.detail.value);
  }}
/>