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.

Usage

Labels

Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.

Version

Use the `major.minor` format. You can use wildcards `*` to span over multiple versions.

Do: Say what the field is in the label. Use help text for additional information.

Numeric version (e.g. `2.*`)

Don't: Put everything in the label. It's hard to scan.

Hint text

Place hints and instructions outside a text field so it is always visible to the user. Keep the hint text short, maximum two sentences long. Use hint text to:

Explain why you are asking a certain question: "We will only email you if there is a problem with your order."
Provide clarifying details on what to type: "Enter the full 32-character ID."
Tell the user where to find the information you're asking for: "Find the Elasticsearch cluster ID on the main administration page of your deployment."

Timeout

Use shorthand notation, such as 30s, 10m, or 1h.

Do: Help users make the right decision by clarifying what goes inside a field.

Name

This is the name that will be visible to other users.

Do: Use complete sentences and ending punctuation.

Placeholder text

In fields

Use the placeholder property to describe the expected value of the input or to provide a useful example.

Phone number

Include the international call prefix.

Do: Provide a simple example that highlights the expected syntax or value.

Endpoint

Include the port number.

Don't: Start with `for example`, or `e.g.`.

Add placeholder text in addition to field labels and help text, not as a replacement. Omit it if it doesn't add value for users. And keep it short.

Source

Enter a valid IP address.

Do: Place info essential to completing the form outside the field so that it is always visible.

Source

Enter CIDR or IP address. For example, `192.168.132.6/22`.

Don't: Use text that adds no value, such as “Type here”.

Do: When space is limited and the UI is very simple, you can use field labels as placeholder text. This must stay an exception.

Key

Value

Do: If space allows it, prefer following the rule described earlier with labels outside of the fields.

In search bars

In a search bar, be specific about what users can enter.

Do: Give users a hint at things they might want to search for. State the action the user performs (find, search) instead of the field functionality (jump to).

Don't: Use an ellipsis.

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