Selection controls

EUI currently offers over 4 ways to select an option from a list (6 including checkboxes and radios).

While it can get overwhelming figuring out which component to use, this page should serve as a handy guide to help you make that decision depending on what features you need.

Which selection component should I use?

Single selection

• When you have a small set of options (<7) and all options are equally important in terms of visibility, use EuiRadioGroup.
• When you have a small set of options (<12) and only the current selected option has UI importance, reach for EuiSelect first when possible, over other more complex selection components.

  • Native form controls tend to have better cross-browser and cross-device affordances (particularly for mobile devices), and are more familiar to end users due to their ubiquity across the internet.
• When you have a small set of options (<12) and if you need to customize how the options are rendered and selected, use EuiSuperSelect.

  • We recommend reaching for EuiSuperSelect only if custom option display is absolutely necessary (e.g. for multi-line option text/descriptions), as EuiSelect is natively more accessible.
• Large sets of options (>12) should use a selection component that supports searching/filtering options. This requires the use of one of the more advanced multiselect components with singleSelection set.

Multiple selections

• When you have a small set of options (<7), and all options are equally important in terms of visibility, use EuiCheckboxGroup.

• In general, we recommend using EuiSelectable for most multi-selection purposes. It renders a searchable, vertically-oriented list with icons next to the option representing selection state.

  • EuiSelectable can optionally be rendered with a search box for filtering through many options, or as just a list for fewer options.
  • EuiSelectable is by far our most accessible and flexible selection component (although customization may require extra development). It can be used within popovers and flyouts, or as a standalone list.
  • If you need the ability to exclude options, EuiSelectable is the only component that offers that functionality.
• In general, for multi-select scenarios, we recommend using EuiComboBox over EuiSelectable primarily when selections should be immediately visible and unselected options should not. Selections are rendered as a horizontally-oriented list of pills.

  • EuiComboBox also allows users to search through a list of dropdown options. This functionality is core to the component and cannot be removed, unlike EuiSelectable.
  • If you need the ability to dynamically add custom user-generated input outside of the available options, EuiComboBox is the only component that offers that functionality.

Feature comparison chart

Below is a handy reference for comparing the selection components.

Feature	EuiSelect	EuiSuperSelect	EuiSelectable	EuiComboBox
Select a single option	✅	✅	✅	✅
Select multiple options	❌	❌	✅	✅
Accepts custom values from user input	❌	❌	❌	✅
Option exclusion	❌	❌	✅	❌
Customizable option display	❌	✅	✅	✅
Customizable loading/error messages	❌	❌	✅	❌
Searchable	❌	❌	✅	✅
disabled state	✅	✅	✅	✅
readOnly state	❌	✅	❌	❌
Built in utility function for clearing user input	❌	❌	✅	✅
Supports virtualization	❌	❌	✅	✅