Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
  • Templates
    • Page template
    • Sitewide search
    • Super date picker
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Auto refresh
    • Color selection
    • Combo box
    • Compressed forms
    • Date picker
    • Expression
    • Filter group
    • Form controls
    • Form layouts
    • Form validation
    • Inline edit
    • Range sliders
    • Search bar
    • Selectable
    • Selection controls
    • Super select
  • Tabular content
    • Data grid
    • Data grid advanced
    • Data grid cells & popovers
    • Data grid schema & columns
    • Data grid style & display
    • Data grid toolbar
    • In-memory tables
    • Tables
  • Editors & Syntax
    • Code
    • Markdown editor
    • Markdown format
    • Markdown plugins
  • Elastic Charts
    • Accessibility features
    • Categorical
    • Creating charts
    • Metric Chart
    • Part to whole comparisons
    • Sizing
    • Time series
  • EUI
  • Forms
  • Super select

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.

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...
Edit this page
Previous
Selection controls
Next
Data grid
  • More complex
  • States
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic