Super select

Not sure which selection component to use?

See EUI's in-depth guide to selection components for more information.

This is a simple replacement component for EuiSelect if you need more customization in either the display of the input or option. Simply pass an array of option objects:

value: for storing unique value of item,
inputDisplay: what shows inside the form input when selected,
dropdownDisplay: (optional) what shows for the item in the dropdown

… and the component will create a select styled button that triggers a popover of selectable items.

More complex

Both inputDisplay and dropdownDisplay accept React nodes. Therefore you can pass some descriptions with each option to show in the dropdown. If your options will most likely be multi-line, add the hasDividers prop to show borders between options.

A placeholder prop may also be passed that accepts string as well as React nodes (to match your inputDisplay if necessary). This placeholder will only show when valueOfSelected is empty.

States

You can pass the same props as you normally would to EuiSelect like disabled, isLoading, compressed, etc…