eui documentation
  1. Components
  2. EuiHeaderSearchComponent

File

packages/components/layout/eui-header/header-search/header-search.component.ts

Description

Search input component designed for header placement, providing a compact search interface with submit button. Combines text input with search icon button for initiating search operations from the application header. Emits search events with the current input value when user clicks the search button or submits the form. Integrates with EUI input and button components for consistent styling and behavior.

Example :
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-search
        placeholder="Search documents..."
        (searchClick)="onSearch($event)">
      </eui-header-search>
    </eui-header>
  </eui-app-header>
</eui-app>
Example :
onSearch(searchTerm: string): void {
  console.log('Searching for:', searchTerm);
}

Accessibility

  • Search input is keyboard accessible
  • Placeholder provides context for screen readers
  • Submit button accessible via keyboard (Enter key)
  • Focus management follows standard input behavior
  • Search icon provides visual affordance

Notes

  • Must be used within eui-header for proper layout
  • Positioned in header content area
  • Combines input field with search button
  • searchClick event emits current input value
  • Triggered by button click or form submission
  • placeholder defaults to 'Search'
  • Input value managed internally via FormsModule
  • Integrates EUI input-text and button components
  • Compact design suitable for header placement

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-header-search
imports FormsModule EUI_ICON EUI_BUTTON EUI_INPUT_TEXT EUI_INPUT_BUTTON
templateUrl ./header-search.component.html
styleUrl ./header-search.component.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings

Inputs

placeholder
Type : string
Default value : 'Search'

Placeholder text displayed in the search input field when empty. Provides hint text to guide users on what they can search for.

Outputs

searchClick
Type : EventEmitter<string>

Emitted when the user initiates a search by clicking the search button or submitting the form. Payload: string - the current value of the search input field Triggered on search button click or form submission.

HostBindings

class
Type : string
Default value : 'eui-header-search'

Methods

onSearch
onSearch()
Returns : void

Properties

cssClass
Type : string
Default value : 'eui-header-search'
Decorators :
@HostBinding('class')

results matching ""

    No results matching ""