Form controls
EUI provides different types of basic form controls: EuiFieldText, EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, EuiSelect, EuiTextArea, and EuiFilePicker.
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.
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).