diff --git a/web-app/client/src/components/Inputs/MultiSelect/ControlledMultiSelect.tsx b/web-app/client/src/components/Inputs/MultiSelect/ControlledMultiSelect.tsx
index 4dbf58b4..5f6cfd9b 100644
--- a/web-app/client/src/components/Inputs/MultiSelect/ControlledMultiSelect.tsx
+++ b/web-app/client/src/components/Inputs/MultiSelect/ControlledMultiSelect.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
-import MultiSelect, { MultiSelectProps as SelectProps } from './MultiSelect';
+import { Option } from 'types/inputs';
+import MultiSelect, { MultiSelectProps } from './MultiSelect';
 
 type ControlRules<T extends FieldValues> = ComponentProps<
   typeof Controller<T>
@@ -12,41 +13,34 @@ type ControlProps<T extends FieldValues> = {
   rules?: ControlRules<T>;
 };
 
-const getSelectValues: (
-  opt: ReadonlyArray<{ label: string; value: number }>,
-) => number[] = (opt) => {
+const getSelectValues: <TValue = string>(
+  opt: ReadonlyArray<Option<TValue>>,
+) => TValue[] = (opt) => {
   return opt.map((element) => element.value);
 };
 
-const getSelectOptions: (
-  options: ReadonlyArray<{ label: string; value: number }>,
-  value: ReadonlyArray<number>,
-) => ReadonlyArray<{ label: string; value: number }> = (options, values) => {
-  return options.filter(({ value }) => values.includes(value));
+const getSelectOptions: <TValue = string>(
+  options: ReadonlyArray<Option<TValue>> | undefined,
+  value: TValue[],
+) => ReadonlyArray<Option<TValue>> | undefined = (options, values) => {
+  return options?.filter(({ value }) => values.includes(value));
 };
 
-const ControlledMultiSelect = <T extends FieldValues>({
+const ControlledMultiSelect = <T extends FieldValues, TValue = string>({
   controlName,
   control,
   rules,
   ...rest
-}: SelectProps & ControlProps<T>) => (
+}: MultiSelectProps<TValue> & ControlProps<T>) => (
   <Controller
     name={controlName}
     control={control}
     rules={rules}
     render={({ field }) => (
-      <MultiSelect
+      <MultiSelect<TValue>
         {...field}
-        onChange={(newValue) =>
-          field.onChange(
-            getSelectValues(newValue as { label: string; value: number }[]),
-          )
-        }
-        value={getSelectOptions(
-          rest.options as ReadonlyArray<{ label: string; value: number }>,
-          field.value,
-        )}
+        onChange={(newValue) => field.onChange(getSelectValues(newValue))}
+        value={getSelectOptions(rest.options, field.value)}
         {...rest}
       />
     )}
diff --git a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx
index d475f7f8..01d2c60f 100644
--- a/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx
+++ b/web-app/client/src/components/Inputs/MultiSelect/MultiSelect.tsx
@@ -1,19 +1,27 @@
 import cn from 'classnames';
-import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefRenderFunction,
+  ReactNode,
+} from 'react';
 import ReactSelect, { Props as ReactSelectProps } from 'react-select';
 import { InputPropsBase } from '@components/Inputs';
 import Tooltip from '@components/Tooltip';
+import { Option } from 'types/inputs';
 import customComponents, { colorStyles } from './customComponents';
 import styles from './MultiSelect.module.scss';
 
-export type MultiSelectProps = InputPropsBase &
-  ReactSelectProps & {
+export type MultiSelectProps<TValue = string> = InputPropsBase &
+  ReactSelectProps<Option<TValue>, true> & {
     tooltip?: ReactNode;
   };
 
 // Can't recreate explicit type
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-const MultiSelect: ForwardRefRenderFunction<any, MultiSelectProps> = (
+type RefElement = any;
+
+const MultiSelect: ForwardRefRenderFunction<RefElement, MultiSelectProps> = (
   { label, error, tooltip, className, id, components, ...props },
   ref,
 ) => {
@@ -49,4 +57,6 @@ const MultiSelect: ForwardRefRenderFunction<any, MultiSelectProps> = (
   );
 };
 
-export default forwardRef(MultiSelect);
+export default forwardRef(MultiSelect) as <TValue = string>(
+  props: MultiSelectProps<TValue> & { ref?: ForwardedRef<RefElement> },
+) => ReturnType<typeof MultiSelect>;
diff --git a/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx b/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx
index d59225b9..3d833626 100644
--- a/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx
+++ b/web-app/client/src/components/Inputs/MultiSelect/customComponents.tsx
@@ -19,17 +19,20 @@ import ChevronDownIcon from '@assets/icons/arrow-down.svg?component';
 import EmptyButton from '@assets/icons/close.svg?component';
 import { InputPropsBase } from '@components/Inputs';
 import badgeStyles from '@components/Inputs/MultiSelect/OptionBadge/OptionBadge.module.scss';
+import { Option as OptionType } from 'types/inputs';
 import { OptionWithBadges } from 'types/multiSelect';
 import { OptionBadge } from './OptionBadge';
 import styles from './MultiSelect.module.scss';
 
-export const colorStyles: StylesConfig = {
+export const colorStyles: StylesConfig<OptionType, true> = {
   control: () => ({}),
   valueContainer: (styles) => ({ ...styles, padding: 0 }),
   indicatorSeparator: (styles) => ({ ...styles, margin: 0 }),
 };
 
-const Control: ComponentType<ControlProps & InputPropsBase> = (props) => (
+const Control: ComponentType<
+  ControlProps<OptionType, true> & InputPropsBase
+> = (props) => (
   <components.Control
     className={cn(
       styles.control,
@@ -43,15 +46,17 @@ const Control: ComponentType<ControlProps & InputPropsBase> = (props) => (
 );
 
 const MultiValueContainer: ComponentType<
-  MultiValueGenericProps & InputPropsBase
+  MultiValueGenericProps<OptionType, true> & InputPropsBase
 > = (props) => <components.MultiValueContainer {...props} />;
 
-const MultiValue: ComponentType<MultiValueProps & InputPropsBase> = (props) => (
+const MultiValue: ComponentType<
+  MultiValueProps<OptionType, true> & InputPropsBase
+> = (props) => (
   <components.MultiValue className={styles.multiValue} {...props} />
 );
 
 const MultiValueLabel: ComponentType<
-  MultiValueGenericProps & InputPropsBase
+  MultiValueGenericProps<OptionType, true> & InputPropsBase
 > = (props) => (
   <div
     {...props.innerProps}
@@ -63,7 +68,7 @@ const MultiValueLabel: ComponentType<
 );
 
 const MultiValueRemove: ComponentType<
-  MultiValueRemoveProps & InputPropsBase
+  MultiValueRemoveProps<OptionType, true> & InputPropsBase
 > = (props) => (
   <div
     {...props.innerProps}
@@ -73,27 +78,31 @@ const MultiValueRemove: ComponentType<
   </div>
 );
 
-const Placeholder: ComponentType<PlaceholderProps & InputPropsBase> = (
-  props,
-) => <components.Placeholder className={styles.placeholder} {...props} />;
+const Placeholder: ComponentType<
+  PlaceholderProps<OptionType, true> & InputPropsBase
+> = (props) => (
+  <components.Placeholder className={styles.placeholder} {...props} />
+);
 
-const Input: ComponentType<InputProps & InputPropsBase> = (props) => (
+const Input: ComponentType<InputProps<OptionType, true> & InputPropsBase> = (
+  props,
+) => (
   <components.Input
     className={cn(styles.input, props.value && styles.hasValue)}
     {...props}
   />
 );
 
-const ClearIndicator: ComponentType<ClearIndicatorProps & InputPropsBase> = ({
-  innerProps,
-}) => (
+const ClearIndicator: ComponentType<
+  ClearIndicatorProps<OptionType, true> & InputPropsBase
+> = ({ innerProps }) => (
   <div className={styles.clearIndicator} {...innerProps}>
     <EmptyButton />
   </div>
 );
 
 const DropdownIndicator: ComponentType<
-  DropdownIndicatorProps & InputPropsBase
+  DropdownIndicatorProps<OptionType, true> & InputPropsBase
 > = ({ innerProps }) => (
   <div className={styles.dropdownIndicator} {...innerProps}>
     <ChevronDownIcon />
@@ -101,7 +110,7 @@ const DropdownIndicator: ComponentType<
 );
 
 const IndicatorsContainer: ComponentType<
-  IndicatorsContainerProps & InputPropsBase
+  IndicatorsContainerProps<OptionType, true> & InputPropsBase
 > = (props) => (
   <components.IndicatorsContainer
     className={styles.indicatorsContainer}
@@ -109,14 +118,9 @@ const IndicatorsContainer: ComponentType<
   />
 );
 
-export const Option: ComponentType<OptionProps & InputPropsBase> = ({
-  innerProps,
-  innerRef,
-  children,
-  isFocused,
-  isSelected,
-  data,
-}) => {
+export const Option: ComponentType<
+  OptionProps<OptionType, true> & InputPropsBase
+> = ({ innerProps, innerRef, children, isFocused, isSelected, data }) => {
   const optionData = data as OptionWithBadges;
 
   return (
@@ -148,19 +152,17 @@ export const Option: ComponentType<OptionProps & InputPropsBase> = ({
   );
 };
 
-const NoOptionsMessage: ComponentType<NoticeProps & InputPropsBase> = ({
-  innerProps,
-  children,
-}) => (
+const NoOptionsMessage: ComponentType<
+  NoticeProps<OptionType, true> & InputPropsBase
+> = ({ innerProps, children }) => (
   <div className={cn(styles.option, styles.noOptionsMessage)} {...innerProps}>
     {children}
   </div>
 );
 
-const LoadingMessage: ComponentType<NoticeProps & InputPropsBase> = ({
-  innerProps,
-  children,
-}) => (
+const LoadingMessage: ComponentType<
+  NoticeProps<OptionType, true> & InputPropsBase
+> = ({ innerProps, children }) => (
   <div className={cn(styles.option, styles.noOptionsMessage)} {...innerProps}>
     {children}
   </div>
diff --git a/web-app/client/src/components/Inputs/Select/ControlledSelect.tsx b/web-app/client/src/components/Inputs/Select/ControlledSelect.tsx
index db71f40f..eb15b470 100644
--- a/web-app/client/src/components/Inputs/Select/ControlledSelect.tsx
+++ b/web-app/client/src/components/Inputs/Select/ControlledSelect.tsx
@@ -11,25 +11,21 @@ type ControlProps<T extends FieldValues> = {
   control: Control<T>;
   rules?: ControlRules<T>;
 };
-const ControlledSelect = <T extends FieldValues>({
+const ControlledSelect = <T extends FieldValues, TValue = string>({
   controlName,
   control,
   rules,
   ...rest
-}: SelectProps & ControlProps<T>) => (
+}: SelectProps<TValue> & ControlProps<T>) => (
   <Controller
     name={controlName}
     control={control}
     rules={rules}
     render={({ field }) => (
-      <Select
+      <Select<TValue>
         {...field}
-        // Can't recreate explicit type
-        // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-        onChange={(option: any) => field.onChange(option?.value)}
-        // Can't recreate explicit type
-        // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-        value={rest.options?.find((e: any) => e?.value === field.value)}
+        onChange={(option) => field.onChange(option?.value)}
+        value={rest.options?.find((e) => e?.value === field.value)}
         {...rest}
       />
     )}
diff --git a/web-app/client/src/components/Inputs/Select/Select.tsx b/web-app/client/src/components/Inputs/Select/Select.tsx
index 21bd0cec..d37a078f 100644
--- a/web-app/client/src/components/Inputs/Select/Select.tsx
+++ b/web-app/client/src/components/Inputs/Select/Select.tsx
@@ -1,19 +1,27 @@
 import cn from 'classnames';
-import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
+import {
+  ForwardedRef,
+  forwardRef,
+  ForwardRefRenderFunction,
+  ReactNode,
+} from 'react';
 import ReactSelect, { Props as ReactSelectProps } from 'react-select';
 import { InputPropsBase } from '@components/Inputs';
 import Tooltip from '@components/Tooltip';
+import { Option } from 'types/inputs';
 import customComponents from './customComponents';
 import styles from './Select.module.scss';
 
-export type Props = InputPropsBase &
-  ReactSelectProps & {
+export type Props<TValue = string> = InputPropsBase &
+  ReactSelectProps<Option<TValue>, false> & {
     tooltip?: ReactNode;
   };
 
 // Can't recreate explicit type
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
-const Select: ForwardRefRenderFunction<any, Props> = (
+type RefElement = any;
+
+const Select: ForwardRefRenderFunction<RefElement, Props> = (
   { label, error, tooltip, className, id, components, ...props },
   ref,
 ) => {
@@ -45,4 +53,6 @@ const Select: ForwardRefRenderFunction<any, Props> = (
   );
 };
 
-export default forwardRef(Select);
+export default forwardRef(Select) as <TValue = string>(
+  props: Props<TValue> & { ref?: ForwardedRef<RefElement> },
+) => ReturnType<typeof Select>;
diff --git a/web-app/client/src/components/Inputs/Select/customComponents.tsx b/web-app/client/src/components/Inputs/Select/customComponents.tsx
index e3774393..a4b3dc04 100644
--- a/web-app/client/src/components/Inputs/Select/customComponents.tsx
+++ b/web-app/client/src/components/Inputs/Select/customComponents.tsx
@@ -13,15 +13,12 @@ import {
 } from 'react-select';
 import ChevronDownIcon from '@assets/icons/arrow-down.svg?component';
 import { InputPropsBase } from '@components/Inputs';
+import { Option as OptionType } from 'types/inputs';
 import styles from './Select.module.scss';
 
-const Control: ComponentType<ControlProps & InputPropsBase> = ({
-  children,
-  error,
-  innerRef,
-  innerProps,
-  isFocused,
-}) => (
+const Control: ComponentType<
+  ControlProps<OptionType, false> & InputPropsBase
+> = ({ children, error, innerRef, innerProps, isFocused }) => (
   <div
     {...innerProps}
     ref={innerRef}
@@ -35,54 +32,49 @@ const Control: ComponentType<ControlProps & InputPropsBase> = ({
   </div>
 );
 
-const ValueContainer: ComponentType<ValueContainerProps & InputPropsBase> = ({
-  children,
-  innerProps,
-}) => (
+const ValueContainer: ComponentType<
+  ValueContainerProps<OptionType, false> & InputPropsBase
+> = ({ children, innerProps }) => (
   <div {...innerProps} className={styles.valueContainer}>
     {children}
   </div>
 );
 
-const SingleValue: ComponentType<SingleValueProps & InputPropsBase> = ({
-  children,
-  innerProps,
-}) => (
+const SingleValue: ComponentType<
+  SingleValueProps<OptionType, false> & InputPropsBase
+> = ({ children, innerProps }) => (
   <div {...innerProps} className={styles.singleValue}>
     {children}
   </div>
 );
 
-const Placeholder: ComponentType<PlaceholderProps & InputPropsBase> = ({
-  children,
-  innerProps,
-}) => (
+const Placeholder: ComponentType<
+  PlaceholderProps<OptionType, false> & InputPropsBase
+> = ({ children, innerProps }) => (
   <div className={styles.placeholder} {...innerProps}>
     {children}
   </div>
 );
 
-const Input: ComponentType<InputProps & InputPropsBase> = (inputProps) => (
+const Input: ComponentType<InputProps<OptionType, false> & InputPropsBase> = (
+  inputProps,
+) => (
   <div className={cn(styles.input, inputProps.value && styles.hasValue)}>
     <components.Input {...inputProps} />
   </div>
 );
 
 const IndicatorsContainer: ComponentType<
-  IndicatorsContainerProps & InputPropsBase
+  IndicatorsContainerProps<OptionType, false> & InputPropsBase
 > = ({ innerProps }) => (
   <div className={styles.indicatorsContainer} {...innerProps}>
     <ChevronDownIcon />
   </div>
 );
 
-export const Option: ComponentType<OptionProps & InputPropsBase> = ({
-  innerProps,
-  innerRef,
-  children,
-  isFocused,
-  isSelected,
-}) => (
+export const Option: ComponentType<
+  OptionProps<OptionType, false> & InputPropsBase
+> = ({ innerProps, innerRef, children, isFocused, isSelected }) => (
   <div
     className={cn(
       styles.option,
@@ -96,10 +88,9 @@ export const Option: ComponentType<OptionProps & InputPropsBase> = ({
   </div>
 );
 
-const NoOptionsMessage: ComponentType<NoticeProps & InputPropsBase> = ({
-  innerProps,
-  children,
-}) => (
+const NoOptionsMessage: ComponentType<
+  NoticeProps<OptionType, false> & InputPropsBase
+> = ({ innerProps, children }) => (
   <div className={cn(styles.option, styles.noOptionsMessage)} {...innerProps}>
     {children}
   </div>
diff --git a/web-app/client/src/constants/options.ts b/web-app/client/src/constants/options.ts
index 78ea1603..91d3b72a 100644
--- a/web-app/client/src/constants/options.ts
+++ b/web-app/client/src/constants/options.ts
@@ -1,5 +1,6 @@
 import { upperCase, UpperCaseOption } from '@utils/uppercaseOptions';
 import { MainPrimitiveType } from 'types/globalTypes';
+import { Option } from 'types/inputs';
 
 function toScreamingSnakeOption<T extends string>(
   value: T,
@@ -122,10 +123,7 @@ export const optionsByMetrics: Record<MFDMetric, string[]> = {
 
 export type MFDColumnType = 'Numeric' | 'String';
 
-export type MFDColumnTypeOption = {
-  label: string;
-  value: MFDColumnType;
-};
+export type MFDColumnTypeOption = Option<MFDColumnType>;
 
 export const MFDColumnTypeOptions: MFDColumnTypeOption[] = [
   { label: 'Numeric', value: 'Numeric' },
diff --git a/web-app/client/src/types/fileStats.ts b/web-app/client/src/types/fileStats.ts
index 5a074934..ee6ea9fa 100644
--- a/web-app/client/src/types/fileStats.ts
+++ b/web-app/client/src/types/fileStats.ts
@@ -1,11 +1,11 @@
+import { Option } from 'types/inputs';
+
 export type StatType = {
   name: string;
   value: number | string | null | undefined;
 };
 
-export type ColumnOption = {
-  value: number;
-  label: string;
+export type ColumnOption = Option<number> & {
   type?: string;
   isCategorical?: boolean;
 };
diff --git a/web-app/client/src/types/inputs.ts b/web-app/client/src/types/inputs.ts
index 85a34c7b..89cd6a96 100644
--- a/web-app/client/src/types/inputs.ts
+++ b/web-app/client/src/types/inputs.ts
@@ -8,9 +8,9 @@ type InputBase<T> = {
   name: T;
 };
 
-type Option = {
+export type Option<TValue = string> = {
   label: string;
-  value: string;
+  value: TValue;
 };
 
 type SelectProps = {
diff --git a/web-app/client/src/types/multiSelect.ts b/web-app/client/src/types/multiSelect.ts
index 182b5189..de59b16f 100644
--- a/web-app/client/src/types/multiSelect.ts
+++ b/web-app/client/src/types/multiSelect.ts
@@ -1,10 +1,10 @@
+import { Option } from 'types/inputs';
+
 export type Badge = {
   label: string;
   style?: string;
 };
 
-export type OptionWithBadges = {
-  label: string;
-  value: string | number | boolean;
+export type OptionWithBadges = Option<string | number | boolean> & {
   badges?: Badge[];
 };