eui documentation
  1. Components
  2. EuiToolbarSearchComponent

File

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

Description

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.

Example :
<!-- 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>
Example :
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

Implements

AfterViewInit AfterContentInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-toolbar-search
imports EUI_BUTTON EUI_ICON EUI_ICON_BUTTON EUI_AUTOCOMPLETE EUI_ICON_INPUT EUI_INPUT_TEXT EuiTemplateDirective NgTemplateOutlet FormsModule AsyncPipe
templateUrl ./toolbar-search.component.html
styleUrl ./toolbar-search.component.scss

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

hasExpandAnimation
Type : boolean
Default value : true

Enables expand animation when search input gains focus. When true, animates the input field expansion. When false, input expands instantly.
hasSearchButton
Type : boolean
Default value : false

Shows a search button next to the input field. When true, displays a button to trigger search action explicitly.
isAutocomplete
Type : boolean
Default value : false

Enables autocomplete mode with dropdown suggestions. When true, displays autocomplete dropdown. Automatically disables isInputText.
isInputText
Type : boolean
Default value : false

Enables plain text input mode without autocomplete. When true, displays simple text input. Automatically disables isAutocomplete.
panelWidth
Type : string
Default value : '25vw'

Width of the autocomplete dropdown panel. Accepts any valid CSS width value.
placeholderLabel
Type : string

Placeholder text displayed in the search input when empty. Provides hint text to guide users on what they can search for. Optional.
searchResults
Type : EuiAutoCompleteItem[]
Default value : []

Array of autocomplete suggestion items displayed in the dropdown. Only used when isAutocomplete is true. Each item should conform to EuiAutoCompleteItem interface.

Outputs

inputBlur
Type : 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
Type : EventEmitter<Event>

Emitted when the search input gains focus. Payload: Event - the focus event Triggered when user focuses on the search input field.
search
Type : 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
Type : 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
Type : EventEmitter<EuiAutoCompleteItem[]>

Emitted when autocomplete selection changes. Payload: EuiAutoCompleteItem[] - array of selected autocomplete items Triggered when user selects or deselects items in autocomplete mode.

HostBindings

class
Type : string

Methods

onInputBlur
onInputBlur()
Returns : void
onInputFocus
onInputFocus()
Returns : void
onSearch
onSearch(e: string)
Parameters :
Name Type Optional
e string No
Returns : void
onSearchClick
onSearchClick(isIconOnly: boolean)
Parameters :
Name Type Optional
isIconOnly boolean No
Returns : void
onSearchInput
onSearchInput(e: KeyboardEvent)
Parameters :
Name Type Optional
e KeyboardEvent No
Returns : void
onSelectionChange
onSelectionChange(items: EuiAutoCompleteItem[])
Parameters :
Name Type Optional
items EuiAutoCompleteItem[] No
Returns : void

Properties

isInputFocus
Type : unknown
Default value : false
Public resultItemTemplate
Type : TemplateRef<literal type>
searchInput
Type : string
Default value : ''
searchTerm
Type : string
templates
Type : QueryList<EuiTemplateDirective>
Decorators :
@ContentChildren(EuiTemplateDirective)

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""