# EuiInputTextComponent

**Type:** component

<p>A custom input text component that extends InputDirective and provides additional functionality
such as validation states, clearable input, and loading states.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText [(ngModel)]=&quot;username&quot; placeholder=&quot;Enter username&quot; /&gt;</code></pre></div><h3>With Clearable Button</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText [euiClearable]=&quot;true&quot; [(ngModel)]=&quot;searchTerm&quot; /&gt;</code></pre></div><h3>With Loading State</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText [euiLoading]=&quot;isSearching&quot; [(ngModel)]=&quot;query&quot; /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use associated <code>&lt;label&gt;</code> with <code>for</code> attribute</li>
<li>Invalid state is communicated via visual styling and <code>aria-invalid</code></li>
<li>Clearable button has appropriate ARIA label</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Supports all standard HTML input attributes</li>
<li>Works with Angular Forms (template-driven and reactive)</li>
<li>Validation state automatically syncs with form control</li>
</ul>


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

**Standalone:** false

## Inputs

- **isInvalid**: `boolean, BooleanInput` - <p>Gets or sets the invalid state of the input
When used with NgControl, this state is automatically managed based on control state</p>

- **disabled**: `boolean` - 
- **euiDanger**: `boolean` - 
- **euiDisabled**: `boolean` - 
- **placeholder**: `string | null` - 
- **readonly**: `any` - 
