diff --git a/web/packages/shared/components/Select/types.ts b/web/packages/shared/components/Select/types.ts
index dd4a21131ec30..5ffb338139e95 100644
--- a/web/packages/shared/components/Select/types.ts
+++ b/web/packages/shared/components/Select/types.ts
@@ -66,3 +66,24 @@ export type Option<T = string, S = string> = {
 export type ActionMeta = {
   action: 'set-value' | 'input-change' | 'input-blur' | 'menu-close';
 };
+
+/**
+ * CustomSelectComponentProps defines a prop type for the custom
+ * components you define for react-select's `components` prop.
+ *
+ * @template CustomProps - type defining all the custom props being passed
+ * down to custom component.
+ *
+ * @template CustomOption - the data type used for react-select `options`
+ */
+export type CustomSelectComponentProps<CustomProps, CustomOption = Option> =
+  CustomOption & {
+    /**
+     * selectProps is the field to use to access the props that were
+     * passed down to react-select's component.
+     *
+     * Use `customProps` field to easily identify non react-select props
+     * that are intended to be used in custom components.
+     */
+    selectProps: { customProps: CustomProps };
+  };