Form controls

EUI provides different types of basic form controls: EuiFieldText, EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, EuiSelect, EuiTextArea, and EuiFilePicker.

Accessibility requirement

You must provide a label, aria-label, or valid aria-labelledby prop to all form controls.

To easily meet this requirement, we recommend wrapping your form controls in the EuiFormRow component, which automatically associates form controls with labels, help text, and error text.

Text field

This component renders a basic HTML <input type="text"> element. Use a EuiFieldText to allow users to enter or edit text.

Search field

This component renders a basic HTML <input type="search"> element. Use a EuiFieldSearch to allow users to enter search queries.

Number field

This component renders a basic HTML <input type="number"> element. Use a EuiFieldNumber to allow users to enter numbers.

Password field

Use a EuiFieldPassword to allow users to enter a password. By default, it renders a basic HTML <input type="password"> where the content is obfuscated. When users type in the field the characters are presented as asterisks.

You can change this default behavior by passing type="dual" so that users can toggle between showing and obfuscating the content. This option makes the experience more user-friendly and accessible.

Select

This component renders a basic HTML <select> element. Use EuiSelect to allow users to choose from a list of 7 to 12 options. When there are less than 7 options consider using a EuiRadioGroup.

If you need more customization for searching or rendering options, see EUI's guide on selection components .

Textarea

This component renders a basic HTML <textarea /> element. Use EuiTextArea to allow users to enter multi-line text.

File picker

EuiFilePicker is a stylized, but generic HTML <input type="file"> tag. It supports drag and drop as well as on click style selection of files. The example below shows how to grab the files using the FileList API. Like other form elements, you can wrap it in a EuiFormRow to apply a label.

Removing files programmatically

The current file selection can be cleared programmatically by calling the removeFiles method, which can be accessed on a component instance via React ref: filePickerRef.current.removeFiles().

Prepend and Append

Most form controls accept a prepend and append prop that allows passing a single node/string or an array of nodes/strings. Strings will be converted into form labels and connected to the input via htmlFor for accessibility.

These are great for demarcating the input's metric like "px" or "ms". You can also pass buttons for input settings or additional filters. Just be sure to use<EuiButtonEmpty size="xs" />.

Form control layout

Building block only

EuiFormControlLayout is generally used internally to consistently style form controls, but it’s published in case you want to create your own form control which matches those of EUI. The examples below demonstrate its various states and utilize the controlOnly and type props of EuiFieldText as the wrapped control.

Form control layout delimited

Building block only

Like EuiFormControlLayout, EuiFormControlLayoutDelimited is generally used internally to consistently style form controls. This component specifically lays out two form controls with center text or icon.

It takes all of the same props as EuiFormControlLayout except for children. Instead it requires both a single startControl and a single endControl. You can optionally change the center content to a different string or node (like an EuiIcon).

Props

EuiFieldText

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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
Prop icon#	Description and type Type: `IconType \| IconShape`	Default value
Prop isInvalid#	Description and type Type: `boolean`	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 inputRef#	Description and type Type: `Ref<HTMLInputElement>`	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 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 controlOnly#	Description and type Completely removes form control layout wrapper and ignores icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. Type: `boolean`	Default value
Prop compressed#	Description and type when `true` creates a shorter height input Type: `boolean`	Default value

EuiFieldSearch

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


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

EuiFieldNumber

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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
Prop icon#	Description and type Type: `IconType \| IconShape`	Default value
Prop isInvalid#	Description and type Type: `boolean`	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 `false`
Prop readOnly#	Description and type Type: `boolean`	Default value
Prop min#	Description and type Type: `number`	Default value
Prop max#	Description and type Type: `number`	Default value
Prop step#	Description and type Specifies the granularity that the value must adhere to. Accepts a `number`, e.g. `1` for integers, or `0.5` for decimal steps. Defaults to `"any"` for no stepping, which allows any decimal value(s). Type: `number \| "any"`	Default value `"any"`
Prop inputRef#	Description and type Type: `Ref<HTMLInputElement>`	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 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 controlOnly#	Description and type Completely removes form control layout wrapper and ignores icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited. Type: `boolean`	Default value
Prop compressed#	Description and type when `true` creates a shorter height input Type: `boolean`	Default value `false`

EuiFieldPassword

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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
Prop isInvalid#	Description and type Type: `boolean`	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 compressed#	Description and type Type: `boolean`	Default value
Prop inputRef#	Description and type Type: `Ref<HTMLInputElement>`	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 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 \| number`	Default value
Prop type#	Description and type Change the `type` of input for manually handling obfuscation. The `dual` option adds the ability to toggle the obfuscation of the input by adding an icon button as the first `append` element Type: `"text" \| "password" \| "dual"`	Default value `password`
Prop dualToggleProps#	Description and type Additional props to apply to the dual toggle. Extends EuiButtonIcon Type: `Partial<EuiButtonIconPropsForButton>`	Default value

EuiSelect

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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
Prop options#	Description and type Type: `EuiSelectOption[]`	Default value `[]`
Prop isInvalid#	Description and type Type: `boolean`	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 hasNoInitialSelection#	Description and type Simulates no selection by creating an empty, selected, hidden first option Type: `boolean`	Default value `false`
Prop inputRef#	Description and type Type: `Ref<HTMLSelectElement>`	Default value
Prop value#	Description and type Type: `string \| number`	Default value
Prop compressed#	Description and type when `true` creates a shorter height input Type: `boolean`	Default value `false`
Prop prepend#	Description and type Creates an input group with element(s) coming before select. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop append#	Description and type Creates an input group with element(s) coming after select. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value

EuiTextArea

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. 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
Prop icon#	Description and type Type: `IconType \| IconShape`	Default value
Prop isLoading#	Description and type Type: `boolean`	Default value
Prop isInvalid#	Description and type Type: `boolean`	Default value
Prop isClearable#	Description and type Shows a button that allows users to quickly clear the textarea Type: `boolean`	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 compressed#	Description and type Type: `boolean`	Default value
Prop resize#	Description and type Which direction, if at all, should the textarea resize Type: `"none" \| "both" \| "horizontal" \| "vertical"`	Default value `vertical`
Prop inputRef#	Description and type Type: `Ref<HTMLTextAreaElement>`	Default value

EuiFilePicker

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop disabled#	Description and type Type: `boolean`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop id#	Description and type Type: `string`	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 onChange#	Description and type Use as a callback to access the HTML FileList API Type: `(files: FileList) => void`	Default value
Prop display#	Description and type Size or type of display; `default` for normal height, similar to other controls; `large` for taller size Type: `"default" \| "large"`	Default value `large`
Prop compressed#	Description and type Reduces the size to a typical (compressed) input Type: `boolean`	Default value `false`
Prop isInvalid#	Description and type Type: `boolean`	Default value
Prop initialPromptText#	Description and type The content that appears in the dropzone if no file is attached Type: `ReactNode`	Default value `'Select or drag and drop a file'`
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