### File

`packages/ecl/components/ecl-search-form/ecl-search-form.component.ts`

### Description

Component representing search field - input and button, in a responsive, styled layout.

### Extends

`ECLBaseDirective`

### Implements

`ControlValueAccessor`

### Metadata

providers | `ECL_SEARCH_FORM_VALUE_ACCESSOR`
selector | `ecl-search-form`
imports | `TranslateModule` `FormsModule` `EUI_ECL_BUTTON` `EUI_ECL_FORM_GROUP` `EUI_ECL_TEXT_INPUT` `EUI_ECL_ICON`
templateUrl | `ecl-search-form.component.html`

### Index

###### Properties
role
###### Methods
onEnterKeyDown onModelChange onSearchClick registerOnChange registerOnTouched writeValue getCssClasses
###### Inputs
buttonExtraClassses inputExtraClassses placeholder searchButtonIcon searchButtonLabel searchInputText class e2eAttr tabindex
###### Outputs
searchEvent
###### HostBindings
attr.role class
###### HostListeners
keydown.enter
###### Accessors
cssClasses

### Inputs

buttonExtraClassses
Type : `string`
Default value : `''`

inputExtraClassses
Type : `string`
Default value : `''`

placeholder
Type : `string`

searchButtonIcon
Type : `string`
Default value : `'search'`

searchButtonLabel
Type : `string`

searchInputText
Type : `string`
The current/default search text.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### Outputs

searchEvent
Type : `EventEmitter`
This event is emited, when user performs the search action. Includes the search text from the input field.

### HostBindings

attr.role
Type : `string`
Default value : `'search'`

class
Type : `string`
Applies the base class `ecl-search-form` to the host element.

### HostListeners

keydown.enter
Arguments : `'$event'`
`keydown.enter(evt: Event)`
Perform search when user clicks Enter when on the input field. Emits the search event with the search text.

### Methods

onEnterKeyDown
`onEnterKeyDown(evt: Event)`
Decorators : `@HostListener('keydown.enter', ['$event'])`
Perform search when user clicks Enter when on the input field. Emits the search event with the search text. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

onModelChange
`onModelChange(newValue: string)`
Assigns the new input text value to the 'searchInputText' property, each time the input is changed. Parameters :
Name | Type | Optional
newValue | `string` | No
Returns : `void`

onSearchClick
`onSearchClick(evt: Event)`
Perform search when user clicks the search button. Emits the search event with the search text. Parameters :
Name | Type | Optional
evt | `Event` | No
Returns : `void`

registerOnChange
`registerOnChange(fn: (_: any) => void)`
Parameters :
Name | Type | Optional
fn | `function` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: (_: any) => void)`
Parameters :
Name | Type | Optional
fn | `function` | No
Returns : `void`

writeValue
`writeValue(value: any)`
Parameters :
Name | Type | Optional
value | `any` | No
Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

role
Type : `string`
Default value : `'search'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`
Applies the base class `ecl-search-form` to the host element. Returns : `string`

# results matching ""

# No results matching ""