diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
index 377f5e0dc0710..bfb629f3c8071 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_availability/apm_availability_indicator_type_form.tsx
@@ -9,15 +9,19 @@ import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
+import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
 import { CreateSLOForm } from '../../types';
 import { FieldSelector } from '../apm_common/field_selector';
 import { DataPreviewChart } from '../common/data_preview_chart';
-import { GroupByFieldSelector } from '../common/group_by_field_selector';
+import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmAvailabilityIndicatorTypeForm() {
   const { watch } = useFormContext<CreateSLOForm>();
   const index = watch('indicator.params.index');
+  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
+    useFetchIndexPatternFields(index);
+  const partitionByFields = indexFields.filter((field) => field.aggregatable);
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -121,7 +125,28 @@ export function ApmAvailabilityIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <GroupByFieldSelector index={index} />
+      <IndexFieldSelector
+        indexFields={partitionByFields}
+        name="groupBy"
+        label={
+          <span>
+            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+              defaultMessage: 'Partition by',
+            })}{' '}
+            <EuiIconTip
+              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                defaultMessage: 'Create individual SLOs for each value of the selected field.',
+              })}
+              position="top"
+            />
+          </span>
+        }
+        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+          defaultMessage: 'Select an optional field to partition by',
+        })}
+        isLoading={!!index && isIndexFieldsLoading}
+        isDisabled={!index}
+      />
 
       <DataPreviewChart />
     </EuiFlexGroup>
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
index 316f17f5072e6..8d21a0c7d2546 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/apm_latency/apm_latency_indicator_type_form.tsx
@@ -9,15 +9,19 @@ import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiIconTip } fro
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
+import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
 import { CreateSLOForm } from '../../types';
 import { FieldSelector } from '../apm_common/field_selector';
 import { DataPreviewChart } from '../common/data_preview_chart';
-import { GroupByFieldSelector } from '../common/group_by_field_selector';
+import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 
 export function ApmLatencyIndicatorTypeForm() {
   const { control, watch, getFieldState } = useFormContext<CreateSLOForm>();
   const index = watch('indicator.params.index');
+  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
+    useFetchIndexPatternFields(index);
+  const partitionByFields = indexFields.filter((field) => field.aggregatable);
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -164,7 +168,28 @@ export function ApmLatencyIndicatorTypeForm() {
         </EuiFlexItem>
       </EuiFlexGroup>
 
-      <GroupByFieldSelector index={index} />
+      <IndexFieldSelector
+        indexFields={partitionByFields}
+        name="groupBy"
+        label={
+          <span>
+            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+              defaultMessage: 'Partition by',
+            })}{' '}
+            <EuiIconTip
+              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                defaultMessage: 'Create individual SLOs for each value of the selected field.',
+              })}
+              position="top"
+            />
+          </span>
+        }
+        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+          defaultMessage: 'Select an optional field to partition by',
+        })}
+        isLoading={!!index && isIndexFieldsLoading}
+        isDisabled={!index}
+      />
 
       <DataPreviewChart />
     </EuiFlexGroup>
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/group_by_field_selector.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/group_by_field_selector.tsx
deleted file mode 100644
index 0733e682e9ba7..0000000000000
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/common/group_by_field_selector.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIconTip,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { ALL_VALUE } from '@kbn/slo-schema';
-import React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
-import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
-import { createOptionsFromFields } from '../../helpers/create_options';
-import { CreateSLOForm } from '../../types';
-
-interface Props {
-  index?: string;
-}
-export function GroupByFieldSelector({ index }: Props) {
-  const { control, getFieldState } = useFormContext<CreateSLOForm>();
-  const { isLoading, data: indexFields = [] } = useFetchIndexPatternFields(index);
-  const groupableFields = indexFields.filter((field) => field.aggregatable);
-
-  const label = i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
-    defaultMessage: 'Select an optional field to partition by',
-  });
-
-  return (
-    <EuiFlexItem>
-      <EuiFormRow
-        label={
-          <span>
-            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
-              defaultMessage: 'Partition by',
-            })}{' '}
-            <EuiIconTip
-              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
-                defaultMessage: 'Create individual SLOs for each value of the selected field.',
-              })}
-              position="top"
-            />
-          </span>
-        }
-        isInvalid={getFieldState('groupBy').invalid}
-      >
-        <Controller
-          defaultValue={ALL_VALUE}
-          name="groupBy"
-          control={control}
-          rules={{ required: false }}
-          render={({ field, fieldState }) => (
-            <EuiComboBox
-              {...field}
-              async
-              placeholder={label}
-              aria-label={label}
-              isClearable
-              isDisabled={!index}
-              isInvalid={fieldState.invalid}
-              isLoading={!!index && isLoading}
-              onChange={(selected: EuiComboBoxOptionOption[]) => {
-                if (selected.length) {
-                  return field.onChange(selected[0].value);
-                }
-
-                field.onChange(ALL_VALUE);
-              }}
-              options={createOptionsFromFields(groupableFields)}
-              selectedOptions={
-                !!index &&
-                !!field.value &&
-                groupableFields.some((groupableField) => groupableField.name === field.value)
-                  ? [{ value: field.value, label: field.value }]
-                  : []
-              }
-              singleSelection
-            />
-          )}
-        />
-      </EuiFormRow>
-    </EuiFlexItem>
-  );
-}
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx
new file mode 100644
index 0000000000000..6bb6996f95b2a
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/common/index_field_selector.tsx
@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import { ALL_VALUE } from '@kbn/slo-schema';
+import React, { useEffect, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Field } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
+import { createOptionsFromFields, Option } from '../../helpers/create_options';
+import { CreateSLOForm } from '../../types';
+
+interface Props {
+  indexFields: Field[];
+  name: 'groupBy' | 'indicator.params.timestampField';
+  label: React.ReactNode | string;
+  placeholder: string;
+  isDisabled: boolean;
+  isLoading: boolean;
+  isRequired?: boolean;
+}
+export function IndexFieldSelector({
+  indexFields,
+  name,
+  label,
+  placeholder,
+  isDisabled,
+  isLoading,
+  isRequired = false,
+}: Props) {
+  const { control, getFieldState } = useFormContext<CreateSLOForm>();
+  const [options, setOptions] = useState<Option[]>(createOptionsFromFields(indexFields));
+
+  useEffect(() => {
+    setOptions(createOptionsFromFields(indexFields));
+  }, [indexFields]);
+
+  return (
+    <EuiFlexItem>
+      <EuiFormRow label={label} isInvalid={getFieldState(name).invalid}>
+        <Controller
+          defaultValue={ALL_VALUE}
+          name={name}
+          control={control}
+          rules={{ required: isRequired }}
+          render={({ field, fieldState }) => (
+            <EuiComboBox<string>
+              {...field}
+              async
+              placeholder={placeholder}
+              aria-label={placeholder}
+              isClearable
+              isDisabled={isLoading || isDisabled}
+              isInvalid={fieldState.invalid}
+              isLoading={isLoading}
+              onChange={(selected: EuiComboBoxOptionOption[]) => {
+                if (selected.length) {
+                  return field.onChange(selected[0].value);
+                }
+
+                field.onChange(ALL_VALUE);
+              }}
+              options={options}
+              onSearchChange={(searchValue: string) => {
+                setOptions(
+                  createOptionsFromFields(indexFields, ({ value }) => value.includes(searchValue))
+                );
+              }}
+              selectedOptions={
+                !!indexFields &&
+                !!field.value &&
+                indexFields.some((indexField) => indexField.name === field.value)
+                  ? [{ value: field.value, label: field.value }]
+                  : []
+              }
+              singleSelection
+            />
+          )}
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+  );
+}
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx
index 6d7ae6c012a2e..8555750fd6ff1 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_kql/custom_kql_indicator_type_form.tsx
@@ -5,31 +5,24 @@
  * 2.0.
  */
 
-import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiIconTip,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
 import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
-import { createOptionsFromFields } from '../../helpers/create_options';
 import { CreateSLOForm } from '../../types';
 import { DataPreviewChart } from '../common/data_preview_chart';
-import { GroupByFieldSelector } from '../common/group_by_field_selector';
+import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 import { IndexSelection } from '../custom_common/index_selection';
 
 export function CustomKqlIndicatorTypeForm() {
-  const { control, watch, getFieldState } = useFormContext<CreateSLOForm>();
-
+  const { watch } = useFormContext<CreateSLOForm>();
   const index = watch('indicator.params.index');
-  const { isLoading, data: indexFields } = useFetchIndexPatternFields(index);
-  const timestampFields = (indexFields ?? []).filter((field) => field.type === 'date');
+  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
+    useFetchIndexPatternFields(index);
+  const timestampFields = indexFields.filter((field) => field.type === 'date');
+  const partitionByFields = indexFields.filter((field) => field.aggregatable);
 
   return (
     <EuiFlexGroup direction="column" gutterSize="l">
@@ -37,56 +30,22 @@ export function CustomKqlIndicatorTypeForm() {
         <EuiFlexItem>
           <IndexSelection />
         </EuiFlexItem>
+
         <EuiFlexItem>
-          <EuiFormRow
-            label={i18n.translate(
-              'xpack.observability.slo.sloEdit.sliType.customKql.timestampField.label',
-              { defaultMessage: 'Timestamp field' }
+          <IndexFieldSelector
+            indexFields={timestampFields}
+            name="indicator.params.timestampField"
+            label={i18n.translate('xpack.observability.slo.sloEdit.timestampField.label', {
+              defaultMessage: 'Timestamp field',
+            })}
+            placeholder={i18n.translate(
+              'xpack.observability.slo.sloEdit.timestampField.placeholder',
+              { defaultMessage: 'Select a timestamp field' }
             )}
-            isInvalid={getFieldState('indicator.params.timestampField').invalid}
-          >
-            <Controller
-              name="indicator.params.timestampField"
-              defaultValue=""
-              rules={{ required: true }}
-              control={control}
-              render={({ field: { ref, ...field }, fieldState }) => (
-                <EuiComboBox
-                  {...field}
-                  async
-                  placeholder={i18n.translate(
-                    'xpack.observability.slo.sloEdit.sliType.customKql.timestampField.placeholder',
-                    { defaultMessage: 'Select a timestamp field' }
-                  )}
-                  aria-label={i18n.translate(
-                    'xpack.observability.slo.sloEdit.sliType.customKql.timestampField.placeholder',
-                    { defaultMessage: 'Select a timestamp field' }
-                  )}
-                  data-test-subj="customKqlIndicatorFormTimestampFieldSelect"
-                  isClearable
-                  isDisabled={!index}
-                  isInvalid={fieldState.invalid}
-                  isLoading={!!index && isLoading}
-                  onChange={(selected: EuiComboBoxOptionOption[]) => {
-                    if (selected.length) {
-                      return field.onChange(selected[0].value);
-                    }
-
-                    field.onChange('');
-                  }}
-                  options={createOptionsFromFields(timestampFields)}
-                  selectedOptions={
-                    !!index &&
-                    !!field.value &&
-                    timestampFields.some((timestampField) => timestampField.name === field.value)
-                      ? [{ value: field.value, label: field.value }]
-                      : []
-                  }
-                  singleSelection
-                />
-              )}
-            />
-          </EuiFormRow>
+            isLoading={!!index && isIndexFieldsLoading}
+            isDisabled={!index}
+            isRequired
+          />
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -176,7 +135,28 @@ export function CustomKqlIndicatorTypeForm() {
         />
       </EuiFlexItem>
 
-      <GroupByFieldSelector index={index} />
+      <IndexFieldSelector
+        indexFields={partitionByFields}
+        name="groupBy"
+        label={
+          <span>
+            {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+              defaultMessage: 'Partition by',
+            })}{' '}
+            <EuiIconTip
+              content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                defaultMessage: 'Create individual SLOs for each value of the selected field.',
+              })}
+              position="top"
+            />
+          </span>
+        }
+        placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+          defaultMessage: 'Select an optional field to partition by',
+        })}
+        isLoading={!!index && isIndexFieldsLoading}
+        isDisabled={!index}
+      />
 
       <DataPreviewChart />
     </EuiFlexGroup>
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/custom_metric_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/custom_metric_type_form.tsx
index 25de4568dc06c..c7fe7999f9be4 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/custom_metric_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/custom_metric_type_form.tsx
@@ -6,37 +6,34 @@
  */
 
 import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
   EuiHorizontalRule,
   EuiIconTip,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
 import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
 import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
