eui documentation
  1. Components
  2. EuiInputTextComponent

File

packages/components/eui-input-text/eui-input-text.component.ts

Description

A custom input text component that extends InputDirective and provides additional functionality such as validation states, clearable input, and loading states.

Basic Usage

Example :
<input euiInputText [(ngModel)]="username" placeholder="Enter username" />

With Clearable Button

Example :
<input euiInputText [euiClearable]="true" [(ngModel)]="searchTerm" />

With Loading State

Example :
<input euiInputText [euiLoading]="isSearching" [(ngModel)]="query" />

Accessibility

  • Use associated <label> with for attribute
  • Invalid state is communicated via visual styling and aria-invalid
  • Clearable button has appropriate ARIA label

Notes

  • Supports all standard HTML input attributes
  • Works with Angular Forms (template-driven and reactive)
  • Validation state automatically syncs with form control

Extends

InputDirective

Implements

OnInit OnDestroy DoCheck

Metadata

HostDirectives EuiClearableDirective
 Inputs : euiClearable readonly disabled 
EuiLoadingDirective
 Inputs : euiLoading readonly 
host {
}
selector input[euiInputText]
styleUrls ./eui-input-text.scss

Index

Methods
Inputs
Accessors

Constructor

constructor()

Inputs

isInvalid
Type : boolean, BooleanInput
Default value : null, { transform: booleanAttribute }

Gets or sets the invalid state of the input When used with NgControl, this state is automatically managed based on control state
disabled
Type : boolean
euiDanger
Type : boolean
Default value : false
euiDisabled
Type : boolean
Default value : false
placeholder
Type : string | null
readonly
Type : any

Methods

getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Accessors

class
getclass()

Gets the CSS classes for the component, including validation state classes

Returns : string

results matching ""

    No results matching ""