### 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
getCssClasses
###### Inputs
isInvalid disabled euiDanger euiDisabled placeholder readonly
###### Accessors
class

### 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
get `class()`
Gets the CSS classes for the component, including validation state classes Returns : `string`

# results matching ""

# No results matching ""