Search bar

An EuiSearchBar is a toolbar that enables the user to create/define a search query. This can be done either by entering the query syntax in a search box or by clicking any of the configured filters. The query language is not meant to be full blown search language for arbitrary data (e.g. as required in the Discover App in Kibana), yet it does provide some useful features:

Search terms - one can simply type search terms (free text words) - Example,website -production. In this example the intention is to find all items that have the "website" terms in them but do not have the word "production". Terms are AND'd together by default.
Phrases can be matched by surrounding multiple words with quotes - Example, "website url".
Field/value search - one can search for terms within specific fields - Example,tag:bug -severity:high. In this example the intention is to find all items that have "bug" in their tag field but do not have "high" in theirseverity field. It is also possible to define range queries on numeric and date fields. For example, followers>=10 will only match items that have 10 followers or above. Andcreated>'12 Jan 2018' will only match items that were created after 12th January 2018.
is clauses - a simple boolean filter over a flag - Example,is:open -is:assigned. In this example the intention is to find all items that are flagged as open but are not flagged as assigned
or group clauses - allowing multiple clauses to be OR'd together - Example,(is:active OR owner:dewey) followers>5. In this example the intention is to find all items that areactive OR owned by dewey, and have more than 5 followers
Operators for partial text match :, exact text match =, greater than >, greater than or equal >=, less than <, and less than or equal <=.

While the user can use the syntax described above to enter queries in the search box, it is possible to provide the user help with the syntax using filters. The filters are UI controls that can manipulate the query. The available filters are:

field_value_selection - A filter to manipulate field/value clauses. The filter is associated with a field name, and provides the user a list of value options to choose from. This filter can be configured to be single or multi select. In a single select mode, only one field filter will be added and replaced when the user changes the selection. In multi-select mode, a new filter will be added for each value selection. It is the intention for all these field clauses to be ANDed.
field_value_toggle - A filter to manipulate a single field/value clause. The filter is associated with a field name and a value. When the user clicks the control (button) the field/value filter is added/removed to/from the query.
field_value_toggle_group - Similar to the field_value_toggle above, except here you can define multiple values that will be displayed as a group of toggle buttons.
is - A toggle button that is associated with a flag name and when clicked it toggles this flag back and forth (adds/removed an is: clause to/from the query).

Date parsing

Date values can be used for equality or range tests when the schema prop specifies the field as a date type (the created field in the demo below is a date), and must be enclosed in single quotes. E.g. created:'2019-01-01', created>='3rd January 2017'

Formats understood by the parser

relative
- yesterday
- today
- tomorrow
absolute (parsed by Moment.js's `utc` method)
- ddd
- dddd
- D MMM YY
- Do MMM YY
- D MMM YYYY
- Do MMM YYYY
- DD MMM YY
- DD MMM YYYY
- D MMMM YY
- Do MMMM YY
- D MMMM YYYY
- Do MMMM YYYY
- DD MMMM YY
- DD MMMM YYYY
- YYYY-MM-DD

Controlled search bar

An EuiSearchBar can have its query controlled by a parent component by passing the query prop. Changes to the query will be passed back up through the onChange callback where the new query must be stored in state and passed back into the search bar.

Search bar filters

An EuiSearchBar can have custom filter dropdowns that control how a user can search.

Props

EuiSearchBar


Prop	Description and type	Default value
Prop onChange#	Description and type Type: `(args: EuiSearchBarOnChangeArgs) => boolean \| void`	Default value
Prop defaultQuery#	Description and type The initial query the bar will hold when first mounted Type: `QueryType`	Default value
Prop query#	Description and type If you wish to use the search bar as a controlled component, continuously pass the query via this prop. Type: `QueryType`	Default value
Prop box#	Description and type Configures the search box. Set `placeholder` to change the placeholder text in the box and `incremental` to support incremental (as you type) search. Type: `EuiFieldSearchProps & { schema?: boolean \| SchemaType; }`	Default value
Prop filters#	Description and type An array of search filters. See #SearchFilterConfig. Type: `SearchFilterConfig[]`	Default value
Prop toolsLeft#	Description and type Tools which go to the left of the search bar. Type: `Tools`	Default value
Prop toolsRight#	Description and type Tools which go to the right of the search bar. Type: `Tools`	Default value
Prop dateFormat#	Description and type Date formatter to use when parsing date values Type: `object`	Default value
Prop hint#	Description and type Hint to render below the search bar Type: `{ content: React.ReactNode; popoverProps?: Partial<Pick<EuiInputPopoverProps, "zIndex" \| "fullWidth" \| "data-test-subj" \| "isOpen" \| "closePopover" \| "panelClassName" \| "panelPaddingSize" \| ... 4 more ... \| "disableFocusTrap">>; }`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiSearchBarFilters


Prop	Description and type	Default value
Prop query#	Description and type Type: `Query`	Default value Required
Prop onChange#	Description and type Type: `(query: Query) => void`	Default value Required
Prop filters#	Description and type Type: `SearchFilterConfig[]`	Default value `[]`