### 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 ""