EccUtilsDesignTextarea Component

2.0.0-alpha.6

<ecc-utils-design-textarea/>

EccUtilsDesignTextarea

Overview

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

This component is a styled wrapper around the native HTML <textarea> element and supports disabled states, placeholder text, and resizability.

This example shows a default textarea with a placeholder.

This example shows a textarea with a corresponding label.

Your Message

Property	Type	Default	Description
`placeholder`	`string`	`""`	Placeholder text for the textarea.
`value`	`string`	`""`	The current value of the textarea.
`disabled`	`boolean`	`false`	When `true`, disables the textarea.
`rows`	`number`	`3`	The number of visible text lines.
`cols`	`number`	`undefined`	The visible width of the text control.

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

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

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

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

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

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

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

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

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

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

Event Name	React Event Name	Detail Type	Description
`ecc-input-changed`	`onEccInputChanged`	`{ value: string }`	Fired when the value of the textarea changes.

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);
  }}
/>