-import { createOptionsFromFields } from '../../helpers/create_options';
 import { CreateSLOForm } from '../../types';
 import { DataPreviewChart } from '../common/data_preview_chart';
+import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 import { IndexSelection } from '../custom_common/index_selection';
 import { MetricIndicator } from './metric_indicator';
-import { GroupByFieldSelector } from '../common/group_by_field_selector';
 
 export { NEW_CUSTOM_METRIC } from './metric_indicator';
 
 export function CustomMetricIndicatorTypeForm() {
-  const { control, watch, getFieldState } = useFormContext<CreateSLOForm>();
-
+  const { watch } = useFormContext<CreateSLOForm>();
   const index = watch('indicator.params.index');
-  const { isLoading, data: indexFields } = useFetchIndexPatternFields(index);
-  const timestampFields = (indexFields ?? []).filter((field) => field.type === 'date');
+  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
+    useFetchIndexPatternFields(index);
+  const timestampFields = indexFields.filter((field) => field.type === 'date');
+  const partitionByFields = indexFields.filter((field) => field.aggregatable);
 
   return (
     <>
@@ -55,61 +52,20 @@ export function CustomMetricIndicatorTypeForm() {
             <IndexSelection />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFormRow
-              label={i18n.translate(
-                'xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.label',
-                { defaultMessage: 'Timestamp field' }
+            <IndexFieldSelector
+              indexFields={timestampFields}
+              name="indicator.params.timestampField"
+              label={i18n.translate('xpack.observability.slo.sloEdit.timestampField.label', {
+                defaultMessage: 'Timestamp field',
+              })}
+              placeholder={i18n.translate(
+                'xpack.observability.slo.sloEdit.timestampField.placeholder',
+                { defaultMessage: 'Select a timestamp field' }
               )}
-              isInvalid={getFieldState('indicator.params.timestampField').invalid}
-            >
-              <Controller
-                name="indicator.params.timestampField"
-                defaultValue=""
-                rules={{ required: true }}
-                control={control}
-                render={({ field: { ref, ...field }, fieldState }) => (
-                  <EuiComboBox
-                    {...field}
-                    async
-                    placeholder={i18n.translate(
-                      'xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.placeholder',
-                      { defaultMessage: 'Select a timestamp field' }
-                    )}
-                    aria-label={i18n.translate(
-                      'xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.placeholder',
-                      { defaultMessage: 'Select a timestamp field' }
-                    )}
-                    data-test-subj="customMetricIndicatorFormTimestampFieldSelect"
-                    isClearable
-                    isDisabled={!watch('indicator.params.index')}
-                    isInvalid={fieldState.invalid}
-                    isLoading={!!watch('indicator.params.index') && isLoading}
-                    onChange={(selected: EuiComboBoxOptionOption[]) => {
-                      if (selected.length) {
-                        return field.onChange(selected[0].value);
-                      }
-
-                      field.onChange('');
-                    }}
-                    options={createOptionsFromFields(timestampFields)}
-                    selectedOptions={
-                      !!watch('indicator.params.index') &&
-                      !!field.value &&
-                      timestampFields.some((timestampField) => timestampField.name === field.value)
-                        ? [
-                            {
-                              value: field.value,
-                              label: field.value,
-                              'data-test-subj': `customMetricIndicatorFormTimestampFieldSelectedValue`,
-                            },
-                          ]
-                        : []
-                    }
-                    singleSelection={{ asPlainText: true }}
-                  />
-                )}
-              />
-            </EuiFormRow>
+              isLoading={!!index && isIndexFieldsLoading}
+              isDisabled={!index}
+              isRequired
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
 
@@ -157,7 +113,11 @@ export function CustomMetricIndicatorTypeForm() {
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <MetricIndicator type="good" indexFields={indexFields} isLoadingIndex={isLoading} />
+          <MetricIndicator
+            type="good"
+            indexFields={indexFields}
+            isLoadingIndex={isIndexFieldsLoading}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
@@ -174,14 +134,39 @@ export function CustomMetricIndicatorTypeForm() {
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <MetricIndicator type="total" indexFields={indexFields} isLoadingIndex={isLoading} />
+          <MetricIndicator
+            type="total"
+            indexFields={indexFields}
+            isLoadingIndex={isIndexFieldsLoading}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
           <EuiHorizontalRule margin="none" />
         </EuiFlexItem>
 
-        <GroupByFieldSelector index={index} />
+        <IndexFieldSelector
+          indexFields={partitionByFields}
+          name="groupBy"
+          label={
+            <span>
+              {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+                defaultMessage: 'Partition by',
+              })}{' '}
+              <EuiIconTip
+                content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                  defaultMessage: 'Create individual SLOs for each value of the selected field.',
+                })}
+                position="top"
+              />
+            </span>
+          }
+          placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+            defaultMessage: 'Select an optional field to partition by',
+          })}
+          isLoading={!!index && isIndexFieldsLoading}
+          isDisabled={!index}
+        />
 
         <DataPreviewChart />
       </EuiFlexGroup>
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/metric_indicator.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/metric_indicator.tsx
index 794726db2c711..f451d5d98007c 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/metric_indicator.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/custom_metric/metric_indicator.tsx
@@ -28,7 +28,7 @@ import { QueryBuilder } from '../common/query_builder';
 
 interface MetricIndicatorProps {
   type: 'good' | 'total';
-  indexFields: Field[] | undefined;
+  indexFields: Field[];
   isLoadingIndex: boolean;
 }
 
