Form controls
Text field
Search field
Number field
Password field
Select
This component renders a basic HTML <select> element. If you need more customization for how the options and/or selected values render, use the EuiSuperSelect. Another option is to use the EuiComboBox, which has search and multi-select capabilities, but also has restrictions on how items are rendered.
Textarea
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.
Files attached
Add some files to see a demo of retrieving from the FileList
Checkbox
Checkbox group
Disabled
Individually disabled checkbox
Radio
Radio group
Disabled
Switch
I am a switch
I am a disabled switch
I am a compressed switch
I am a compressed, disabled switch
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" />.
compressed
disabled
readOnly
Form control layout
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.
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
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).