# EuiClearableDirective

**Type:** directive

<p>Directive adding a clear button to text and number input fields for quick value reset.
Dynamically creates a close icon that appears when input has content and clears value on click.
Automatically handles form control integration and disabled/readonly states.
Only works with euiInputText and euiInputNumber input types.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputText euiClearable [(ngModel)]=&quot;searchTerm&quot; /&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;input euiInputNumber euiClearable formControlName=&quot;amount&quot; /&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Clear icon has aria-label=&quot;Clear input field&quot; for screen readers</li>
<li>Icon is keyboard accessible with Enter key support</li>
<li>Icon hidden when input is empty to avoid confusion</li>
<li>Disabled state removes keyboard access and pointer events</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Only compatible with text, search, and eui-number input types</li>
<li>Clear icon visibility toggles based on input value presence</li>
<li>Works with both ngModel and reactive forms</li>
<li>Dispatches &#39;clear&#39; event when value is cleared</li>
<li>Automatically manages wrapper div for icon positioning</li>
</ul>


**Selector:** `input[euiClearable]`

**Standalone:** false

## Inputs

- **disabled**: `any` - 
- **euiClearable**: `boolean` - 
- **readonly**: `any` - 
