# EuiHeaderSearchComponent

**Type:** component



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.

```html
<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>
```
```typescript
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


**Selector:** `eui-header-search`

## Inputs
- **placeholder**: `string` - Placeholder text displayed in the search input field when empty. Provides hint text to guide users on what they can search for.

## Outputs
- **searchClick**: `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.