Super select

Wrap your form controls in a form row

Use the

EuiFormRow component to easily and accessibly associate form components with labels, help text, and error text.

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 EuiSuperSelect gives you more control over the display of the options in the dropdown. The dropdownDisplay prop gives you the ability to pass in custom React nodes for each option, allowing for multi-line option text or descriptions.

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

Loading...

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.

Loading...

States

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

Loading...

Props

EuiSuperSelect

Extends ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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 readOnly# ↦	Description and type Type: boolean ↦	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 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 ↵

𐘂𐘂