diff --git a/package.json b/package.json
index adc34d19005b..09fa30bb9d02 100644
--- a/package.json
+++ b/package.json
@@ -178,7 +178,6 @@
     "react-markdown": "^3.1.4",
     "react-redux": "^5.0.6",
     "react-router-dom": "4.2.2",
-    "react-select": "^1.2.0",
     "react-sizeme": "^2.3.6",
     "react-toggle": "4.0.2",
     "reactcss": "1.2.3",
diff --git a/src/core_plugins/kibana/public/dashboard/styles/index.less b/src/core_plugins/kibana/public/dashboard/styles/index.less
index 34697ed6e998..6815a423a13d 100644
--- a/src/core_plugins/kibana/public/dashboard/styles/index.less
+++ b/src/core_plugins/kibana/public/dashboard/styles/index.less
@@ -247,7 +247,6 @@ dashboard-viewport-provider {
 /**
  * 1. Fix Firefox bug where a value of overflow: hidden will prevent scrolling in a panel where the spy panel does
  * not have enough room.
- * 2. react-select used in input control vis needs `visible` overflow to avoid clipping selection list
  */
 .dashboard-panel {
   z-index: auto;
@@ -259,7 +258,7 @@ dashboard-viewport-provider {
   background: @dashboard-panel-bg;
   color: @dashboard-panel-color;
   padding: 0;
-  overflow: visible; /* 1, 2 */
+  overflow: visible; /* 1 */
 
   position: relative;
 
diff --git a/src/core_plugins/metrics/public/components/aggs/agg_select.js b/src/core_plugins/metrics/public/components/aggs/agg_select.js
index 595bed2e0dd3..91e3c9478b15 100644
--- a/src/core_plugins/metrics/public/components/aggs/agg_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/agg_select.js
@@ -18,8 +18,10 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Select from 'react-select';
+import React from 'react';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 
 const metricAggs = [
   { label: 'Average', value: 'avg' },
@@ -63,89 +65,12 @@ const specialAggs = [
   { label: 'Math', value: 'math' },
 ];
 
-class AggSelectOption extends Component {
-  constructor(props) {
-    super(props);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
-  handleMouseDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.props.onSelect(this.props.option, event);
-  }
-
-  handleMouseEnter(event) {
-    this.props.onFocus(this.props.option, event);
-  }
-
-  handleMouseMove(event) {
-    if (this.props.isFocused) return;
-    this.props.onFocus(this.props.option, event);
-  }
-
-  render() {
-    const { label, heading, pipeline } = this.props.option;
-    const style = {
-      paddingLeft: heading ? 0 : 10,
-    };
-    // We can ignore that the <div> does not have keyboard handlers even though
-    // it has mouse handlers, since react-select still takes care, that this works
-    // well with keyboard.
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    if (heading) {
-      let note;
-      if (pipeline) {
-        note = (
-          <span className="vis_editor__agg_select-note">
-            (requires child aggregation)
-          </span>
-        );
-      }
-      return (
-        <div
-          className="Select-option vis_editor__agg_select-heading"
-          onMouseEnter={this.handleMouseEnter}
-          onMouseDown={this.handleMouseDown}
-          onMouseMove={this.handleMouseMove}
-          aria-label={label}
-        >
-          <span className="Select-value-label" style={style}>
-            <strong>{label}</strong>
-            {note}
-          </span>
-        </div>
-      );
-    }
-    return (
-      <div
-        className={this.props.className}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseDown={this.handleMouseDown}
-        onMouseMove={this.handleMouseMove}
-        aria-label={label}
-      >
-        <span className="Select-value-label" style={style}>
-          {this.props.children}
-        </span>
-      </div>
-    );
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
-  }
-}
-
-AggSelectOption.props = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onSelect: PropTypes.func,
-  option: PropTypes.object.isRequired,
-};
+const allAggOptions = [
+  ...metricAggs,
+  ...pipelineAggs,
+  ...siblingAggs,
+  ...specialAggs
+];
 
 function filterByPanelType(panelType) {
   return agg => {
@@ -155,7 +80,12 @@ function filterByPanelType(panelType) {
 }
 
 function AggSelect(props) {
-  const { siblings, panelType } = props;
+  const { siblings, panelType, value } = props;
+
+  const selectedOption = allAggOptions.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
 
   let enablePipelines = siblings.some(
     s => !!metricAggs.find(m => m.value === s.type)
@@ -169,55 +99,39 @@ function AggSelect(props) {
     options = [
       {
         label: 'Metric Aggregations',
-        value: null,
-        heading: true,
-        disabled: true,
+        options: metricAggs,
       },
-      ...metricAggs,
       {
         label: 'Parent Pipeline Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: pipelineAggs
+          .filter(filterByPanelType(panelType))
+          .map(agg => ({ ...agg, disabled: !enablePipelines }))
       },
-      ...pipelineAggs
-        .filter(filterByPanelType(panelType))
-        .map(agg => ({ ...agg, disabled: !enablePipelines })),
       {
         label: 'Sibling Pipeline Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       },
-      ...siblingAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       {
         label: 'Special Aggregations',
-        value: null,
-        pipeline: true,
-        heading: true,
-        disabled: true,
+        options: specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
       },
-      ...specialAggs.map(agg => ({ ...agg, disabled: !enablePipelines })),
     ];
   }
 
-  const handleChange = value => {
-    if (!value) return;
-    if (value.disabled) return;
-    if (value.value) props.onChange(value);
+  const handleChange = selectedOptions => {
+    if (!selectedOptions || selectedOptions.length <= 0) return;
+    props.onChange(selectedOptions);
   };
 
   return (
     <div data-test-subj="aggSelector" className="vis_editor__row_item">
-      <Select
-        aria-label="Select aggregation"
-        clearable={false}
+      <EuiComboBox
+        isClearable={false}
+        placeholder="Select aggregation"
         options={options}
-        value={props.value}
-        optionComponent={AggSelectOption}
+        selectedOptions={selectedOptions}
         onChange={handleChange}
+        singleSelection={true}
       />
     </div>
   );
diff --git a/src/core_plugins/metrics/public/components/aggs/field_select.js b/src/core_plugins/metrics/public/components/aggs/field_select.js
index 8d5d8f7d1cad..175ae7126bc6 100644
--- a/src/core_plugins/metrics/public/components/aggs/field_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/field_select.js
@@ -19,11 +19,13 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 import generateByTypeFilter from '../lib/generate_by_type_filter';
 
 function FieldSelect(props) {
-  const { type, fields, indexPattern } = props;
+  const { type, fields, indexPattern, value, onChange, disabled } = props;
   if (type === 'count') {
     return null;
   }
@@ -33,14 +35,19 @@ function FieldSelect(props) {
       return { label: field.name, value: field.name };
     });
 
+  const selectedOption = options.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
+
   return (
-    <Select
-      inputProps={{ id: props.id }}
+    <EuiComboBox
       placeholder="Select field..."
-      disabled={props.disabled}
+      isDisabled={disabled}
       options={options}
-      value={props.value}
-      onChange={props.onChange}
+      selectedOptions={selectedOptions}
+      onChange={onChange}
+      singleSelection={true}
     />
   );
 }
diff --git a/src/core_plugins/metrics/public/components/aggs/metric_select.js b/src/core_plugins/metrics/public/components/aggs/metric_select.js
index 8247a12b96a8..fb12f085a625 100644
--- a/src/core_plugins/metrics/public/components/aggs/metric_select.js
+++ b/src/core_plugins/metrics/public/components/aggs/metric_select.js
@@ -20,7 +20,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 import calculateSiblings from '../lib/calculate_siblings';
 import calculateLabel from '../../../common/calculate_label';
 import basicAggs from '../../../common/basic_aggs';
@@ -86,14 +88,20 @@ function MetricSelect(props) {
     const label = calculateLabel(row, metrics);
     return { value: row.id, label };
   });
+  const allOptions = [...options, ...props.additionalOptions, ...percentileOptions];
+
+  const selectedOption = allOptions.find(option => {
+    return value === option.value;
+  });
+  const selectedOptions = selectedOption ? [selectedOption] : [];
 
   return (
-    <Select
-      aria-label="Select metric"
+    <EuiComboBox
       placeholder="Select metric..."
-      options={[...options, ...props.additionalOptions, ...percentileOptions]}
-      value={value}
+      options={allOptions}
+      selectedOptions={selectedOptions}
       onChange={onChange}
+      singleSelection={true}
     />
   );
 }
diff --git a/src/core_plugins/metrics/public/components/aggs/moving_average.js b/src/core_plugins/metrics/public/components/aggs/moving_average.js
index 780b529dc6f8..245037c8959f 100644
--- a/src/core_plugins/metrics/public/components/aggs/moving_average.js
+++ b/src/core_plugins/metrics/public/components/aggs/moving_average.js
@@ -22,12 +22,14 @@ import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import MetricSelect from './metric_select';
-import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import createNumberHandler from '../lib/create_number_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const MovingAverageAgg = props => {
   const { siblings } = props;
@@ -54,6 +56,13 @@ export const MovingAverageAgg = props => {
     { label: 'False', value: 0 }
   ];
   const htmlId = htmlIdGenerator();
+  const selectedModelOption = modelOptions.find(option => {
+    return model.model === option.value;
+  });
+  const selectedMinimizeOption = minimizeOptions.find(option => {
+    return model.minimize === option.value;
+  });
+
   return (
     <AggRow
       disableDelete={props.disableDelete}
@@ -86,13 +95,14 @@ export const MovingAverageAgg = props => {
         <div className="vis_editor__agg_row-item">
           <div className="vis_editor__row_item">
             <label className="vis_editor__label" htmlFor={htmlId('model')}>Model</label>
-            <Select
-              inputProps={{ id: htmlId('model') }}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('model')}
               placeholder="Select..."
-              onChange={handleSelectChange('model')}
-              value={props.model.model}
               options={modelOptions}
+              selectedOptions={selectedModelOption ? [selectedModelOption] : []}
+              onChange={handleSelectChange('model')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__row_item">
@@ -109,12 +119,13 @@ export const MovingAverageAgg = props => {
           </div>
           <div className="vis_editor__row_item">
             <label className="vis_editor__label" htmlFor={htmlId('minimize')}>Minimize</label>
-            <Select
-              inputProps={{ id: htmlId('minimize') }}
+            <EuiComboBox
+              id={htmlId('minimize')}
               placeholder="Select..."
-              onChange={handleSelectChange('minimize')}
-              value={model.minimize}
               options={minimizeOptions}
+              selectedOptions={selectedMinimizeOption ? [selectedMinimizeOption] : []}
+              onChange={handleSelectChange('minimize')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__row_item">
diff --git a/src/core_plugins/metrics/public/components/aggs/percentile.js b/src/core_plugins/metrics/public/components/aggs/percentile.js
index cef3e0a8af83..c9744a8c6934 100644
--- a/src/core_plugins/metrics/public/components/aggs/percentile.js
+++ b/src/core_plugins/metrics/public/components/aggs/percentile.js
@@ -25,11 +25,13 @@ import FieldSelect from './field_select';
 import AggRow from './agg_row';
 import * as collectionActions from '../lib/collection_actions';
 import AddDeleteButtons from '../add_delete_buttons';
-import Select from 'react-select';
 import uuid from 'uuid';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 const newPercentile = (opts) => {
   return _.assign({ id: uuid.v1(), mode: 'line', shade: 0.2 }, opts);
 };
@@ -45,7 +47,7 @@ class Percentiles extends Component {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
       const part = {};
-      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
       handleChange(_.assign({}, item, part));
     };
   }
@@ -64,6 +66,9 @@ class Percentiles extends Component {
       optionsStyle.display = 'none';
     }
     const htmlId = htmlIdGenerator(model.id);
+    const selectedModeOption = modeOptions.find(option => {
+      return model.mode === option.value;
+    });
     return  (
       <div className="vis_editor__percentiles-row" key={model.id}>
         <div className="vis_editor__percentiles-content">
@@ -78,12 +83,13 @@ class Percentiles extends Component {
           />
           <label className="vis_editor__label" htmlFor={htmlId('mode')}>Mode</label>
           <div className="vis_editor__row_item">
-            <Select
-              inputProps={{ id: htmlId('mode') }}
-              clearable={false}
-              onChange={this.handleTextChange(model, 'mode')}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('mode')}
               options={modeOptions}
-              value={model.mode}
+              selectedOptions={selectedModeOption ? [selectedModeOption] : []}
+              onChange={this.handleTextChange(model, 'mode')}
+              singleSelection={true}
             />
           </div>
           <label style={optionsStyle} className="vis_editor__label" htmlFor={htmlId('fillTo')}>
diff --git a/src/core_plugins/metrics/public/components/aggs/series_agg.js b/src/core_plugins/metrics/public/components/aggs/series_agg.js
index f4dc56fa5cc3..89d708dfd520 100644
--- a/src/core_plugins/metrics/public/components/aggs/series_agg.js
+++ b/src/core_plugins/metrics/public/components/aggs/series_agg.js
@@ -20,11 +20,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import AggSelect from './agg_select';
-import Select from 'react-select';
 import AggRow from './agg_row';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 function SeriesAgg(props) {
   const { panel, model } = props;
@@ -45,6 +47,9 @@ function SeriesAgg(props) {
     { label: 'Overall Avg', value: 'overall_avg' },
     { label: 'Cumlative Sum', value: 'cumlative_sum' },
   ];
+  const selectedFunctionOption = functionOptions.find(option => {
+    return model.function === option.value;
+  });
 
   if (panel.type === 'table') {
     return (
@@ -83,11 +88,12 @@ function SeriesAgg(props) {
       </div>
       <div className="vis_editor__item">
         <label className="vis_editor__label" htmlFor={htmlId('function')}>Function</label>
-        <Select
-          inputProps={{ id: htmlId('function') }}
-          value={model.function}
+        <EuiComboBox
+          id={htmlId('function')}
           options={functionOptions}
+          selectedOptions={selectedFunctionOption ? [selectedFunctionOption] : []}
           onChange={handleSelectChange('function')}
+          singleSelection={true}
         />
       </div>
     </AggRow>
diff --git a/src/core_plugins/metrics/public/components/aggs/std_deviation.js b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
index e714532d415b..d8e4e96720c2 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_deviation.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_deviation.js
@@ -22,11 +22,13 @@ import React from 'react';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
 import AggRow from './agg_row';
-import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const StandardDeviationAgg = props => {
   const { series, panel, fields } = props;
@@ -49,6 +51,9 @@ export const StandardDeviationAgg = props => {
 
   const indexPattern = series.override_index_pattern && series.series_index_pattern || panel.index_pattern;
   const htmlId = htmlIdGenerator();
+  const selectedModeOption = modeOptions.find(option => {
+    return model.mode === option.value;
+  });
 
   return (
     <AggRow
@@ -90,11 +95,12 @@ export const StandardDeviationAgg = props => {
       </div>
       <div className="vis_editor__row_item">
         <label className="vis_editor__label" htmlFor={htmlId('mode')}>Mode</label>
-        <Select
-          inputProps={{ id: htmlId('mode') }}
+        <EuiComboBox
+          id={htmlId('mode')}
           options={modeOptions}
+          selectedOptions={selectedModeOption ? [selectedModeOption] : []}
           onChange={handleSelectChange('mode')}
-          value={model.mode}
+          singleSelection={true}
         />
       </div>
     </AggRow>
diff --git a/src/core_plugins/metrics/public/components/aggs/std_sibling.js b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
index 69fdaeb49a0e..4e4fe2e9e940 100644
--- a/src/core_plugins/metrics/public/components/aggs/std_sibling.js
+++ b/src/core_plugins/metrics/public/components/aggs/std_sibling.js
@@ -22,11 +22,13 @@ import React from 'react';
 import AggRow from './agg_row';
 import MetricSelect from './metric_select';
 import AggSelect from './agg_select';
-import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const StandardSiblingAgg = props => {
   const { siblings } = props;
@@ -58,15 +60,19 @@ export const StandardSiblingAgg = props => {
       { label: 'Lower Bound', value: 'lower' },
       { label: 'Bounds Band', value: 'band' }
     ];
+    const selectedModeOption = modeOptions.find(option => {
+      return model.mode === option.value;
+    });
 
     stdDev.mode = (
       <div className="vis_editor__row_item">
         <label className="vis_editor__label" htmlFor={htmlId('mode')}>Mode</label>
-        <Select
-          inputProps={{ id: htmlId('mode') }}
+        <EuiComboBox
+          id={htmlId('mode')}
           options={modeOptions}
+          selectedOptions={selectedModeOption ? [selectedModeOption] : []}
           onChange={handleSelectChange('mode')}
-          value={model.mode}
+          singleSelection={true}
         />
       </div>
     );
diff --git a/src/core_plugins/metrics/public/components/aggs/top_hit.js b/src/core_plugins/metrics/public/components/aggs/top_hit.js
index 9204c5560e6d..bfda4f9780c7 100644
--- a/src/core_plugins/metrics/public/components/aggs/top_hit.js
+++ b/src/core_plugins/metrics/public/components/aggs/top_hit.js
@@ -21,11 +21,13 @@ import React from 'react';
 import AggRow from './agg_row';
 import AggSelect from './agg_select';
 import FieldSelect from './field_select';
-import Select from 'react-select';
 import createChangeHandler from '../lib/create_change_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const TopHitAgg = props => {
   const { fields, series, panel } = props;
@@ -56,6 +58,12 @@ export const TopHitAgg = props => {
   ];
 
   const htmlId = htmlIdGenerator();
+  const selectedAggWithOption = aggWithOptions.find(option => {
+    return model.agg_with === option.value;
+  });
+  const selectedOrderOption = orderOptions.find(option => {
+    return model.order === option.value;
+  });
   return (
     <AggRow
       disableDelete={props.disableDelete}
@@ -106,13 +114,14 @@ export const TopHitAgg = props => {
             <label className="vis_editor__label" htmlFor={htmlId('agg_with')}>
               Aggregate with
             </label>
-            <Select
-              inputProps={{ id: htmlId('agg_with') }}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('agg_with')}
               placeholder="Select..."
-              onChange={handleSelectChange('agg_with')}
-              value={model.agg_with}
               options={aggWithOptions}
+              selectedOptions={selectedAggWithOption ? [selectedAggWithOption] : []}
+              onChange={handleSelectChange('agg_with')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__row_item">
@@ -132,13 +141,14 @@ export const TopHitAgg = props => {
             <label className="vis_editor__label" htmlFor={htmlId('order')}>
               Order
             </label>
-            <Select
-              inputProps={{ id: htmlId('order') }}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('order')}
               placeholder="Select..."
-              onChange={handleSelectChange('order')}
-              value={model.order}
               options={orderOptions}
+              selectedOptions={selectedOrderOption ? [selectedOrderOption] : []}
+              onChange={handleSelectChange('order')}
+              singleSelection={true}
             />
           </div>
         </div>
diff --git a/src/core_plugins/metrics/public/components/aggs/vars.js b/src/core_plugins/metrics/public/components/aggs/vars.js
index 9caf1ed82fc8..f80537ebd204 100644
--- a/src/core_plugins/metrics/public/components/aggs/vars.js
+++ b/src/core_plugins/metrics/public/components/aggs/vars.js
@@ -35,7 +35,7 @@ class CalculationVars extends Component {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
       const part = {};
-      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
       handleChange(_.assign({}, item, part));
     };
   }
diff --git a/src/core_plugins/metrics/public/components/annotations_editor.js b/src/core_plugins/metrics/public/components/annotations_editor.js
index c6b1de0e74de..b7c97455c7b7 100644
--- a/src/core_plugins/metrics/public/components/annotations_editor.js
+++ b/src/core_plugins/metrics/public/components/annotations_editor.js
@@ -56,7 +56,7 @@ class AnnotationsEditor extends Component {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
       const part = {};
-      part[name] = _.get(e, 'value', _.get(e, 'target.value'));
+      part[name] = _.get(e, '[0].value', _.get(e, 'target.value'));
       handleChange(_.assign({}, item, part));
     };
   }
diff --git a/src/core_plugins/metrics/public/components/color_rules.js b/src/core_plugins/metrics/public/components/color_rules.js
index c507fb8f38a8..dfec571167eb 100644
--- a/src/core_plugins/metrics/public/components/color_rules.js
+++ b/src/core_plugins/metrics/public/components/color_rules.js
@@ -21,10 +21,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
 import AddDeleteButtons from './add_delete_buttons';
-import Select from 'react-select';
 import * as collectionActions from './lib/collection_actions';
 import ColorPicker from './color_picker';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 class ColorRules extends Component {
 
@@ -37,7 +39,7 @@ class ColorRules extends Component {
     return (e) => {
       const handleChange = collectionActions.handleChange.bind(null, this.props);
       const part = {};
-      part[name] = cast(_.get(e, 'value', _.get(e, 'target.value')));
+      part[name] = cast(_.get(e, '[0].value', _.get(e, 'target.value')));
       if (part[name] === 'undefined') part[name] = undefined;
       if (part[name] === NaN) part[name] = undefined;
       handleChange(_.assign({}, item, part));
@@ -60,6 +62,10 @@ class ColorRules extends Component {
       handleChange(_.assign({}, model, part));
     };
     const htmlId = htmlIdGenerator(model.id);
+    const selectedOperatorOption = operatorOptions.find(option => {
+      return model.opperator === option.value;
+    });
+
     let secondary;
     if (!this.props.hideSecondary) {
       secondary = (
@@ -86,11 +92,12 @@ class ColorRules extends Component {
           if metric is
         </label>
         <div className="color_rules__item">
-          <Select
-            inputProps={{ id: htmlId('ifMetricIs') }}
-            onChange={this.handleChange(model, 'opperator')}
-            value={model.opperator}
+          <EuiComboBox
+            id={htmlId('ifMetricIs')}
             options={operatorOptions}
+            selectedOptions={selectedOperatorOption ? [selectedOperatorOption] : []}
+            onChange={this.handleChange(model, 'opperator')}
+            singleSelection={true}
           />
         </div>
         <input
diff --git a/src/core_plugins/metrics/public/components/data_format_picker.js b/src/core_plugins/metrics/public/components/data_format_picker.js
index 779bf3dde240..9dbfa1438637 100644
--- a/src/core_plugins/metrics/public/components/data_format_picker.js
+++ b/src/core_plugins/metrics/public/components/data_format_picker.js
@@ -20,7 +20,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import _ from 'lodash';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 import { durationOutputOptions, durationInputOptions } from './lib/durations';
 const durationFormatTest = /[pnumshdwMY]+,[pnumshdwMY]+/;
 
@@ -44,34 +46,46 @@ class DataFormatPicker extends Component {
   }
 
   handleCustomChange() {
-    this.props.onChange({ value: this.custom && this.custom.value || '' });
+    this.props.onChange([{ value: this.custom && this.custom.value || '' }]);
   }
 
-  handleChange(value) {
-    if (value.value === 'custom') {
+  handleChange(selectedOptions) {
+    if (selectedOptions.length < 1) {
+      return;
+    }
+
+    if (selectedOptions[0].value === 'custom') {
       this.handleCustomChange();
-    } else if (value.value === 'duration') {
+    } else if (selectedOptions[0].value === 'duration') {
       const { from, to, decimals } = this.state;
-      this.props.onChange({
+      this.props.onChange([{
         value: `${from},${to},${decimals}`
-      });
+      }]);
     } else {
-      this.props.onChange(value);
+      this.props.onChange(selectedOptions);
     }
   }
 
   handleDurationChange(name) {
-    return (value) => {
-      if (name === 'decimals') {
-        value = this.decimals;
+    return (selectedOptions) => {
+      if (selectedOptions.length < 1) {
+        return;
       }
+
+      let newValue;
+      if (name === 'decimals') {
+        newValue = this.decimals.value;
+      } else {
+        newValue = selectedOptions[0].value;
+      }
+
       this.setState({
-        [name]: value.value
+        [name]: newValue
       }, () => {
         const { from, to, decimals } = this.state;
-        this.props.onChange({
+        this.props.onChange([{
           value: `${from},${to},${decimals}`
-        });
+        }]);
       });
     };
   }
@@ -92,39 +106,51 @@ class DataFormatPicker extends Component {
       { label: 'Duration', value: 'duration' },
       { label: 'Custom', value: 'custom' }
     ];
+    const selectedOption = options.find(option => {
+      return defaultValue === option.value;
+    });
 
     let custom;
     if (defaultValue === 'duration') {
       const [from, to, decimals] = value.split(',');
+      const selectedFrom = durationInputOptions.find(option => {
+        return from === option.value;
+      });
+      const selectedTo = durationOutputOptions.find(option => {
+        return to === option.value;
+      });
       return (
         <div className="vis_editor__data_format_picker-container">
           <div className="vis_editor__label">
             {this.props.label}
           </div>
           <div className="vis_editor__item">
-            <Select
-              clearable={false}
-              value={defaultValue}
+            <EuiComboBox
+              isClearable={false}
               options={options}
+              selectedOptions={selectedOption ? [selectedOption] : []}
               onChange={this.handleChange}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__label">From</div>
           <div className="vis_editor__item">
-            <Select
-              clearable={false}
-              value={from}
+            <EuiComboBox
+              isClearable={false}
               options={durationInputOptions}
+              selectedOptions={selectedFrom ? [selectedFrom] : []}
               onChange={this.handleDurationChange('from')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__label">To</div>
           <div className="vis_editor__item">
-            <Select
-              clearable={false}
-              value={to}
+            <EuiComboBox
+              isClearable={false}
               options={durationOutputOptions}
+              selectedOptions={selectedTo ? [selectedTo] : []}
               onChange={this.handleDurationChange('to')}
+              singleSelection={true}
             />
           </div>
           <div className="vis_editor__label">Decimal Places</div>
@@ -162,11 +188,12 @@ class DataFormatPicker extends Component {
           {this.props.label}
         </div>
         <div className="vis_editor__item">
-          <Select
-            clearable={false}
-            value={defaultValue}
+          <EuiComboBox
+            isClearable={false}
             options={options}
+            selectedOptions={selectedOption ? [selectedOption] : []}
             onChange={this.handleChange}
+            singleSelection={true}
           />
         </div>
         {custom}
diff --git a/src/core_plugins/metrics/public/components/icon_select.js b/src/core_plugins/metrics/public/components/icon_select.js
index f10504a67c88..d56657dba682 100644
--- a/src/core_plugins/metrics/public/components/icon_select.js
+++ b/src/core_plugins/metrics/public/components/icon_select.js
@@ -18,79 +18,14 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Select from 'react-select';
+import React from 'react';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 
-class IconOption extends Component {
-
-  constructor(props) {
-    super(props);
-    this.handleMouseMove = this.handleMouseMove.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
-  }
-
-  handleMouseDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    this.props.onSelect(this.props.option, event);
-  }
-
-  handleMouseEnter(event) {
-    this.props.onFocus(this.props.option, event);
-  }
-
-  handleMouseMove(event) {
-    if (this.props.isFocused) return;
-    this.props.onFocus(this.props.option, event);
-  }
-
-  render() {
-    const icon = this.props.option.value;
-    const label = this.props.option.label;
-    // We can ignore that the <div> does not have keyboard handlers even though
-    // it has mouse handlers, since react-select still takes care, that this works
-    // well with keyboard.
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    return (
-      <div
-        className={this.props.className}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseDown={this.handleMouseDown}
-        onMouseMove={this.handleMouseMove}
-      >
-        <span
-          className="Select-value-label"
-          aria-label={`${label} icon`}
-        >
-          <span
-            className={`vis_editor__icon_select-option kuiIcon ${icon}`}
-            aria-hidden="true"
-          />
-          { this.props.children }
-        </span>
-      </div>
-    );
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
-  }
-
-}
-
-IconOption.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  onFocus: PropTypes.func,
-  onSelect: PropTypes.func,
-  option: PropTypes.object.isRequired,
-};
-
-
-function IconValue(props) {
-  const icon = props.value && props.value.value;
-  const label = props.value && props.value.label;
+function renderOption(option) {
+  const icon = option.value;
+  const label = option.label;
   return (
     <div className="Select-value">
       <span
@@ -98,28 +33,25 @@ function IconValue(props) {
         aria-label={`${label} icon`}
       >
         <span className={`vis_editor__icon_select-value kuiIcon ${icon}`} />
-        { props.children }
+        { label }
       </span>
     </div>
   );
 }
 
-IconValue.propTypes = {
-  children: PropTypes.node,
-  placeholder: PropTypes.string,
-  value: PropTypes.object.isRequired
-};
-
 function IconSelect(props) {
+  const selectedIcon = props.icons.find(option => {
+    return props.value === option.value;
+  });
   return (
-    <Select
-      inputProps={{ id: props.id }}
-      clearable={false}
-      onChange={props.onChange}
-      value={props.value}
-      optionComponent={IconOption}
-      valueComponent={IconValue}
+    <EuiComboBox
+      isClearable={false}
+      id={props.id}
       options={props.icons}
+      selectedOptions={selectedIcon ? [selectedIcon] : []}
+      onChange={props.onChange}
+      singleSelection={true}
+      renderOption={renderOption}
     />
   );
 }
diff --git a/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
index ddb0057be098..cfd74fcfffb7 100644
--- a/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
+++ b/src/core_plugins/metrics/public/components/lib/__tests__/create_select_handler.js
@@ -29,7 +29,7 @@ describe('createSelectHandler()', () => {
     handleChange = sinon.spy();
     changeHandler = createSelectHandler(handleChange);
     const fn = changeHandler('test');
-    fn({ value: 'foo' });
+    fn([{ value: 'foo' }]);
   });
 
   it('calls handleChange() funciton with partial', () => {
diff --git a/src/core_plugins/metrics/public/components/lib/create_select_handler.js b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
index 49c1a900253b..944adccba870 100644
--- a/src/core_plugins/metrics/public/components/lib/create_select_handler.js
+++ b/src/core_plugins/metrics/public/components/lib/create_select_handler.js
@@ -19,10 +19,10 @@
 
 import _ from 'lodash';
 export default (handleChange) => {
-  return (name) => (value) => {
+  return (name) => (selectedOptions) => {
     if (_.isFunction(handleChange)) {
       return handleChange({
-        [name]: value && value.value || null
+        [name]: _.get(selectedOptions, '[0].value', null)
       });
     }
   };
diff --git a/src/core_plugins/metrics/public/components/panel_config/gauge.js b/src/core_plugins/metrics/public/components/panel_config/gauge.js
index ab523807f2a3..043133992663 100644
--- a/src/core_plugins/metrics/public/components/panel_config/gauge.js
+++ b/src/core_plugins/metrics/public/components/panel_config/gauge.js
@@ -21,14 +21,16 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
-import Select from 'react-select';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import ColorRules from '../color_rules';
 import ColorPicker from '../color_picker';
 import uuid from 'uuid';
 import YesNo from '../yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 class GaugePanelConfig extends Component {
 
@@ -71,6 +73,9 @@ class GaugePanelConfig extends Component {
       { label: 'Half Circle', value: 'half' }
     ];
     const htmlId = htmlIdGenerator();
+    const selectedGaugeStyleOption = styleOptions.find(option => {
+      return model.gauge_style === option.value;
+    });
     let view;
     if (selectedTab === 'data') {
       view = (
@@ -129,13 +134,13 @@ class GaugePanelConfig extends Component {
             <label className="vis_editor__label" htmlFor={htmlId('gaugeStyle')}>
               Gauge Style
             </label>
-            <Select
-              inputProps={{ id: htmlId('gaugeStyle') }}
-              autosize={false}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('gaugeStyle')}
               options={styleOptions}
-              value={model.gauge_style}
+              selectedOptions={selectedGaugeStyleOption ? [selectedGaugeStyleOption] : []}
               onChange={handleSelectChange('gauge_style')}
+              singleSelection={true}
             />
 
           </div>
diff --git a/src/core_plugins/metrics/public/components/panel_config/markdown.js b/src/core_plugins/metrics/public/components/panel_config/markdown.js
index 995f54a2c68e..29d419b59669 100644
--- a/src/core_plugins/metrics/public/components/panel_config/markdown.js
+++ b/src/core_plugins/metrics/public/components/panel_config/markdown.js
@@ -22,7 +22,6 @@ import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import { IndexPattern } from '../index_pattern';
 import 'brace/mode/less';
-import Select from 'react-select';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import ColorPicker from '../color_picker';
@@ -30,7 +29,10 @@ import YesNo from '../yes_no';
 import MarkdownEditor from '../markdown_editor';
 import less from 'less/lib/less-browser';
 import { KuiCodeEditor } from '@kbn/ui-framework/components';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 const lessC = less(window, { env: 'production' });
 
 class MarkdownPanelConfig extends Component {
@@ -73,6 +75,9 @@ class MarkdownPanelConfig extends Component {
       { label: 'Middle', value: 'middle' },
       { label: 'Bottom', value: 'bottom' }
     ];
+    const selectedAlignOption = alignOptions.find(option => {
+      return model.markdown_vertical_align === option.value;
+    });
     let view;
     if (selectedTab === 'markdown') {
       view = (<MarkdownEditor {...this.props}/>);
@@ -129,13 +134,13 @@ class MarkdownPanelConfig extends Component {
               Vertical Alignment
             </label>
             <div className="vis_editor__row_item">
-              <Select
-                inputProps={{ id: htmlId('valign') }}
-                autosize={true}
-                clearable={false}
+              <EuiComboBox
+                isClearable={false}
+                id={htmlId('valign')}
                 options={alignOptions}
-                value={model.markdown_vertical_align}
+                selectedOptions={selectedAlignOption ? [selectedAlignOption] : []}
                 onChange={handleSelectChange('markdown_vertical_align')}
+                singleSelection={true}
               />
             </div>
           </div>
diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
index 374139e794f7..85b09047b7d9 100644
--- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js
+++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js
@@ -22,12 +22,14 @@ import React, { Component } from 'react';
 import SeriesEditor from '../series_editor';
 import AnnotationsEditor from '../annotations_editor';
 import { IndexPattern } from '../index_pattern';
-import Select from 'react-select';
 import createSelectHandler from '../lib/create_select_handler';
 import createTextHandler from '../lib/create_text_handler';
 import ColorPicker from '../color_picker';
 import YesNo from '../yes_no';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 class TimeseriesPanelConfig extends Component {
 
@@ -57,15 +59,25 @@ class TimeseriesPanelConfig extends Component {
       { label: 'Right', value: 'right' },
       { label: 'Left', value: 'left' }
     ];
+    const selectedPositionOption = positionOptions.find(option => {
+      return model.axis_position === option.value;
+    });
     const scaleOptions = [
       { label: 'Normal', value: 'normal' },
       { label: 'Log', value: 'log' }
     ];
+    const selectedAxisScaleOption = scaleOptions.find(option => {
+      return model.axis_scale === option.value;
+    });
     const legendPositionOptions = [
       { label: 'Right', value: 'right' },
       { label: 'Left', value: 'left' },
       { label: 'Bottom', value: 'bottom' }
     ];
+    const selectedLegendPosOption = legendPositionOptions.find(option => {
+      return model.legend_position === option.value;
+    });
+
     let view;
     if (selectedTab === 'data') {
       view = (
@@ -112,24 +124,24 @@ class TimeseriesPanelConfig extends Component {
             />
             <label className="vis_editor__label" htmlFor={htmlId('axisPos')}>Axis Position</label>
             <div className="vis_editor__row_item">
-              <Select
-                inputProps={{ id: htmlId('axisPos') }}
-                autosize={false}
-                clearable={false}
+              <EuiComboBox
+                isClearable={false}
+                id={htmlId('axisPos')}
                 options={positionOptions}
-                value={model.axis_position}
+                selectedOptions={selectedPositionOption ? [selectedPositionOption] : []}
                 onChange={handleSelectChange('axis_position')}
+                singleSelection={true}
               />
             </div>
             <label className="vis_editor__label" htmlFor={htmlId('axisPos')}>Axis Scale</label>
             <div className="vis_editor__row_item">
-              <Select
-                inputProps={{ id: htmlId('axisScale') }}
-                autosize={false}
-                clearable={false}
+              <EuiComboBox
+                isClearable={false}
+                id={htmlId('axisScale')}
                 options={scaleOptions}
-                value={model.axis_scale}
+                selectedOptions={selectedAxisScaleOption ? [selectedAxisScaleOption] : []}
                 onChange={handleSelectChange('axis_scale')}
+                singleSelection={true}
               />
             </div>
           </div>
@@ -148,12 +160,13 @@ class TimeseriesPanelConfig extends Component {
             />
             <label className="vis_editor__label" htmlFor={htmlId('legendPos')}>Legend Position</label>
             <div className="vis_editor__row_item">
-              <Select
-                inputProps={{ id: htmlId('legendPos') }}
-                clearable={false}
+              <EuiComboBox
+                isClearable={false}
+                id={htmlId('legendPos')}
                 options={legendPositionOptions}
-                value={model.legend_position}
+                selectedOptions={selectedLegendPosOption ? [selectedLegendPosOption] : []}
                 onChange={handleSelectChange('legend_position')}
+                singleSelection={true}
               />
             </div>
             <div className="vis_editor__label">Display Grid</div>
diff --git a/src/core_plugins/metrics/public/components/splits/group_by_select.js b/src/core_plugins/metrics/public/components/splits/group_by_select.js
index b21c7c6c4f6a..8f377f03fe82 100644
--- a/src/core_plugins/metrics/public/components/splits/group_by_select.js
+++ b/src/core_plugins/metrics/public/components/splits/group_by_select.js
@@ -19,7 +19,9 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 function GroupBySelect(props) {
   const modeOptions = [
     { label: 'Everything', value: 'everything' },
@@ -27,12 +29,17 @@ function GroupBySelect(props) {
     { label: 'Filters', value: 'filters' },
     { label: 'Terms', value: 'terms' }
   ];
+  const selectedValue = props.value || 'everything';
+  const selectedOption = modeOptions.find(option => {
+    return selectedValue === option.value;
+  });
   return (
-    <Select
-      clearable={false}
-      value={props.value || 'everything'}
-      onChange={props.onChange}
+    <EuiComboBox
+      isClearable={false}
       options={modeOptions}
+      selectedOptions={[selectedOption]}
+      onChange={props.onChange}
+      singleSelection={true}
     />
   );
 
diff --git a/src/core_plugins/metrics/public/components/splits/terms.js b/src/core_plugins/metrics/public/components/splits/terms.js
index cf52f400a2cd..2905ad83d2bc 100644
--- a/src/core_plugins/metrics/public/components/splits/terms.js
+++ b/src/core_plugins/metrics/public/components/splits/terms.js
@@ -24,7 +24,9 @@ import createTextHandler from '../lib/create_text_handler';
 import createSelectHandler from '../lib/create_select_handler';
 import FieldSelect from '../aggs/field_select';
 import MetricSelect from '../aggs/metric_select';
-import Select from 'react-select';
+import {
+  EuiComboBox,
+} from '@elastic/eui';
 
 export const SplitByTerms = props => {
   const handleTextChange = createTextHandler(props.onChange);
@@ -40,6 +42,9 @@ export const SplitByTerms = props => {
     { value: 'desc', label: 'Descending' },
     { value: 'asc', label: 'Ascending' },
   ];
+  const selectedDirectionOption = dirOptions.find(option => {
+    return model.terms_direction === option.value;
+  });
 
   return (
     <div className="vis_editor__split-container">
@@ -80,11 +85,12 @@ export const SplitByTerms = props => {
       </div>
       <div className="vis_editor__label">Direction</div>
       <div className="vis_editor__split-aggs">
-        <Select
+        <EuiComboBox
+          isClearable={false}
           options={dirOptions}
-          clearable={false}
-          value={model.terms_direction}
+          selectedOptions={selectedDirectionOption ? [selectedDirectionOption] : []}
           onChange={handleSelectChange('terms_direction')}
+          singleSelection={true}
         />
       </div>
     </div>
diff --git a/src/core_plugins/metrics/public/components/vis_types/table/config.js b/src/core_plugins/metrics/public/components/vis_types/table/config.js
index a44bf35a2501..c3e3646754e5 100644
--- a/src/core_plugins/metrics/public/components/vis_types/table/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/table/config.js
@@ -24,10 +24,12 @@ import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';
 import createTextHandler from '../../lib/create_text_handler';
 import FieldSelect from '../../aggs/field_select';
-import Select from 'react-select';
 import YesNo from '../../yes_no';
 import ColorRules from '../../color_rules';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 class TableSeriesConfig extends Component {
 
@@ -58,6 +60,9 @@ class TableSeriesConfig extends Component {
       { label: 'Overall Avg', value: 'overall_avg' },
       { label: 'Cumlative Sum', value: 'cumlative_sum' },
     ];
+    const selectedAggFuncOption = functionOptions.find(option => {
+      return model.aggregate_function === option.value;
+    });
 
     return (
       <div>
@@ -101,11 +106,12 @@ class TableSeriesConfig extends Component {
             </div>
             <label className="vis_editor__label" htmlFor={htmlId('aggregateFunctionInput')}>Aggregate Function</label>
             <div className="vis_editor__row_item">
-              <Select
-                inputProps={{ id: htmlId('aggregateFunctionInput') }}
-                value={model.aggregate_function}
+              <EuiComboBox
+                id={htmlId('aggregateFunctionInput')}
                 options={functionOptions}
+                selectedOptions={selectedAggFuncOption ? [selectedAggFuncOption] : []}
                 onChange={handleSelectChange('aggregate_function')}
+                singleSelection={true}
               />
             </div>
           </div>
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
index a4aa1c39cffc..811d4204293b 100644
--- a/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
+++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/config.js
@@ -19,13 +19,15 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Select from 'react-select';
 import DataFormatPicker from '../../data_format_picker';
 import createSelectHandler from '../../lib/create_select_handler';
 import YesNo from '../../yes_no';
 import createTextHandler from '../../lib/create_text_handler';
 import { IndexPattern } from '../../index_pattern';
-import { htmlIdGenerator } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiComboBox,
+} from '@elastic/eui';
 
 function TimeseriesConfig(props) {
   const handleSelectChange = createSelectHandler(props.onChange);
@@ -51,21 +53,33 @@ function TimeseriesConfig(props) {
     { label: 'Stacked', value: 'stacked' },
     { label: 'Percent', value: 'percent' }
   ];
+  const selectedStackedOption = stackedOptions.find(option => {
+    return model.stacked === option.value;
+  });
 
   const positionOptions = [
     { label: 'Right', value: 'right' },
     { label: 'Left', value: 'left' }
   ];
+  const selectedAxisPosOption = positionOptions.find(option => {
+    return model.axis_position === option.value;
+  });
 
   const chartTypeOptions = [
     { label: 'Bar', value: 'bar' },
     { label: 'Line', value: 'line' }
   ];
+  const selectedChartTypeOption = chartTypeOptions.find(option => {
+    return model.chart_type === option.value;
+  });
 
   const splitColorOptions = [
     { label: 'Gradient', value: 'gradient' },
     { label: 'Rainbow', value: 'rainbow' }
   ];
+  const selectedSplitColorOption = splitColorOptions.find(option => {
+    return model.split_color_mode === option.value;
+  });
 
   let type;
   if (model.chart_type === 'line') {
@@ -75,24 +89,26 @@ function TimeseriesConfig(props) {
           Chart Type
         </label>
         <div className="vis_editor__item">
-          <Select
-            inputProps={{ id: htmlId('chartType') }}
-            clearable={false}
+          <EuiComboBox
+            isClearable={false}
+            id={htmlId('chartType')}
             options={chartTypeOptions}
-            value={model.chart_type}
+            selectedOptions={selectedChartTypeOption ? [selectedChartTypeOption] : []}
             onChange={handleSelectChange('chart_type')}
+            singleSelection={true}
           />
         </div>
         <label className="vis_editor__label" htmlFor={htmlId('stacked')}>
           Stacked
         </label>
         <div className="vis_editor__item">
-          <Select
-            inputProps={{ id: htmlId('stacked') }}
-            clearable={false}
+          <EuiComboBox
+            isClearable={false}
+            id={htmlId('stacked')}
             options={stackedOptions}
-            value={model.stacked}
+            selectedOptions={selectedStackedOption ? [selectedStackedOption] : []}
             onChange={handleSelectChange('stacked')}
+            singleSelection={true}
           />
         </div>
         <label className="vis_editor__label" htmlFor={htmlId('fill')}>
@@ -142,24 +158,26 @@ function TimeseriesConfig(props) {
           Chart Type
         </label>
         <div className="vis_editor__item">
-          <Select
-            inputProps={{ id: htmlId('chartType') }}
-            clearable={false}
+          <EuiComboBox
+            isClearable={false}
+            id={htmlId('chartType')}
             options={chartTypeOptions}
-            value={model.chart_type}
+            selectedOptions={selectedChartTypeOption ? [selectedChartTypeOption] : []}
             onChange={handleSelectChange('chart_type')}
+            singleSelection={true}
           />
         </div>
         <label className="vis_editor__label" htmlFor={htmlId('stacked')}>
           Stacked
         </label>
         <div className="vis_editor__item">
-          <Select
-            inputProps={{ id: htmlId('stacked') }}
-            clearable={false}
+          <EuiComboBox
+            isClearable={false}
+            id={htmlId('stacked')}
             options={stackedOptions}
-            value={model.stacked}
+            selectedOptions={selectedStackedOption ? [selectedStackedOption] : []}
             onChange={handleSelectChange('stacked')}
+            singleSelection={true}
           />
         </div>
         <label className="vis_editor__label" htmlFor={htmlId('fill')}>
@@ -230,12 +248,13 @@ function TimeseriesConfig(props) {
             Split Color Theme
           </label>
           <div className="vis_editor__row_item">
-            <Select
-              inputProps={{ id: htmlId('splitColor') }}
-              clearable={false}
+            <EuiComboBox
+              isClearable={false}
+              id={htmlId('splitColor')}
               options={splitColorOptions}
-              value={model.split_color_mode}
+              selectedOptions={selectedSplitColorOption ? [selectedSplitColorOption] : []}
               onChange={handleSelectChange('split_color_mode')}
+              singleSelection={true}
             />
           </div>
         </div>
@@ -272,13 +291,14 @@ function TimeseriesConfig(props) {
             Axis Position
           </label>
           <div className="vis_editor__row_item">
-            <Select
-              inputProps={{ id: htmlId('axisPos') }}
-              clearable={false}
-              disabled={disableSeperateYaxis}
+            <EuiComboBox
+              isClearable={false}
+              isDisabled={disableSeperateYaxis}
+              id={htmlId('axisPos')}
               options={positionOptions}
-              value={model.axis_position}
+              selectedOptions={selectedAxisPosOption ? [selectedAxisPosOption] : []}
               onChange={handleSelectChange('axis_position')}
+              singleSelection={true}
             />
           </div>
         </div>
diff --git a/src/dev/precommit_hook/casing_check_config.js b/src/dev/precommit_hook/casing_check_config.js
index a3ed3245a6f1..3ff16892a455 100644
--- a/src/dev/precommit_hook/casing_check_config.js
+++ b/src/dev/precommit_hook/casing_check_config.js
@@ -202,7 +202,6 @@ export const TEMPORARILY_IGNORED_PATHS = [
   'src/ui/public/styles/fonts/glyphicons-halflings-regular.woff2',
   'src/ui/public/styles/list-group-menu.less',
   'src/ui/public/styles/react-input-range.less',
-  'src/ui/public/styles/react-select.less',
   'src/ui/public/styles/theme/font-awesome.less',
   'src/ui/public/styles/variables/bootstrap-mods.less',
   'src/ui/public/styles/variables/for-theme.less',
diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less
index 54f19f6ddb5a..03fcdb9ba6db 100644
--- a/src/ui/public/styles/base.less
+++ b/src/ui/public/styles/base.less
@@ -3,7 +3,6 @@
 @import (reference) "./variables";
 @import (reference) "~ui/styles/bootstrap/bootstrap";
 @import "./react-input-range";
-@import "./react-select";
 
 .small {
   font-size: 0.9em !important;
diff --git a/src/ui/public/styles/dark-theme.less b/src/ui/public/styles/dark-theme.less
index 492869b71fab..eb282daf6801 100644
--- a/src/ui/public/styles/dark-theme.less
+++ b/src/ui/public/styles/dark-theme.less
@@ -593,83 +593,6 @@
   }
 }
 
-
-// react-select
-.theme-dark {
-  .Select-control {
-    background-color: #444444;
-    border: 1px solid #444444;
-    color: #cecece;
-  }
-
-  .is-open > .Select-control {
-    background: #444444;
-    border: 1px solid #444444;
-  }
-
-  .is-focused:not(.is-open) > .Select-control {
-    border-color: #0079a5;
-    box-shadow: none;
-  }
-
-  .Select-menu-outer {
-    border: 1px solid #444444;
-    border-top-color: black;
-  }
-
-  .Select-option {
-    background-color: #444444;
-    color: #cecece;
-  }
-
-  .Select--multi .Select-value {
-    color: #b7e2ea;
-    border: 1px solid #b7e2ea;
-  }
-
-  .Select--multi .Select-value-icon {
-    border-right: 1px solid #b7e2ea;
-  }
-
-
-  .Select-option.is-focused {
-    background-color: #9c9c9c;
-    color: #fff;
-  }
-
-  .Select--multi .Select-value-icon:hover,
-  .Select--multi .Select-value-icon:focus {
-    color: #444444;
-    background-color: #b7e2ea;
-  }
-
-  .has-value.Select--single > .Select-control .Select-value .Select-value-label,
-  .has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
-    color: #cecece;
-  }
-
-  .Select-clear-zone {
-    color: #a6a6a6;
-  }
-
-  .Select-clear-zone:hover {
-    color: black;
-  }
-
-  .Select-arrow {
-    border-color: #a6a6a6 transparent transparent;
-  }
-
-  .is-open > .Select-control .Select-arrow {
-    border-color: transparent transparent black;
-  }
-
-  .is-open .Select-arrow,
-  .Select-arrow-zone:hover > .Select-arrow {
-    border-top-color: black;
-  }
-}
-
 // react-input-range
 .theme-dark {
   .input-range__track {
diff --git a/src/ui/public/styles/react-select.less b/src/ui/public/styles/react-select.less
deleted file mode 100644
index 259b060a0d10..000000000000
--- a/src/ui/public/styles/react-select.less
+++ /dev/null
@@ -1,357 +0,0 @@
-.Select {
-  position: relative;
-}
-.Select,
-.Select div,
-.Select input,
-.Select span {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.Select.is-disabled > .Select-control {
-  background-color: #f9f9f9;
-}
-.Select.is-disabled .Select-arrow-zone {
-  cursor: default;
-  pointer-events: none;
-  opacity: 0.35;
-}
-.Select-control {
-  background: #fbfbfb;
-  color: #3F3F3F;
-  cursor: default;
-  display: table;
-  border-spacing: 0;
-  border-collapse: separate;
-  height: 40px;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  font-size: 14px;
-  border: none;
-  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08), inset -400px 0 0 0 #fbfbfb;
-  transition: box-shadow 250ms ease-in, background 250ms ease-in, -webkit-box-shadow 250ms ease-in;
-  border-radius: 0;
-}
-.Select-control .Select-input:focus {
-  outline: none;
-}
-.is-searchable.is-open > .Select-control {
-  cursor: text;
-}
-.is-open > .Select-control {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-  background: #fff;
-  border-color: #DEDEDE;
-}
-.is-open > .Select-control .Select-arrow {
-  top: -2px;
-  border-color: transparent transparent #191E23;
-  border-width: 0 5px 5px;
-}
-.is-searchable.is-focused:not(.is-open) > .Select-control {
-  cursor: text;
-}
-.is-focused:not(.is-open) > .Select-control {
-  border-color: #0079a5;
-}
-.Select-placeholder,
-.Select--single > .Select-control .Select-value {
-  bottom: 0;
-  color: #757575;
-  left: 0;
-  line-height: 34px;
-  padding-left: 10px;
-  padding-right: 10px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.has-value.Select--single > .Select-control .Select-value .Select-value-label,
-.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label {
-  color: #333;
-}
-.has-value.Select--single > .Select-control .Select-value a.Select-value-label,
-.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label {
-  cursor: pointer;
-  text-decoration: none;
-}
-.has-value.Select--single > .Select-control .Select-value a.Select-value-label:hover,
-.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:hover,
-.has-value.Select--single > .Select-control .Select-value a.Select-value-label:focus,
-.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value a.Select-value-label:focus {
-  color: #007eff;
-  outline: none;
-  text-decoration: underline;
-}
-.Select-input {
-  height: 34px;
-  padding-left: 10px;
-  padding-right: 10px;
-  vertical-align: middle;
-}
-.Select-input > input {
-  width: 100%;
-  background: none transparent;
-  border: 0 none;
-  box-shadow: none;
-  cursor: default;
-  display: inline-block;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  outline: none;
-  line-height: 14px;
-  /* For IE 8 compatibility */
-  padding: 8px 0 12px;
-  /* For IE 8 compatibility */
-  -webkit-appearance: none;
-}
-.is-focused .Select-input > input {
-  cursor: text;
-}
-.has-value.is-pseudo-focused .Select-input {
-  opacity: 0;
-}
-.Select-control:not(.is-searchable) > .Select-input {
-  outline: none;
-}
-.Select-loading-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 16px;
-}
-.Select-loading {
-  -webkit-animation: Select-animation-spin 400ms infinite linear;
-  -o-animation: Select-animation-spin 400ms infinite linear;
-  animation: Select-animation-spin 400ms infinite linear;
-  width: 16px;
-  height: 16px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  border: 2px solid #DEDEDE;
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-}
-.Select-clear-zone {
-  -webkit-animation: Select-animation-fadeIn 200ms;
-  -o-animation: Select-animation-fadeIn 200ms;
-  animation: Select-animation-fadeIn 200ms;
-  color: #DEDEDE;
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 17px;
-}
-.Select-clear-zone:hover {
-  color: #191E23;
-}
-.Select-clear {
-  display: inline-block;
-  font-size: 18px;
-  line-height: 1;
-}
-.Select--multi .Select-clear-zone {
-  width: 17px;
-}
-.Select-arrow-zone {
-  cursor: pointer;
-  display: table-cell;
-  position: relative;
-  text-align: center;
-  vertical-align: middle;
-  width: 25px;
-  padding-right: 5px;
-}
-.Select-arrow {
-  border-color: #DEDEDE transparent transparent;
-  border-style: solid;
-  border-width: 5px 5px 2.5px;
-  display: inline-block;
-  height: 0;
-  width: 0;
-  position: relative;
-}
-.is-open .Select-arrow,
-.Select-arrow-zone:hover > .Select-arrow {
-  border-top-color: #191E23;
-}
-.Select--multi .Select-multi-value-wrapper {
-  display: inline-block;
-}
-.Select .Select-aria-only {
-  display: inline-block;
-  height: 1px;
-  width: 1px;
-  margin: -1px;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-  float: left;
-}
-@-webkit-keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes Select-animation-fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.Select-menu-outer {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-  background-color: #fff;
-  border: 1px solid #DEDEDE;
-  border-top-color: #DEDEDE;
-  box-sizing: border-box;
-  margin-top: -1px;
-  max-height: 200px;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 99999;
-  -webkit-overflow-scrolling: touch;
-}
-.Select-menu {
-  max-height: 198px;
-  overflow-y: auto;
-}
-.Select-option {
-  box-sizing: border-box;
-  background-color: #fff;
-  color: #666666;
-  cursor: pointer;
-  display: block;
-  padding: 8px 10px;
-}
-.Select-option:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.Select-option.is-selected {
-  background-color: #f5faff;
-  /* Fallback color for IE 8 */
-  background-color: rgba(0, 126, 255, 0.04);
-  color: #333;
-}
-.Select-option.is-focused {
-  background-color: #ebf5ff;
-  /* Fallback color for IE 8 */
-  background-color: rgba(0, 126, 255, 0.08);
-  color: #333;
-}
-.Select-option.is-disabled {
-  color: #cccccc;
-  cursor: default;
-}
-.Select-noresults {
-  box-sizing: border-box;
-  color: #999999;
-  cursor: default;
-  display: block;
-  padding: 8px 10px;
-}
-.Select--multi .Select-input {
-  vertical-align: middle;
-  margin-left: 10px;
-  padding: 0;
-}
-.Select--multi.has-value .Select-input {
-  margin-left: 5px;
-}
-.Select--multi .Select-value {
-  background-color: inherit;
-  border-radius: 2px;
-  border: 1px solid #0079a5;
-  color: #0079a5;
-  display: inline-block;
-  font-size: 0.9em;
-  line-height: 1.4;
-  margin-left: 5px;
-  margin-top: 5px;
-  vertical-align: top;
-}
-.Select--multi .Select-value-icon,
-.Select--multi .Select-value-label {
-  display: inline-block;
-  vertical-align: middle;
-}
-.Select--multi .Select-value-label {
-  border-bottom-right-radius: 2px;
-  border-top-right-radius: 2px;
-  cursor: default;
-  padding: 2px 5px;
-}
-.Select--multi a.Select-value-label {
-  color: #0079a5;
-  cursor: pointer;
-  text-decoration: none;
-}
-.Select--multi a.Select-value-label:hover {
-  text-decoration: underline;
-}
-.Select--multi .Select-value-icon {
-  cursor: pointer;
-  border-bottom-left-radius: 2px;
-  border-top-left-radius: 2px;
-  border-right: 1px solid #0079a5;
-  padding: 1px 5px 3px;
-}
-.Select--multi .Select-value-icon:hover,
-.Select--multi .Select-value-icon:focus {
-  background-color: #0079a5;
-  color: #fff;
-}
-.Select--multi .Select-value-icon:active {
-  background-color: #c2e0ff;
-}
-.Select--multi.is-disabled .Select-value {
-  background-color: #fcfcfc;
-  border: 1px solid #e3e3e3;
-  color: #333;
-}
-.Select--multi.is-disabled .Select-value-icon {
-  cursor: not-allowed;
-  border-right: 1px solid #e3e3e3;
-}
-.Select--multi.is-disabled .Select-value-icon:hover,
-.Select--multi.is-disabled .Select-value-icon:focus,
-.Select--multi.is-disabled .Select-value-icon:active {
-  background-color: #fcfcfc;
-}
-@keyframes Select-animation-spin {
-  to {
-    transform: rotate(1turn);
-  }
-}
-@-webkit-keyframes Select-animation-spin {
-  to {
-    -webkit-transform: rotate(1turn);
-  }
-}
-
-.Select-input {
-  input:focus {
-    box-shadow: none;
-  }
-}
diff --git a/test/functional/page_objects/visual_builder_page.js b/test/functional/page_objects/visual_builder_page.js
index 4376044eab2b..42cd0d2f5cb9 100644
--- a/test/functional/page_objects/visual_builder_page.js
+++ b/test/functional/page_objects/visual_builder_page.js
@@ -24,7 +24,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }) {
   const retry = getService('retry');
   const log = getService('log');
   const testSubjects = getService('testSubjects');
-  const PageObjects = getPageObjects(['common', 'header']);
+  const PageObjects = getPageObjects(['common', 'header', 'visualize']);
 
   class VisualBuilderPage {
 
@@ -152,12 +152,9 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }) {
       });
     }
 
-    async selectAggType(type, nth = 0) {
+    async selectAggType(value, nth = 0) {
       const elements = await testSubjects.findAll('aggSelector');
-      const input = await elements[nth].findByCssSelector('.Select-input input');
-      await input.type(type);
-      const option = await elements[nth].findByCssSelector('.Select-option');
-      await option.click();
+      await PageObjects.visualize.setComboBoxElement(elements[nth], value);
       return await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
@@ -169,22 +166,17 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }) {
 
     async fillInVariable(name = 'test', metric = 'count', nth = 0) {
       const elements = await testSubjects.findAll('varRow');
-      const input = await elements[nth].findByCssSelector('.vis_editor__calc_vars-name input');
-      await input.type(name);
-      const select = await elements[nth].findByCssSelector('.Select-input input');
-      await select.type(metric);
-      const option = await elements[nth].findByCssSelector('.Select-option');
-      await option.click();
+      const varNameInput = await elements[nth].findByCssSelector('.vis_editor__calc_vars-name input');
+      await varNameInput.type(name);
+      const metricSelectWrapper = await elements[nth].findByCssSelector('.vis_editor__calc_vars-var');
+      await PageObjects.visualize.setComboBoxElement(metricSelectWrapper, metric);
       return await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
 
     async selectGroupByField(fieldName) {
       const element = await testSubjects.find('groupByField');
-      const input = await element.findByCssSelector('.Select-input input');
-      await input.type(fieldName);
-      const option = await element.findByCssSelector('.Select-option');
-      await option.click();
+      await PageObjects.visualize.setComboBoxElement(element, fieldName);
     }
 
     async setLabelValue(value) {
diff --git a/test/functional/page_objects/visualize_page.js b/test/functional/page_objects/visualize_page.js
index fa70207798c7..679096c88b47 100644
--- a/test/functional/page_objects/visualize_page.js
+++ b/test/functional/page_objects/visualize_page.js
@@ -219,12 +219,15 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
 
     async setComboBox(comboBoxSelector, value) {
       const comboBox = await testSubjects.find(comboBoxSelector);
-      const input = await comboBox.findByTagName('input');
+      await this.setComboBoxElement(comboBox, value);
+    }
+
+    async setComboBoxElement(element, value) {
+      const input = await element.findByTagName('input');
       await input.clearValue();
       await input.type(value);
       await find.clickByCssSelector('.euiComboBoxOption');
-      await this.closeComboBoxOptionsList(comboBox);
-      await remote.pressKeys('\uE004');
+      await this.closeComboBoxOptionsList(element);
     }
 
     async getComboBoxOptions(comboBoxSelector) {
diff --git a/yarn.lock b/yarn.lock
index 429b827b02d0..4463c1787138 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10470,7 +10470,7 @@ react-router@^4.2.0:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
-react-select@^1.2.0, react-select@^1.2.1:
+react-select@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1"
   dependencies: