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: , is selected
Minor
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