# EuiToolbarSearchComponent

**Type:** component



Toolbar search component providing an expandable search input with autocomplete or plain text input modes.
Offers flexible search functionality with optional search button, expand animation, and custom result templates.
Supports two modes: autocomplete with dropdown suggestions or simple text input with enter-to-search.
Integrates with EuiAppShellService for responsive behavior and theme coordination.
Emits events for search actions, selection changes, and focus state for parent components to handle search logic.

```html
<!-- Autocomplete mode -->
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-search
        [isAutocomplete]="true"
        [searchResults]="searchResults"
        placeholderLabel="Search..."
        (search)="onSearch($event)"
        (selectionChange)="onSelectionChange($event)">
      </eui-toolbar-search>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

<!-- Text input mode -->
<eui-toolbar-search
  [isInputText]="true"
  [hasSearchButton]="true"
  (search)="onSearch($event)">
</eui-toolbar-search>
```
```typescript
searchResults: EuiAutoCompleteItem[] = [
  { id: 1, label: 'Result 1' },
  { id: 2, label: 'Result 2' }
];
```

### Accessibility
- Search input keyboard accessible
- Enter key triggers search
- Focus and blur events managed
- Placeholder provides context
- Autocomplete dropdown keyboard navigable
- Search button keyboard accessible

### Notes
- Must be used within eui-toolbar for proper layout
- Two modes: autocomplete (default) or text input
- isAutocomplete and isInputText are mutually exclusive
- Default mode is autocomplete if neither specified
- searchResults for autocomplete suggestions
- hasSearchButton adds explicit search button
- hasExpandAnimation controls focus expansion (default: true)
- panelWidth for autocomplete dropdown (default: '25vw')
- search event on Enter key or autocomplete change
- selectionChange event for autocomplete selections
- searchClick event for button clicks
- inputFocus/inputBlur events for focus state
- Custom result templates via EuiTemplateDirective
- Focus state applies 'eui-toolbar-search--focus' class
- Integrates with EuiAppShellService


**Selector:** `eui-toolbar-search`

## Inputs
- **hasExpandAnimation**: `boolean` - Enables expand animation when search input gains focus. When true, animates the input field expansion. When false, input expands instantly.
- **hasSearchButton**: `boolean` - Shows a search button next to the input field. When true, displays a button to trigger search action explicitly.
- **isAutocomplete**: `boolean` - Enables autocomplete mode with dropdown suggestions. When true, displays autocomplete dropdown. Automatically disables isInputText.
- **isInputText**: `boolean` - Enables plain text input mode without autocomplete. When true, displays simple text input. Automatically disables isAutocomplete.
- **panelWidth**: `string` - Width of the autocomplete dropdown panel. Accepts any valid CSS width value.
- **placeholderLabel**: `string` - Placeholder text displayed in the search input when empty. Provides hint text to guide users on what they can search for. Optional.
- **searchResults**: `EuiAutoCompleteItem[]` - Array of autocomplete suggestion items displayed in the dropdown. Only used when isAutocomplete is true. Each item should conform to EuiAutoCompleteItem interface.

## Outputs
- **inputBlur**: `EventEmitter<Event>` - Emitted when the search input loses focus. Payload: Event - the blur event Triggered when user leaves the search input field, unless search button is present and input has value.
- **inputFocus**: `EventEmitter<Event>` - Emitted when the search input gains focus. Payload: Event - the focus event Triggered when user focuses on the search input field.
- **search**: `EventEmitter<string>` - Emitted when a search is performed via Enter key or autocomplete input change. Payload: string - the search term entered by the user Triggered on Enter key press in text input mode or autocomplete input change.
- **searchClick**: `EventEmitter<string>` - Emitted when the search button is clicked. Payload: string - the current search input value, or null if icon-only mode Triggered when user clicks the search button (when hasSearchButton is true).
- **selectionChange**: `EventEmitter<EuiAutoCompleteItem[]>` - Emitted when autocomplete selection changes. Payload: EuiAutoCompleteItem[] - array of selected autocomplete items Triggered when user selects or deselects items in autocomplete mode.