### File

`packages/components/directives/eui-clearable.directive.ts`

### Description

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.

Example :

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

Example :

    <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

### Implements

`OnChanges` `AfterViewInit`

### Metadata

Selector | `input[euiClearable]`

### Index

###### Methods
Public onKeyUpAndModelChange
###### Inputs
disabled euiClearable readonly
###### HostBindings
class
###### HostListeners
input ngModelChange
###### Accessors
readonly disabled cssClasses

### Inputs

disabled
Type : `any`

euiClearable
Type : `boolean`

readonly
Type : `any`

### HostBindings

class
Type : `string`

### HostListeners

input
Arguments : `'$any($event.target).value'`

ngModelChange
Arguments : `'$event'`

### Methods

Public onKeyUpAndModelChange
`onKeyUpAndModelChange(value: unknown)`
Decorators : `@HostListener('input', ['$any($event.target).value']) @HostListener('ngModelChange', ['$event'])`
Parameters :
Name | Type | Optional
value | `unknown` | No
Returns : `void`

### Accessors

readonly
get `readonly()`
set `readonly(v: BooleanInput)`
Parameters :
Name | Type | Optional
v | `BooleanInput` | No
Returns : `void`

disabled
get `disabled()`
set `disabled(v: BooleanInput)`
Parameters :
Name | Type | Optional
v | `BooleanInput` | No
Returns : `void`

cssClasses
get `cssClasses()`
set `cssClasses(value: string)`
Parameters :
Name | Type | Optional
value | `string` | No
Returns : `void`

# results matching ""

# No results matching ""