SuperSelect

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.

Select an option:
Minor
, is selected

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.

Select an option: Option one, is selected

States

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

Select an option: Option two, is selected