# EuiTextareaComponent

**Type:** component



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
```html
<!-- 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>
```

```typescript
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


**Selector:** `textarea[euiTextArea]`

## Inputs
- **disabled**: `boolean, BooleanInput` - The disabled state of the textarea This can be controlled either directly or through form control binding.
- **e2eAttr**: `string` - Data attribute for end-to-end testing
- **id**: `string` - Unique identifier for the textarea
- **isInvalid**: `boolean, BooleanInput` - Flag indicating if the textarea is in an invalid state This can be set manually or automatically through form validation.
- **readonly**: `boolean, BooleanInput` - The readonly state of the textarea with special styling.
- **euiDisabled**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **rowsChange**: `number` - Event emitter that fires when the number of text rows in the textarea changes