# EuiClearableDirective

**Type:** directive



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.

```html
<input euiInputText euiClearable [(ngModel)]="searchTerm" />
```

```html
<input euiInputNumber euiClearable formControlName="amount" />
```

### Accessibility
- Clear icon has aria-label="Clear input field" for screen readers
- Icon is keyboard accessible with Enter key support
- Icon hidden when input is empty to avoid confusion
- Disabled state removes keyboard access and pointer events

### Notes
- Only compatible with text, search, and eui-number input types
- Clear icon visibility toggles based on input value presence
- Works with both ngModel and reactive forms
- Dispatches 'clear' event when value is cleared
- Automatically manages wrapper div for icon positioning


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

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