eui documentation
  1. Directives
  2. EuiClearableDirective

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
Inputs
HostBindings
HostListeners
Accessors

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
getreadonly()
setreadonly(v: BooleanInput)
Parameters :
Name Type Optional
v BooleanInput No
Returns : void
disabled
getdisabled()
setdisabled(v: BooleanInput)
Parameters :
Name Type Optional
v BooleanInput No
Returns : void
cssClasses
getcssClasses()
setcssClasses(value: string)
Parameters :
Name Type Optional
value string No
Returns : void

results matching ""

    No results matching ""