eui documentation
  1. Components
  2. EuiTextareaComponent

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
Methods
Inputs
Outputs
HostListeners
Accessors

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
getclass()

results matching ""

    No results matching ""