@@ -91,9 +91,7 @@ export function MetricIndicator({ type, indexFields, isLoadingIndex }: MetricInd
   );
 
   const { control, watch, setValue, register } = useFormContext<CreateSLOForm>();
-  const metricFields = (indexFields ?? []).filter((field) =>
-    SUPPORTED_FIELD_TYPES.includes(field.type)
-  );
+  const metricFields = indexFields.filter((field) => SUPPORTED_FIELD_TYPES.includes(field.type));
 
   const { fields, append, remove } = useFieldArray({
     control,
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator.tsx
index e966d0f3fb221..2b6f983470f82 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator.tsx
@@ -25,7 +25,7 @@ import { createOptionsFromFields } from '../../helpers/create_options';
 
 interface HistogramIndicatorProps {
   type: 'good' | 'total';
-  indexFields: Field[] | undefined;
+  indexFields: Field[];
   isLoadingIndex: boolean;
 }
 
@@ -49,7 +49,7 @@ const AGGREGATION_OPTIONS = Object.values(AGGREGATIONS);
 export function HistogramIndicator({ type, indexFields, isLoadingIndex }: HistogramIndicatorProps) {
   const { control, watch } = useFormContext<CreateSLOForm>();
 
-  const histogramFields = (indexFields ?? []).filter((field) => field.type === 'histogram');
+  const histogramFields = indexFields.filter((field) => field.type === 'histogram');
   const indexPattern = watch('indicator.params.index');
   const aggregation = watch(`indicator.params.${type}.aggregation`);
 
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator_type_form.tsx b/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator_type_form.tsx
index 56a867ab2e332..dfbf305235b41 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator_type_form.tsx
+++ b/x-pack/plugins/observability/public/pages/slo_edit/components/histogram/histogram_indicator_type_form.tsx
@@ -6,35 +6,33 @@
  */
 
 import {
-  EuiComboBox,
-  EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
   EuiHorizontalRule,
   EuiIconTip,
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { Controller, useFormContext } from 'react-hook-form';
 import { FormattedMessage } from '@kbn/i18n-react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
 import { useFetchIndexPatternFields } from '../../../../hooks/slo/use_fetch_index_pattern_fields';
-import { createOptionsFromFields } from '../../helpers/create_options';
 import { CreateSLOForm } from '../../types';
 import { DataPreviewChart } from '../common/data_preview_chart';
+import { IndexFieldSelector } from '../common/index_field_selector';
 import { QueryBuilder } from '../common/query_builder';
 import { IndexSelection } from '../custom_common/index_selection';
 import { HistogramIndicator } from './histogram_indicator';
-import { GroupByFieldSelector } from '../common/group_by_field_selector';
 
 export function HistogramIndicatorTypeForm() {
-  const { control, watch, getFieldState } = useFormContext<CreateSLOForm>();
-
+  const { watch } = useFormContext<CreateSLOForm>();
   const index = watch('indicator.params.index');
-  const { isLoading, data: indexFields } = useFetchIndexPatternFields(index);
-  const timestampFields = (indexFields ?? []).filter((field) => field.type === 'date');
+
+  const { isLoading: isIndexFieldsLoading, data: indexFields = [] } =
+    useFetchIndexPatternFields(index);
+  const timestampFields = indexFields.filter((field) => field.type === 'date');
+  const partitionByFields = indexFields.filter((field) => field.aggregatable);
 
   return (
     <>
@@ -53,55 +51,20 @@ export function HistogramIndicatorTypeForm() {
             <IndexSelection />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFormRow
-              label={i18n.translate(
-                'xpack.observability.slo.sloEdit.sliType.histogram.timestampField.label',
-                { defaultMessage: 'Timestamp field' }
+            <IndexFieldSelector
+              indexFields={timestampFields}
+              name="indicator.params.timestampField"
+              label={i18n.translate('xpack.observability.slo.sloEdit.timestampField.label', {
+                defaultMessage: 'Timestamp field',
+              })}
+              placeholder={i18n.translate(
+                'xpack.observability.slo.sloEdit.timestampField.placeholder',
+                { defaultMessage: 'Select a timestamp field' }
               )}
-              isInvalid={getFieldState('indicator.params.timestampField').invalid}
-            >
-              <Controller
-                name="indicator.params.timestampField"
-                defaultValue=""
-                rules={{ required: true }}
-                control={control}
-                render={({ field: { ref, ...field }, fieldState }) => (
-                  <EuiComboBox
-                    {...field}
-                    async
-                    placeholder={i18n.translate(
-                      'xpack.observability.slo.sloEdit.sliType.histogram.timestampField.placeholder',
-                      { defaultMessage: 'Select a timestamp field' }
-                    )}
-                    aria-label={i18n.translate(
-                      'xpack.observability.slo.sloEdit.sliType.histogram.timestampField.placeholder',
-                      { defaultMessage: 'Select a timestamp field' }
-                    )}
-                    data-test-subj="histogramIndicatorFormTimestampFieldSelect"
-                    isClearable
-                    isDisabled={!index}
-                    isInvalid={fieldState.invalid}
-                    isLoading={!!index && isLoading}
-                    onChange={(selected: EuiComboBoxOptionOption[]) => {
-                      if (selected.length) {
-                        return field.onChange(selected[0].value);
-                      }
-
-                      field.onChange('');
-                    }}
-                    options={createOptionsFromFields(timestampFields)}
-                    selectedOptions={
-                      !!index &&
-                      !!field.value &&
-                      timestampFields.some((timestampField) => timestampField.name === field.value)
-                        ? [{ value: field.value, label: field.value }]
-                        : []
-                    }
-                    singleSelection={{ asPlainText: true }}
-                  />
-                )}
-              />
-            </EuiFormRow>
+              isLoading={!!index && isIndexFieldsLoading}
+              isDisabled={!index}
+              isRequired
+            />
           </EuiFlexItem>
         </EuiFlexGroup>
 
@@ -144,7 +107,11 @@ export function HistogramIndicatorTypeForm() {
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <HistogramIndicator type="good" indexFields={indexFields} isLoadingIndex={isLoading} />
+          <HistogramIndicator
+            type="good"
+            indexFields={indexFields}
+            isLoadingIndex={isIndexFieldsLoading}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiHorizontalRule margin="none" />
@@ -159,13 +126,38 @@ export function HistogramIndicatorTypeForm() {
             </h3>
           </EuiTitle>
           <EuiSpacer size="s" />
-          <HistogramIndicator type="total" indexFields={indexFields} isLoadingIndex={isLoading} />
+          <HistogramIndicator
+            type="total"
+            indexFields={indexFields}
+            isLoadingIndex={isIndexFieldsLoading}
+          />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiHorizontalRule margin="none" />
         </EuiFlexItem>
 
-        <GroupByFieldSelector index={index} />
+        <IndexFieldSelector
+          indexFields={partitionByFields}
+          name="groupBy"
+          label={
+            <span>
+              {i18n.translate('xpack.observability.slo.sloEdit.groupBy.label', {
+                defaultMessage: 'Partition by',
+              })}{' '}
+              <EuiIconTip
+                content={i18n.translate('xpack.observability.slo.sloEdit.groupBy.tooltip', {
+                  defaultMessage: 'Create individual SLOs for each value of the selected field.',
+                })}
+                position="top"
+              />
+            </span>
+          }
+          placeholder={i18n.translate('xpack.observability.slo.sloEdit.groupBy.placeholder', {
+            defaultMessage: 'Select an optional field to partition by',
+          })}
+          isLoading={!!index && isIndexFieldsLoading}
+          isDisabled={!index}
+        />
 
         <DataPreviewChart />
       </EuiFlexGroup>
diff --git a/x-pack/plugins/observability/public/pages/slo_edit/helpers/create_options.ts b/x-pack/plugins/observability/public/pages/slo_edit/helpers/create_options.ts
index c76b881ccc8aa..f090e92026176 100644
--- a/x-pack/plugins/observability/public/pages/slo_edit/helpers/create_options.ts
+++ b/x-pack/plugins/observability/public/pages/slo_edit/helpers/create_options.ts
@@ -7,13 +7,22 @@
 
 import { Field } from '../../../hooks/slo/use_fetch_index_pattern_fields';
 
-interface Option {
+export interface Option {
   label: string;
   value: string;
 }
 
-export function createOptionsFromFields(fields: Field[]): Option[] {
-  return fields
+export function createOptionsFromFields(
+  fields: Field[],
+  filterFn?: (option: Option) => boolean
+): Option[] {
+  const options = fields
     .map((field) => ({ label: field.name, value: field.name }))
     .sort((a, b) => String(a.label).localeCompare(b.label));
+
+  if (filterFn) {
+    return options.filter(filterFn);
+  }
+
+  return options;
 }
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index f0306e4e9da3a..51787b82c39e4 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -27640,8 +27640,6 @@
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQuery.tooltip": "Cette requête KQL doit renvoyer un sous-ensemble d'événements considérés comme \"bons\" ou \"réussis\" aux fins du calcul du SLO. La requête doit filtrer les événements en fonction de certains critères pertinents, tels que les codes de statut, les messages d'erreur ou d'autres champs pertinents.",
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQueryPlaceholder": "Définir les bons événements",
     "xpack.observability.slo.sloEdit.sliType.customKql.queryFilter": "Filtre de requête",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.label": "Champ d'horodatage",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.placeholder": "Sélectionner un champ d'horodatage",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery": "Total de la requête",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery.tooltip": "Cette requête KQL doit renvoyer tous les événements pertinents pour le calcul du SLO, y compris les bons et les mauvais événements.",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQueryPlaceholder": "Définir le total d'événements",
@@ -27655,8 +27653,6 @@
     "xpack.observability.slo.sloEdit.sliType.customMetric.metricField.placeholder": "Sélectionner un champ d’indicateur",
     "xpack.observability.slo.sloEdit.sliType.customMetric.queryFilter": "Filtre de requête",
     "xpack.observability.slo.sloEdit.sliType.customMetric.sumLabel": "Somme de",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.label": "Champ d'horodatage",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.placeholder": "Sélectionner un champ d'horodatage",
     "xpack.observability.slo.sloEdit.tags.label": "Balises",
     "xpack.observability.slo.sloEdit.tags.placeholder": "Ajouter des balises",
     "xpack.observability.slo.sloEdit.targetSlo.label": "Cible/SLO (%)",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index ad9e79d2eaf6d..e723ffb2a788c 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -27640,8 +27640,6 @@
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQuery.tooltip": "このKQLクエリは、SLOを計算する目的で、「良好」または「成功」と見なされるイベントのサブセットを返します。このクエリは、ステータスコード、エラー、メッセージ、または他の関連するフィールドなどの一部の関連する条件に基づいて、イベントをフィルタリングします。",
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQueryPlaceholder": "良いイベントを定義",
     "xpack.observability.slo.sloEdit.sliType.customKql.queryFilter": "クエリのフィルター",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.label": "タイムスタンプフィールド",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.placeholder": "タイムスタンプフィールドを選択",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery": "合計クエリ",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery.tooltip": "このKQLクエリは、良好なイベントと問題があるイベントの両方を含む、SLO計算に関連するすべてのイベントを返します。",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQueryPlaceholder": "合計イベントを定義",
@@ -27655,8 +27653,6 @@
     "xpack.observability.slo.sloEdit.sliType.customMetric.metricField.placeholder": "メトリックフィールドを選択",
     "xpack.observability.slo.sloEdit.sliType.customMetric.queryFilter": "クエリのフィルター",
     "xpack.observability.slo.sloEdit.sliType.customMetric.sumLabel": "の合計",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.label": "タイムスタンプフィールド",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.placeholder": "タイムスタンプフィールドを選択",
     "xpack.observability.slo.sloEdit.tags.label": "タグ",
     "xpack.observability.slo.sloEdit.tags.placeholder": "タグを追加",
     "xpack.observability.slo.sloEdit.targetSlo.label": "目標 / SLO（%）",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 4d0de6185e717..888b54b80432b 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -27638,8 +27638,6 @@
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQuery.tooltip": "此 KQL 查询应返回用于计算 SLO 时被视为“良好”或“成功”的事件的子集。此查询应基于某些相关条件（如状态代码、错误消息或其他相关字段）筛选事件。",
     "xpack.observability.slo.sloEdit.sliType.customKql.goodQueryPlaceholder": "定义良好事件",
     "xpack.observability.slo.sloEdit.sliType.customKql.queryFilter": "查询筛选",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.label": "时间戳字段",
-    "xpack.observability.slo.sloEdit.sliType.customKql.timestampField.placeholder": "选择时间戳字段",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery": "查询总数",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQuery.tooltip": "此 KQL 查询应返回与 SLO 计算相关的所有事件，包括良好和不良事件。",
     "xpack.observability.slo.sloEdit.sliType.customKql.totalQueryPlaceholder": "定义事件总数",
@@ -27653,8 +27651,6 @@
     "xpack.observability.slo.sloEdit.sliType.customMetric.metricField.placeholder": "选择指标字段",
     "xpack.observability.slo.sloEdit.sliType.customMetric.queryFilter": "查询筛选",
     "xpack.observability.slo.sloEdit.sliType.customMetric.sumLabel": "求和",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.label": "时间戳字段",
-    "xpack.observability.slo.sloEdit.sliType.customMetric.timestampField.placeholder": "选择时间戳字段",
     "xpack.observability.slo.sloEdit.tags.label": "标签",
     "xpack.observability.slo.sloEdit.tags.placeholder": "添加标签",
     "xpack.observability.slo.sloEdit.targetSlo.label": "目标/SLO (%)",