Basic search field

Use EuiFieldSearch to allow users to enter search queries. This component renders a basic HTML

<input type="search"> element.

Wrap your form controls in a form row

Use the

EuiFormRow component to easily and accessibly associate form components with labels, help text, and error text.

Searching on enter key

Use the onSearch callback prop to receive EuiFieldSearch's current value when a user triggers a search via the Enter key.

Incremental search

To search as the user types into the field, set the incremental prop to true.

Props

EuiFieldSearch

Extends InputHTMLAttributes


Prop	Description and type	Default value
Prop append#	Description and type Creates an input group with element(s) coming after input. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop value#	Description and type Type: `string`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop id#	Description and type Type: `string`	Default value
Prop prepend#	Description and type Creates an input group with element(s) coming before input `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop name#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop fullWidth#	Description and type Expand to fill 100% of the parent. Defaults to `fullWidth` prop of `<EuiForm>`. Type: `boolean`	Default value `false`
Prop isLoading#	Description and type Type: `boolean`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop compressed#	Description and type when `true` creates a shorter height input Type: `boolean`	Default value
Prop inputRef#	Description and type Type: `(node: HTMLInputElement) => void`	Default value
Prop placeholder#	Description and type Type: `string`	Default value
Prop isInvalid#	Description and type Type: `boolean`	Default value
Prop isClearable#	Description and type Shows a button that quickly clears any input Type: `boolean`	Default value
Prop onSearch#	Description and type Called when the user presses [Enter] OR on change if the incremental prop is `true`. If you don't need the on[Enter] functionality, prefer using onChange Type: `(value: string) => void`	Default value
Prop incremental#	Description and type When `true` the search will be executed (that is, the `onSearch` will be called) as the user types. Type: `boolean`	Default value
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<unknown>`	Default value