diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index 3cd372eee80..ea232ba2ded 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -3,13 +3,13 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { GuideSectionTypes } from '../../components';
-import { EuiCallOut } from '../../../../src';
import {
EuiLink,
EuiCode,
EuiComboBox,
EuiText,
+ EuiCallOut,
} from '../../../../src/components';
import { EuiComboBoxOptionOption } from '!!prop-loader!../../../../src/components/combo_box/types';
@@ -245,31 +245,36 @@ const labelledbySnippet = `
-
-
- Use a EuiComboBox when the input has so many options
- that the user needs to be able to search them, the user needs to be
- able to select multiple options, and/or the user should have the
- ability to specify a custom value in addition to selecting from a
- predetermined list.
-
-
- You must add an accessible label to each instance of{' '}
- EuiComboBox
- >
- }
+
+
+ Use a EuiComboBox when the input has so many options
+ that the user needs to be able to search them, the user needs to be able
+ to select multiple options, and/or the user should have the ability to
+ specify a custom value in addition to selecting from a predetermined
+ list. If you're unsure of which selection component to use, see{' '}
+
- Labels can be created by wrapping the combo box in an{' '}
- EuiFormRow with a label, adding an{' '}
- aria-label prop, or passing a text node ID to the{' '}
- aria-labelledby prop.
-
-
- >
+ EUI's in-depth guide to selection components
+ {' '}
+ for more information.
+
+
+ You must add an accessible label to each instance of{' '}
+ EuiComboBox
+ >
+ }
+ >
+ Labels can be created by wrapping the combo box in an{' '}
+ EuiFormRow with a label, adding an{' '}
+ aria-label prop, or passing a text node ID to the{' '}
+ aria-labelledby prop.
+
+
),
sections: [
{
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index 83c618ec61f..04e18077c66 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -321,17 +321,15 @@ export const FormControlsExample = {
.
- If you need more customization for how the options and/or selected
- values render, you can use an{' '}
-
- EuiSuperSelect
- {' '}
- instead. For long lists of options use an{' '}
-
- EuiComboBox
-
- , which has search and multi-select capabilities, but also has
- restrictions on how items are rendered.
+ If you need more customization for searching or rendering options,
+ see{' '}
+
+ EUI's guide on selection components
+ {' '}
+ .
>
),
diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js
index 4a2898c18e0..5cefe6c4537 100644
--- a/src-docs/src/views/selectable/selectable_example.js
+++ b/src-docs/src/views/selectable/selectable_example.js
@@ -9,6 +9,7 @@ import {
EuiSelectableMessage,
EuiText,
EuiCallOut,
+ EuiLink,
} from '../../../../src';
import {
@@ -69,7 +70,14 @@ export const SelectableExample = {
{' '}
but can be used to simplify the construction of popover navigational
menus; i.e. the spaces menu in the{' '}
- header.
+ header. See{' '}
+
+ EUI's in-depth guide on which selection component to use{' '}
+ {' '}
+ for more information.
),
diff --git a/src-docs/src/views/super_select/super_select_example.js b/src-docs/src/views/super_select/super_select_example.js
index cd8e4cac02c..2416c0d0a52 100644
--- a/src-docs/src/views/super_select/super_select_example.js
+++ b/src-docs/src/views/super_select/super_select_example.js
@@ -2,7 +2,12 @@ import React from 'react';
import { GuideSectionTypes } from '../../components';
-import { EuiCode, EuiSuperSelect } from '../../../../src/components';
+import {
+ EuiCode,
+ EuiSuperSelect,
+ EuiLink,
+ EuiCallOut,
+} from '../../../../src/components';
import SuperSelectBasic from './super_select_basic';
const superSelectBasicSource = require('!!raw-loader!./super_select_basic');
@@ -54,6 +59,23 @@ const superSelectStatesSnippet = `
+