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