### File

`packages/components/eui-textarea/eui-textarea.component.ts`

### Description

Multiline text input field for entering longer text content. `euiTextArea` provides an enhanced textarea component with full Angular forms integration, validation state handling, readonly display mode, and optional automatic height adjustment. It is designed to be used as an attribute selector on a `textarea` element.

### Basic Usage

Example :

    <!-- Simple textarea -->
    <textarea euiTextArea placeholder="Enter description"></textarea>

    <!-- With reactive forms -->
    <form [formGroup]="form">
      <textarea euiTextArea formControlName="description"></textarea>
    </form>

    <!-- Readonly mode -->
    <textarea euiTextArea [readonly]="true" [value]="content"></textarea>

Example :

    form = new FormGroup({
      description: new FormControl('', [Validators.required, Validators.maxLength(500)])
    });

### Accessibility

- Associate with label using for/id attributes
- Provide placeholder text as guidance, not as label replacement
- Use aria-describedby for helper text or error messages
- Ensure sufficient color contrast in all states

### Notes

- Automatically tracks number of text rows via rowsChange event
- Validation state (invalid/danger) syncs with form control
- Readonly mode displays content in a styled container
- Disabled state prevents all user interaction

### Implements

`OnInit` `OnDestroy` `DoCheck` `ControlValueAccessor`

### Metadata

encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiDisabled euiDanger
host | `{ }`
providers | `)`
selector | `textarea[euiTextArea]`

template

    <ng-content />

styleUrl | `./eui-textarea.scss`

### Index

###### Properties

- Static idCounter

###### Methods

- Public onBlur
- Public onInputChange
- registerOnChange
- registerOnTouched
- setDisabledState
- writeValue

###### Inputs

- disabled
- e2eAttr
- id
- isInvalid
- readonly

###### Outputs

- rowsChange

###### HostListeners

- blur
- input

###### Accessors

- class

### Constructor

`constructor()`

### Inputs

disabled
Type : `boolean, BooleanInput`
Default value : `undefined, { transform: booleanAttribute }`
The disabled state of the textarea This can be controlled either directly or through form control binding.

e2eAttr
Type : `string`
Default value : `'eui-textarea'`
Data attribute for end-to-end testing

id
Type : `string`
Default value : ``eui-textarea_${EuiTextareaComponent.idCounter++}``
Unique identifier for the textarea

isInvalid
Type : `boolean, BooleanInput`
Default value : `undefined, { transform: booleanAttribute }`
Flag indicating if the textarea is in an invalid state This can be set manually or automatically through form validation.

readonly
Type : `boolean, BooleanInput`
Default value : `undefined, { transform: booleanAttribute }`
The readonly state of the textarea with special styling.

### Outputs

rowsChange
Type : `number`
Event emitter that fires when the number of text rows in the textarea changes

### HostListeners

blur
Arguments : `'$any($event.target).value'`
`blur(value: string)`

Handles blur events on the textarea

Parameters :

Name | Optional | Description

value

No

- The current value of the textarea

input
Arguments : `'$any($event.target).value'`
`input(value: string)`

Handles input changes in the textarea

Parameters :

Name | Optional | Description

value

No

- The new value of the textarea

### Methods

Public onBlur
`onBlur(value: string)`
Decorators : `@HostListener('blur', ['$any($event.target).value'])`

Handles blur events on the textarea

Parameters :

Name | Type | Optional | Description

value

`string`

No

- The current value of the textarea

Returns : `void`

Public onInputChange
`onInputChange(value: string)`
Decorators : `@HostListener('input', ['$any($event.target).value'])`

Handles input changes in the textarea

Parameters :

Name | Type | Optional | Description

value

`string`

No

- The new value of the textarea

Returns : `void`

registerOnChange
`registerOnChange(fn: () => void)`

Registers the callback function for change events

Parameters :

Name | Type | Optional | Description

fn

`function`

No

- The callback function

Returns : `void`

registerOnTouched
`registerOnTouched(fn: () => void)`

Registers the callback function for touched events

Parameters :

Name | Type | Optional | Description

fn

`function`

No

- The callback function

Returns : `void`

setDisabledState
`setDisabledState(isDisabled: boolean)`

Sets the disabled state of the textarea

Parameters :

Name | Type | Optional | Description

isDisabled

`boolean`

No

- The disabled state to set

Returns : `void`

writeValue
`writeValue(obj: unknown)`

ControlValueAccessor implementation for writing values

Parameters :

Name | Type | Optional | Description

obj

`unknown`

No

- The value to write to the textarea

Returns : `void`

### Properties

Static idCounter
Type : `number`
Default value : `0`
Static counter used to generate unique IDs for textarea instances

### Accessors

class
get `class()`

# results matching ""

# No results matching ""