diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.js
index 902157e470e60..c08abd35f4dff 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.js
@@ -9,18 +9,16 @@ import PropTypes from 'prop-types';
 
 import {
   EuiButton,
-  EuiPopover,
-  EuiBasicTable,
-  EuiFieldSearch,
-  EuiSpacer,
 } from '@elastic/eui';
 
-import './field_chooser.less';
+import {
+  SearchSelect,
+} from 'ui/search_select';
 
 export class FieldChooser extends Component {
   static propTypes = {
+    buttonLabel: PropTypes.node.isRequired,
     columns: PropTypes.array.isRequired,
-    label: PropTypes.node.isRequired,
     fields: PropTypes.array.isRequired,
     onSelectField: PropTypes.func.isRequired,
   }
@@ -29,7 +27,6 @@ export class FieldChooser extends Component {
     super(props);
 
     this.state = {
-      searchValue: '',
       isOpen: false,
     };
   }
@@ -46,33 +43,19 @@ export class FieldChooser extends Component {
     });
   };
 
-  onSearch = (e) => {
-    this.setState({
-      searchValue: e.target.value,
-    });
-  };
+  onSelect = (field) => {
+    this.props.onSelectField(field);
+    this.close();
+  }
 
   render() {
     const {
+      buttonLabel,
       columns,
-      label,
       fields,
-      onSelectField,
     } = this.props;
 
-    const {
-      searchValue,
-    } = this.state;
-
-    const getRowProps = (field) => {
-      return {
-        className: 'rollupFieldChooserTableRow',
-        onClick: () => {
-          onSelectField(field);
-          this.close();
-        },
-      };
-    };
+    const { isOpen } = this.state;
 
     const button = (
       <EuiButton
@@ -80,41 +63,21 @@ export class FieldChooser extends Component {
         iconSide="right"
         onClick={this.onButtonClick}
       >
-        {label}
+        {buttonLabel}
       </EuiButton>
     );
 
-    const items = searchValue ? fields.filter(({ name }) => (
-      name.toLowerCase().includes(searchValue.trim().toLowerCase())
-    )) : fields;
-
     return (
-      <EuiPopover
-        ownFocus
+      <SearchSelect
         button={button}
-        isOpen={this.state.isOpen}
-        closePopover={this.close}
-        anchorPosition="rightDown"
-      >
-        <EuiFieldSearch
-          placeholder="Search fields"
-          value={searchValue}
-          onChange={this.onSearch}
-          aria-label="Search fields"
-          fullWidth
-        />
-
-        <EuiSpacer size="s" />
-
-        <div className="rollupFieldChooserContainer">
-          <EuiBasicTable
-            items={items}
-            columns={columns}
-            rowProps={getRowProps}
-            responsive={false}
-          />
-        </div>
-      </EuiPopover>
+        columns={columns}
+        items={fields}
+        isOpen={isOpen}
+        close={this.close}
+        onSelectItem={this.onSelect}
+        searchField="name"
+        prompt="Search fields"
+      />
     );
   }
 }
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.less b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.less
deleted file mode 100644
index cc8d67a141acb..0000000000000
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_chooser.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.rollupFieldChooserContainer {
-  width: 600px;
-  height: 400px;
-  overflow-y: scroll;
-}
-
-.rollupFieldChooserTableRow {
-  cursor: pointer;
-}
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js
index d23a922115751..386458c8b4d6e 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/components/field_list.js
@@ -12,8 +12,6 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import './field_chooser.less';
-
 export const FieldList = ({
   columns,
   fields,
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
index 8740c293a6e42..4e4af328e35d5 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
@@ -125,13 +125,13 @@ export class StepHistogramUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={columns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepHistogram.fieldsChooser.label"
               defaultMessage="Select histogram fields"
             />
           )}
+          columns={columns}
           fields={unselectedHistogramFields}
           onSelectField={this.onSelectField}
         />
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
index e7a390f63bd90..51625bd9c811c 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
@@ -218,13 +218,13 @@ export class StepMetricsUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={this.chooserColumns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepMetrics.fieldsChooser.label"
               defaultMessage="Select metrics fields"
             />
           )}
+          columns={this.chooserColumns}
           fields={unselectedMetricsFields}
           onSelectField={this.onSelectField}
         />
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
index 9530f768701e3..378a38dc55d6b 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
@@ -130,13 +130,13 @@ export class StepTermsUi extends Component {
         <EuiSpacer />
 
         <FieldChooser
-          columns={columns}
-          label={(
+          buttonLabel={(
             <FormattedMessage
               id="xpack.rollupJobs.create.stepTerms.fieldsChooser.label"
               defaultMessage="Select terms fields"
             />
           )}
+          columns={columns}
           fields={unselectedTermsFields}
           onSelectField={this.onSelectField}
         />