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…

Props

EuiSuperSelect

Extends InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes


Prop	Description and type	Default value
Prop options#	Description and type Pass an array of options that must at least include: `value`: storing unique value of item, `inputDisplay`: what shows inside the form input when selected `dropdownDisplay` (optional): what shows for the item in the dropdown Type: `EuiSuperSelectOption<T>[]`	Default value Required
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop append#	Description and type Creates an input group with element(s) coming after input. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop prepend#	Description and type Creates an input group with element(s) coming before input. `string` \| `ReactElement` or an array of these Type: `PrependAppendType`	Default value
Prop name#	Description and type Type: `string`	Default value
Prop fullWidth#	Description and type Expand to fill 100% of the parent. Defaults to `fullWidth` prop of `<EuiForm>`. Type: `boolean`	Default value `false`
Prop isLoading#	Description and type Type: `boolean`	Default value `false`
Prop buttonRef#	Description and type Type: `Ref<HTMLButtonElement>`	Default value
Prop compressed#	Description and type Type: `boolean`	Default value `false`
Prop placeholder#	Description and type Placeholder to display when the current selected value is empty. Type: `ReactNode`	Default value
Prop readOnly#	Description and type Type: `boolean`	Default value
Prop isInvalid#	Description and type Type: `boolean`	Default value `false`
Prop valueOfSelected#	Description and type Type: `{}`	Default value
Prop itemClassName#	Description and type Classes for the context menu item Type: `string`	Default value
Prop onChange#	Description and type You must pass an `onChange` function to handle the update of the value Type: `(value: T) => void`	Default value
Prop onFocus#	Description and type Type: `(event?: FocusEvent<Element, Element>) => void`	Default value
Prop onBlur#	Description and type Type: `(event?: FocusEvent<Element, Element>) => void`	Default value
Prop hasDividers#	Description and type Change to `true` if you want horizontal lines between options. This is best used when options are multi-line. Type: `boolean`	Default value `false`
Prop itemLayoutAlign#	Description and type Change `EuiContextMenuItem` layout position of icon Type: `EuiContextMenuItemLayoutAlignment`	Default value
Prop isOpen#	Description and type Controls whether the options are shown. Default: false Type: `boolean`	Default value
Prop popoverProps#	Description and type Optional props to pass to the underlying EuiInputPopover. Allows fine-grained control of the popover dropdown menu, including `repositionOnScroll` for EuiSuperSelects used within scrollable containers, and customizing popover panel styling. Does not accept a nested `popoverProps.isOpen` property - use the top level `isOpen` API instead. Type: `Partial<CommonProps & Omit<EuiInputPopoverProps, "isOpen">>`	Default value