Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
      • Component comparison
      • Checkboxes and radios
      • Guidelines
      • Basic select
      • Super select
      • Combo box
      • Selectable
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Data grid
  • Tables
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Selection controls
  • Super select

Super select

EuiSuperSelect is a flexible alternative to EuiSelect that lets you customize the input and option displays. Provide an array of option objects with:

  • value: a unique value for each item,
  • inputDisplay: what appears in the input when selected,
  • dropdownDisplay: (optional) custom React nodes for multi-line option text or descriptions.

The component creates a select-style button that opens a popover with selectable items.

For more details on which selection component to use, see the Component comparison.

Loading...

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.

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
↵
𐘂𐘂
Edit this page

Previous
Basic select
Next
Combo box
  • More complex
  • States
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic