# EuiInputTextComponent

**Type:** component



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

### Basic Usage
```html
<input euiInputText [(ngModel)]="username" placeholder="Enter username" />
```

### With Clearable Button
```html
<input euiInputText [euiClearable]="true" [(ngModel)]="searchTerm" />
```

### With Loading State
```html
<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


**Selector:** `input[euiInputText]`

## Inputs
- **isInvalid**: `boolean, BooleanInput` - Gets or sets the invalid state of the input When used with NgControl, this state is automatically managed based on control state
- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` - 
- **euiClearable**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **readonly**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **disabled**: `any` - From host directive: #[[file:EuiClearableDirective.md]]
- **euiLoading**: `any` - From host directive: #[[file:EuiLoadingDirective.md]]
- **readonly**: `any` - From host directive: #[[file:EuiLoadingDirective.md]]