Form controls

---

EUI provides different types of basic form controls:

EuiFieldText, EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, EuiSelect, EuiTextArea, and EuiFilePicker.

warning

Wrap each of your from controls in a EuiFormRow

Use the EuiFormRow component to easily associate form components with labels, help text, and error text. For accessibility, you must provide a

label, aria-label , or a text node ID of an external label to the aria-labelledby prop.

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.

Additional padding required

The padding on the input itself doesn't take into account the presence of the various icons supported by EuiFormControlLayout. Any input component provided to EuiFormControlLayout is responsible for its own padding.

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).