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.

Loading...

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.

Loading...

Incremental search

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

Loading...

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 ↵

𐘂𐘂