diff --git a/.gitignore b/.gitignore
index 67e585e7d..4c01b2b48 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ dist
 *.njsproj
 *.sln
 *.sw?
+*.tool-versions
 
 vite.config.ts.timestamp-*
 env.d
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 8000d2614..40010f50b 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @openfun/cunningham-react
 
+## 2.10.0
+
+### Minor Changes
+
+- 0b45f51: add async option fetching mode to select mono
+
 ## 2.9.4
 
 ### Patch Changes
@@ -425,6 +431,8 @@
 - 4ebbf16: Add component's tokens handling
 
 [unreleased]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.3...main
+[2.10.0]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.4...@openfun/cunningham-react@2.10.0
+[2.9.4]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.3...@openfun/cunningham-react@2.9.4
 [2.9.3]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.2...@openfun/cunningham-react@2.9.3
 [2.9.2]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.1...@openfun/cunningham-react@2.9.2
 [2.9.1]: https://github.com/openfun/cunningham/compare/@openfun/cunningham-react@2.9.0...@openfun/cunningham-react@2.9.1
diff --git a/packages/react/src/components/Forms/Select/_index.scss b/packages/react/src/components/Forms/Select/_index.scss
index b579853eb..f32395ee2 100644
--- a/packages/react/src/components/Forms/Select/_index.scss
+++ b/packages/react/src/components/Forms/Select/_index.scss
@@ -3,6 +3,15 @@
 .c__select {
   position: relative;
 
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    cursor: wait;
+  }
+
   &__wrapper {
     border-radius: var(--c--components--forms-select--border-radius);
     border-width: var(--c--components--forms-select--border-width);
@@ -99,6 +108,10 @@
       }
       &__open {
         color: var(--c--theme--colors--greyscale-900);
+
+        &--hidden {
+          display: none;
+        }
       }
     }
   }
diff --git a/packages/react/src/components/Forms/Select/index.tsx b/packages/react/src/components/Forms/Select/index.tsx
index 931e9e2a4..fa6383a2f 100644
--- a/packages/react/src/components/Forms/Select/index.tsx
+++ b/packages/react/src/components/Forms/Select/index.tsx
@@ -23,6 +23,14 @@ export type OptionWithoutRender = Omit<BaseOption, "value" | "render"> & {
 
 export type Option = OptionWithoutRender | OptionWithRender;
 
+export type ContextCallbackFetchOptions = {
+  search?: string | number;
+};
+
+export type CallbackFetchOptions = (
+  context: ContextCallbackFetchOptions,
+) => Promise<Option[]>;
+
 export interface SelectHandle {
   blur: () => void;
 }
@@ -31,7 +39,7 @@ export type SelectProps = PropsWithChildren &
   FieldProps & {
     label: string;
     hideLabel?: boolean;
-    options: Option[];
+    options: Option[] | CallbackFetchOptions;
     searchable?: boolean;
     name?: string;
     defaultValue?: string | number | string[];
@@ -45,6 +53,7 @@ export type SelectProps = PropsWithChildren &
     disabled?: boolean;
     clearable?: boolean;
     multi?: boolean;
+    isLoading?: boolean;
     showLabelWhenSelected?: boolean;
     monoline?: boolean;
     selectedItemsStyle?: "pills" | "text";
@@ -63,6 +72,10 @@ export const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   return props.multi ? (
     <SelectMulti {...props} ref={ref} />
   ) : (
-    <SelectMono {...props} ref={ref} />
+    <SelectMono
+      {...props}
+      ref={ref}
+      value={Array.isArray(props.value) ? undefined : props.value}
+    />
   );
 });
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index f50e95fd3..1dc085799 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -8,6 +8,7 @@ import { Button } from ":/components/Button";
 import { Option, SelectProps } from ":/components/Forms/Select";
 import { isOptionWithRender } from ":/components/Forms/Select/utils";
 import { SelectMenu } from ":/components/Forms/Select/select-menu";
+import { UpdateArrayOptionsType } from ":/components/Forms/Select/mono-searchable";
 
 export function getOptionsFilter(inputValue?: string) {
   return (option: Option) => {
@@ -53,6 +54,7 @@ export interface SubProps extends SelectProps {
 export interface SelectAuxProps extends SubProps {
   options: Option[];
   labelAsPlaceholder: boolean;
+  updateArrayOptions?: UpdateArrayOptionsType;
   downshiftReturn: {
     isOpen: boolean;
     wrapperProps?: HTMLAttributes<HTMLDivElement>;
@@ -84,12 +86,16 @@ export const SelectMonoAux = ({
   disabled,
   clearable = true,
   onBlur,
+  updateArrayOptions,
   ...props
 }: SelectAuxProps) => {
   const { t } = useCunningham();
   const labelProps = downshiftReturn.getLabelProps();
   const ref = useRef<HTMLDivElement>(null);
 
+  const isToReset =
+    !props.isLoading && clearable && !disabled && downshiftReturn.selectedItem;
+
   return (
     <>
       <Field state={state} {...props}>
@@ -135,7 +141,7 @@ export const SelectMonoAux = ({
               <div className="c__select__inner">
                 <div className="c__select__inner__value">{children}</div>
                 <div className="c__select__inner__actions">
-                  {clearable && !disabled && downshiftReturn.selectedItem && (
+                  {isToReset && (
                     <>
                       <Button
                         color="tertiary-text"
@@ -146,6 +152,9 @@ export const SelectMonoAux = ({
                         className="c__select__inner__actions__clear"
                         onClick={(e) => {
                           downshiftReturn.selectItem(null);
+                          if (typeof updateArrayOptions === "function") {
+                            updateArrayOptions(undefined);
+                          }
                           e.stopPropagation();
                         }}
                         icon={<span className="material-icons">close</span>}
@@ -158,7 +167,9 @@ export const SelectMonoAux = ({
                   <Button
                     color="tertiary-text"
                     size="nano"
-                    className="c__select__inner__actions__open"
+                    className={`c__select__inner__actions__open 
+                      c__select__inner__actions__open${props.isLoading ? "--hidden" : ""}
+                    `}
                     icon={
                       <span
                         className={classNames("material-icons", {
diff --git a/packages/react/src/components/Forms/Select/mono-searchable.tsx b/packages/react/src/components/Forms/Select/mono-searchable.tsx
index c92a3eed9..de38129dd 100644
--- a/packages/react/src/components/Forms/Select/mono-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/mono-searchable.tsx
@@ -15,142 +15,243 @@ import {
   SelectMonoAux,
   SubProps,
 } from ":/components/Forms/Select/mono-common";
-import { SelectHandle } from ":/components/Forms/Select";
+import {
+  CallbackFetchOptions,
+  Option,
+  SelectHandle,
+  SelectMonoProps,
+} from ":/components/Forms/Select";
 import { isOptionWithRender } from ":/components/Forms/Select/utils";
+import { Loader } from ":/components/Loader";
 
-export const SelectMonoSearchable = forwardRef<SelectHandle, SubProps>(
-  ({ showLabelWhenSelected = true, ...props }, ref) => {
-    const { t } = useCunningham();
-    const [optionsToDisplay, setOptionsToDisplay] = useState(props.options);
-    const [hasInputFocused, setHasInputFocused] = useState(false);
-    const [inputFilter, setInputFilter] = useState<string>();
-    const inputRef = useRef<HTMLInputElement>(null);
-    const downshiftReturn = useCombobox({
-      ...props.downshiftProps,
-      items: optionsToDisplay,
-      itemToString: optionToString,
-      onInputValueChange: (e) => {
-        setInputFilter(e.inputValue);
-        if (!e.inputValue) {
-          downshiftReturn.selectItem(null);
-        }
-      },
-    });
-    const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(
-      !downshiftReturn.selectedItem,
-    );
-    useEffect(() => {
-      if (hasInputFocused || downshiftReturn.inputValue) {
-        setLabelAsPlaceholder(false);
-        return;
-      }
-      setLabelAsPlaceholder(!downshiftReturn.selectedItem);
-    }, [
-      downshiftReturn.selectedItem,
-      hasInputFocused,
-      downshiftReturn.inputValue,
-    ]);
-
-    // Similar to: useKeepSelectedItemInSyncWithOptions ( see docs )
-    // The only difference is that it does not apply when there is an inputFilter. ( See below why )
-    useEffect(() => {
-      // If there is an inputFilter, using selectItem will trigger onInputValueChange that will sets inputFilter to
-      // empty, and then ignoring the existing filter and displaying all options.
-      if (inputFilter) {
-        return;
+type SelectMonoSearchableType = SubProps & SelectMonoProps;
+
+export type UpdateArrayOptionsType = (
+  search?: string | number,
+) => Promise<Option[]>;
+
+export const SelectMonoSearchable = forwardRef<
+  SelectHandle,
+  SelectMonoSearchableType
+>(({ showLabelWhenSelected = true, ...props }, ref) => {
+  const { t } = useCunningham();
+
+  const [arrayOptions, setArrayOptions] = useState<Option[]>(
+    Array.isArray(props.options) ? props.options : [],
+  );
+  const [hasInputFocused, setHasInputFocused] = useState(false);
+  const [inputFilter, setInputFilter] = useState<string>();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const downshiftReturn = useCombobox({
+    ...props.downshiftProps,
+    items: arrayOptions,
+    itemToString: optionToString,
+    onInputValueChange: (e) => {
+      setInputFilter(e.inputValue);
+      if (!e.inputValue) {
+        downshiftReturn.selectItem(null);
       }
-      const optionToSelect = props.options.find(
-        (option) => optionToValue(option) === props.value,
+    },
+  });
+  const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(
+    !downshiftReturn.selectedItem,
+  );
+
+  const updateArrayOptions: UpdateArrayOptionsType = async (search) => {
+    const options = await (props.options as CallbackFetchOptions)({ search });
+
+    if (Array.isArray(options)) {
+      setArrayOptions(options);
+    }
+
+    return options;
+  };
+
+  const updateArrayOptionsAndDefaultOption = async (
+    defaultValue: Option["value"],
+  ) => {
+    const options = await updateArrayOptions(defaultValue);
+    let defaultOption;
+
+    if (Array.isArray(options)) {
+      defaultOption = options.find(
+        (option) => String(option.value) === defaultValue,
       );
-      downshiftReturn.selectItem(optionToSelect ?? null);
-    }, [props.value, props.options, inputFilter]);
-
-    // Even there is already a value selected, when opening the combobox menu we want to display all available choices.
-    useEffect(() => {
-      if (downshiftReturn.isOpen) {
-        setOptionsToDisplay(
-          inputFilter
-            ? props.options.filter(getOptionsFilter(inputFilter))
-            : props.options,
-        );
-      } else {
-        setInputFilter(undefined);
-      }
-    }, [downshiftReturn.isOpen, props.options, inputFilter]);
-
-    useImperativeHandle(ref, () => ({
-      blur: () => {
-        downshiftReturn.closeMenu();
-        inputRef.current?.blur();
-      },
-    }));
-
-    useEffect(() => {
-      props.onSearchInputChange?.({ target: { value: inputFilter } });
-    }, [inputFilter]);
-
-    const onInputBlur = () => {
-      setHasInputFocused(false);
-      if (downshiftReturn.selectedItem) {
-        // Here the goal is to make sure that when the input in blurred then the input value
-        // has exactly the selectedItem label. Which is not the case by default.
-        downshiftReturn.selectItem(downshiftReturn.selectedItem);
-      } else {
-        // We want the input to be empty when no item is selected.
-        downshiftReturn.setInputValue("");
+    }
+
+    if (defaultOption) {
+      downshiftReturn.selectItem(defaultOption);
+    }
+  };
+
+  const onInputBlur = () => {
+    setHasInputFocused(false);
+    if (downshiftReturn.selectedItem) {
+      // Here the goal is to make sure that when the input in blurred then the input value
+      // has exactly the selectedItem label. Which is not the case by default.
+      downshiftReturn.selectItem(downshiftReturn.selectedItem);
+    } else {
+      // We want the input to be empty when no item is selected.
+      downshiftReturn.setInputValue("");
+    }
+  };
+
+  const onInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof inputProps.onChange === "function") {
+      inputProps.onChange(event);
+    }
+
+    if (isAsyncOptionsFetching) {
+      updateArrayOptions(event.target.value);
+    }
+  };
+
+  const inputProps = downshiftReturn.getInputProps({
+    ref: inputRef,
+    disabled: props.disabled,
+  });
+
+  const renderCustomSelectedOption = !showLabelWhenSelected;
+
+  const isAsyncOptionsFetching = typeof props.options === "function";
+
+  useEffect(() => {
+    if (!isAsyncOptionsFetching) {
+      return;
+    }
+
+    let search;
+
+    if (props.defaultValue) {
+      search = String(props.defaultValue);
+    }
+
+    if (props.value) {
+      search = String(props.value);
+    }
+
+    updateArrayOptionsAndDefaultOption(search);
+  }, []);
+
+  useEffect(() => {
+    if (hasInputFocused || downshiftReturn.inputValue) {
+      setLabelAsPlaceholder(false);
+      return;
+    }
+    setLabelAsPlaceholder(!downshiftReturn.selectedItem);
+  }, [
+    downshiftReturn.selectedItem,
+    hasInputFocused,
+    downshiftReturn.inputValue,
+  ]);
+
+  // Similar to: useKeepSelectedItemInSyncWithOptions ( see docs )
+  // The only difference is that it does not apply when there is an inputFilter. ( See below why )
+  useEffect(() => {
+    // If there is an inputFilter, using selectItem will trigger onInputValueChange that will sets inputFilter to
+    // empty, and then ignoring the existing filter and displaying all options.
+    if (inputFilter) {
+      return;
+    }
+
+    // this block will not be triggered when component uses options fetching (otherwise it will conflict with the value
+    // passed to onInputChange)
+    const selectedItem = downshiftReturn.selectedItem
+      ? optionToValue(downshiftReturn.selectedItem)
+      : undefined;
+
+    const optionToSelect = arrayOptions.find(
+      (option) => optionToValue(option) === props.value,
+    );
+
+    // Already selected
+    if (optionToSelect && selectedItem === props.value) {
+      return;
+    }
+
+    downshiftReturn.selectItem(optionToSelect ?? null);
+  }, [props.value]);
+
+  // Even there is already a value selected, when opening the combobox menu we want to display all available choices.
+  useEffect(() => {
+    props.onSearchInputChange?.({ target: { value: inputFilter } });
+
+    if (downshiftReturn.isOpen) {
+      if (Array.isArray(props.options)) {
+        const arrayFilteredOptions = inputFilter
+          ? props.options.filter(getOptionsFilter(inputFilter))
+          : props.options;
+
+        setArrayOptions(arrayFilteredOptions);
       }
-    };
-
-    const inputProps = downshiftReturn.getInputProps({
-      ref: inputRef,
-      disabled: props.disabled,
-    });
-
-    const renderCustomSelectedOption = !showLabelWhenSelected;
-
-    return (
-      <SelectMonoAux
-        {...props}
-        downshiftReturn={{
-          ...downshiftReturn,
-          wrapperProps: {
-            onClick: () => {
-              inputRef.current?.focus();
-              // This is important because if we don't check that: when clicking on the toggle button
-              // when the menu is open, it will close and reopen immediately.
-              if (!downshiftReturn.isOpen) {
-                downshiftReturn.openMenu();
-              }
-            },
+    } else {
+      setInputFilter(undefined);
+    }
+  }, [downshiftReturn.isOpen, props.options, inputFilter]);
+
+  useImperativeHandle(ref, () => ({
+    blur: () => {
+      downshiftReturn.closeMenu();
+      inputRef.current?.blur();
+    },
+  }));
+
+  return (
+    <SelectMonoAux
+      {...props}
+      disabled={props.isLoading || props.disabled}
+      downshiftReturn={{
+        ...downshiftReturn,
+        wrapperProps: {
+          onClick: () => {
+            inputRef.current?.focus();
+            // This is important because if we don't check that: when clicking on the toggle button
+            // when the menu is open, it will close and reopen immediately.
+            if (!downshiftReturn.isOpen) {
+              downshiftReturn.openMenu();
+            }
           },
-          toggleButtonProps: downshiftReturn.getToggleButtonProps({
-            disabled: props.disabled,
-            "aria-label": t("components.forms.select.toggle_button_aria_label"),
-          }),
+        },
+        toggleButtonProps: downshiftReturn.getToggleButtonProps({
+          disabled: props.disabled,
+          "aria-label": t("components.forms.select.toggle_button_aria_label"),
+        }),
+      }}
+      labelAsPlaceholder={labelAsPlaceholder}
+      options={arrayOptions}
+      updateArrayOptions={
+        isAsyncOptionsFetching ? updateArrayOptions : undefined
+      }
+    >
+      <input
+        {...inputProps}
+        className={classNames({
+          "c__select__inner__value__input--hidden":
+            renderCustomSelectedOption && !hasInputFocused,
+        })}
+        onFocus={() => {
+          setHasInputFocused(true);
         }}
-        labelAsPlaceholder={labelAsPlaceholder}
-        options={optionsToDisplay}
-      >
-        <input
-          {...inputProps}
-          className={classNames({
-            "c__select__inner__value__input--hidden":
-              renderCustomSelectedOption && !hasInputFocused,
-          })}
-          onFocus={() => {
-            setHasInputFocused(true);
-          }}
-          onBlur={() => {
-            onInputBlur();
-          }}
-        />
-
-        {renderCustomSelectedOption &&
-          !hasInputFocused &&
-          downshiftReturn.selectedItem &&
-          isOptionWithRender(downshiftReturn.selectedItem) &&
-          downshiftReturn.selectedItem.render()}
-      </SelectMonoAux>
-    );
-  },
-);
+        onBlur={() => {
+          onInputBlur();
+        }}
+        onChange={onInputChange}
+      />
+
+      {renderCustomSelectedOption &&
+        !hasInputFocused &&
+        downshiftReturn.selectedItem &&
+        isOptionWithRender(downshiftReturn.selectedItem) &&
+        downshiftReturn.selectedItem.render()}
+
+      {props?.isLoading === true ? (
+        <div className="c__select__loader">
+          <Loader
+            aria-label={t("components.forms.select.loader_aria")}
+            size="small"
+          />
+        </div>
+      ) : null}
+    </SelectMonoAux>
+  );
+});
diff --git a/packages/react/src/components/Forms/Select/mono-simple.tsx b/packages/react/src/components/Forms/Select/mono-simple.tsx
index 8e37d50ec..cd7f9d6a6 100644
--- a/packages/react/src/components/Forms/Select/mono-simple.tsx
+++ b/packages/react/src/components/Forms/Select/mono-simple.tsx
@@ -19,31 +19,37 @@ import { SelectedOption } from ":/components/Forms/Select/utils";
  * Ex: If the selected options changes label we want to reflect that.
  * @param downshiftReturn
  * @param props
+ * @param arrayOptions
  */
 const useKeepSelectedItemInSyncWithOptions = (
   downshiftReturn: UseSelectReturnValue<Option>,
-  props: Pick<SelectProps, "value" | "options">,
+  props: Pick<SelectProps, "value">,
+  arrayOptions: Option[],
 ) => {
   useEffect(() => {
-    const optionToSelect = props.options.find(
+    const optionToSelect = arrayOptions.find(
       (option) => optionToValue(option) === props.value,
     );
     downshiftReturn.selectItem(optionToSelect ?? null);
-  }, [props.value, props.options]);
+  }, [props.value, arrayOptions]);
 };
 
 export const SelectMonoSimple = forwardRef<SelectHandle, SubProps>(
   (props, ref) => {
+    const arrayOptions: Option[] = Array.isArray(props.options)
+      ? props.options
+      : [];
+
     const downshiftReturn = useSelect({
       ...props.downshiftProps,
-      items: props.options,
+      items: arrayOptions,
       itemToString: optionToString,
     });
 
-    useKeepSelectedItemInSyncWithOptions(downshiftReturn, props);
-
     const wrapperRef = useRef<HTMLElement>(null);
 
+    useKeepSelectedItemInSyncWithOptions(downshiftReturn, props, arrayOptions);
+
     useImperativeHandle(ref, () => ({
       blur: () => {
         downshiftReturn.closeMenu();
@@ -54,6 +60,7 @@ export const SelectMonoSimple = forwardRef<SelectHandle, SubProps>(
     return (
       <SelectMonoAux
         {...props}
+        options={arrayOptions}
         downshiftReturn={{
           ...downshiftReturn,
           wrapperProps: downshiftReturn.getToggleButtonProps({
diff --git a/packages/react/src/components/Forms/Select/mono.mdx b/packages/react/src/components/Forms/Select/mono.mdx
index 8a35c6e08..a0f72f93d 100644
--- a/packages/react/src/components/Forms/Select/mono.mdx
+++ b/packages/react/src/components/Forms/Select/mono.mdx
@@ -38,6 +38,21 @@ You can enable the text live filtering simply by using the `searchable` props.
 
 > You can use `onSearchInputChange` to get the value of the input when the user is typing.
 
+## Searchable with options fetching
+
+You can enable the text live filtering simply by using the `searchable` prop, and the options fetching by providing
+a callback (async or not) receiving the search term in its parameters in the `options` prop. This latter is triggered
+every time the search term is different from the previous one. An optional `isLoading` prop can be used to show
+a loader while the options are being fetched. You can also provide an optional `defaultValue` prop. It works both in
+controlled and uncontrolled state.
+
+### uncontrolled
+<Canvas of={Stories.SearchableUncontrolledWithAsyncOptionsFetchingAndDefaultValue} />
+
+### controlled
+<Canvas of={Stories.SearchableControlledWithAsyncOptionsFetching} />
+
+
 ## States
 
 You can use the following props to change the state of the Select component by using the `state` props.
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index fea220ae0..d29b0c7e4 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1,6 +1,6 @@
 import userEvent from "@testing-library/user-event";
 import { act, render, screen, waitFor } from "@testing-library/react";
-import { expect } from "vitest";
+import { expect, Mock, vi } from "vitest";
 import React, { createRef, FormEvent, useState } from "react";
 import { within } from "@testing-library/dom";
 import {
@@ -8,10 +8,14 @@ import {
   Option,
   SelectHandle,
   SelectProps,
+  CallbackFetchOptions,
+  ContextCallbackFetchOptions,
 } from ":/components/Forms/Select/index";
 import { Button } from ":/components/Button";
 import { CunninghamProvider } from ":/components/Provider";
 import {
+  expectLoaderNotToBeInTheDocument,
+  expectLoaderToBeVisible,
   expectMenuToBeClosed,
   expectMenuToBeOpen,
   expectNoOptions,
@@ -22,8 +26,69 @@ import {
 } from ":/components/Forms/Select/test-utils";
 import { Input } from ":/components/Forms/Input";
 
+const arrayCityOptions = [
+  {
+    label: "Paris",
+    value: "paris",
+  },
+  {
+    label: "Panama",
+    value: "panama",
+  },
+  {
+    label: "London",
+    value: "london",
+  },
+  {
+    label: "New York",
+    value: "new_york",
+  },
+  {
+    label: "Tokyo",
+    value: "tokyo",
+  },
+];
+
+const UncontrolledSearchableFetchedOptionsSelectWrapper = ({
+  optionsCallback,
+  defaultValue,
+  label,
+}: {
+  optionsCallback: (context: ContextCallbackFetchOptions) => Promise<Option[]>;
+  defaultValue?: string;
+  label: string;
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+
+  const localCallback: CallbackFetchOptions = async (context) => {
+    let arrayResults = [];
+    setIsLoading(true);
+    arrayResults = await optionsCallback(context);
+    setIsLoading(false);
+
+    return arrayResults;
+  };
+
+  return (
+    <CunninghamProvider>
+      <Select
+        label={label}
+        options={localCallback}
+        searchable={true}
+        isLoading={isLoading}
+        defaultValue={defaultValue}
+      />
+    </CunninghamProvider>
+  );
+};
+
+const callbackFetchOptionsMock: Mock = vi.fn();
 describe("<Select/>", () => {
   describe("Searchable", () => {
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
     it("shows all options when clicking on the input", async () => {
       const user = userEvent.setup();
       render(
@@ -756,6 +821,7 @@ describe("<Select/>", () => {
         expectMenuToBeOpen(menu);
 
         expectOptions(["Paris", "Panama"]);
+
         myOptions.shift();
 
         // Rerender the select with the options mutated
@@ -1019,73 +1085,364 @@ describe("<Select/>", () => {
       expect(searchTerm).toBeUndefined();
     });
 
-    it("updates the selected value label if the option label changes", async () => {
-      const myOptions = [
-        {
-          label: "Paris",
-          value: "paris",
-        },
-        {
-          label: "Panama",
-          value: "panama",
-        },
-        {
-          label: "London",
-          value: "london",
-        },
-      ];
+    it("add and remove elements according to loading state", async () => {
+      callbackFetchOptionsMock.mockResolvedValue(arrayCityOptions);
 
-      const Wrapper = ({ options }: { options: Option[] }) => {
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      render(
+        <UncontrolledSearchableFetchedOptionsSelectWrapper
+          optionsCallback={callbackFetchOptionsMock}
+          label="Select a city"
+          defaultValue="london"
+        />,
+      );
+
+      const user = userEvent.setup();
+
+      expect(
+        document.querySelector(".c__select__inner__actions__separator"),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", {
+          name: "Clear selection",
+        }),
+      ).not.toBeInTheDocument();
+      await expectLoaderToBeVisible();
+
+      await expectLoaderNotToBeInTheDocument();
+
+      const menu: HTMLDivElement = screen.getByRole("listbox", {
+        name: "Select a city",
+      });
+
+      expectMenuToBeClosed(menu);
+
+      await user.click(
+        screen.getByRole("combobox", {
+          name: "Select a city",
+        }),
+      );
+
+      expectMenuToBeOpen(menu);
+
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+
+      expect(
+        document.querySelector(".c__select__inner__actions__separator"),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", {
+          name: "Clear selection",
+        }),
+      ).toBeInTheDocument();
+    });
+
+    it("fetch new options on button clear click", async () => {
+      callbackFetchOptionsMock.mockResolvedValue(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      render(
+        <UncontrolledSearchableFetchedOptionsSelectWrapper
+          optionsCallback={callbackFetchOptionsMock}
+          label="Select a city"
+          defaultValue="london"
+        />,
+      );
+
+      const user = userEvent.setup();
+      const input = screen.getByRole("combobox", {
+        name: "Select a city",
+      });
+
+      expect(input.tagName).toEqual("INPUT");
+
+      await user.click(input);
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "london",
+      });
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+
+      await userEvent.click(
+        screen.getByRole("button", {
+          name: "Clear selection",
+        }),
+      );
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, {
+        search: undefined,
+      });
+
+      await user.click(input);
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+    });
+
+    it("fetch new options on search update when component is uncontrolled", async () => {
+      callbackFetchOptionsMock
+        .mockResolvedValueOnce(arrayCityOptions)
+        .mockResolvedValueOnce([
+          {
+            label: "Paris",
+            value: "paris",
+          },
+          {
+            label: "Panama",
+            value: "panama",
+          },
+        ])
+        .mockResolvedValueOnce([
+          {
+            label: "Paris",
+            value: "paris",
+          },
+          {
+            label: "Panama",
+            value: "panama",
+          },
+        ])
+        .mockResolvedValueOnce([
+          {
+            label: "Paris",
+            value: "paris",
+          },
+        ])
+        .mockResolvedValueOnce(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      render(
+        <UncontrolledSearchableFetchedOptionsSelectWrapper
+          optionsCallback={callbackFetchOptionsMock}
+          label="City"
+        />,
+      );
+
+      const user = userEvent.setup();
+      const input = screen.getByRole("combobox", {
+        name: "City",
+      });
+
+      expect(input.tagName).toEqual("INPUT");
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: undefined,
+      });
+
+      await user.click(input);
+
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+
+      await user.type(input, "P");
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, {
+        search: "P",
+      });
+
+      expectOptions(["Paris", "Panama"]);
+
+      await user.type(input, "a", { skipClick: true });
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(3, {
+        search: "Pa",
+      });
+      expectOptions(["Paris", "Panama"]);
+
+      await user.type(input, "r", { skipClick: true });
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(4, {
+        search: "Par",
+      });
+      expectOptions(["Paris"]);
+
+      const option: HTMLLIElement = screen.getByRole("option", {
+        name: "Paris",
+      });
+
+      await user.click(option);
+
+      expect(input).toHaveValue("Paris");
+
+      await user.clear(input);
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(5, {
+        search: "",
+      });
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+    });
+
+    it("fetch new options on default value and search update when component is uncontrolled", async () => {
+      callbackFetchOptionsMock.mockResolvedValue(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      render(
+        <UncontrolledSearchableFetchedOptionsSelectWrapper
+          optionsCallback={callbackFetchOptionsMock}
+          label="Select a city"
+          defaultValue="london"
+        />,
+      );
+
+      const user = userEvent.setup();
+      const input = screen.getByRole("combobox", {
+        name: "Select a city",
+      });
+      const menu: HTMLDivElement = screen.getByRole("listbox", {
+        name: "Select a city",
+      });
+
+      await expectLoaderToBeVisible();
+      expect(input.tagName).toEqual("INPUT");
+      expectMenuToBeClosed(menu);
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "london",
+      });
+      await expectLoaderNotToBeInTheDocument();
+      expect(input).toHaveValue("London");
+
+      await user.click(input);
+
+      expectMenuToBeOpen(menu);
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+    });
+
+    it("fetch new options on search update when component is controlled", async () => {
+      callbackFetchOptionsMock
+        .mockResolvedValueOnce(arrayCityOptions)
+        .mockResolvedValueOnce(arrayCityOptions)
+        .mockResolvedValueOnce([
+          {
+            label: "Paris",
+            value: "paris",
+          },
+          {
+            label: "Panama",
+            value: "panama",
+          },
+        ])
+        .mockResolvedValueOnce(arrayCityOptions);
+
+      expect(vi.isMockFunction(callbackFetchOptionsMock)).toBeTruthy();
+
+      const ControlledSearchableFetchedOptionsSelectWrapper = ({
+        optionsCallback,
+        defaultValue,
+        label,
+      }: {
+        optionsCallback: (
+          context: ContextCallbackFetchOptions,
+        ) => Promise<Option[]>;
+        defaultValue?: string;
+        label: string;
+      }) => {
+        const [isLoading, setIsLoading] = useState(true);
         const [value, setValue] = useState<string | number | undefined>(
-          "paris",
+          defaultValue,
         );
-        const [onChangeCounts, setOnChangeCounts] = useState(0);
+
+        const localCallback: CallbackFetchOptions = async (context) => {
+          let arrayResults = [];
+          setIsLoading(true);
+          arrayResults = await optionsCallback(context);
+          setIsLoading(false);
+
+          return arrayResults;
+        };
+
         return (
           <CunninghamProvider>
             <div>
               <div>Value = {value}|</div>
-              <div>onChangeCounts = {onChangeCounts}|</div>
+              <Button onClick={() => setValue(undefined)}>Clear</Button>
               <Select
-                label="City"
-                options={options}
-                value={value}
-                onChange={(e) => {
-                  setValue(e.target.value as string);
-                  setOnChangeCounts(onChangeCounts + 1);
-                }}
+                label={label}
+                options={localCallback}
                 searchable={true}
+                isLoading={isLoading}
+                value={value}
+                onChange={(e) => setValue(e.target.value as string)}
               />
             </div>
           </CunninghamProvider>
         );
       };
 
-      const { rerender } = render(<Wrapper options={myOptions} />, {
-        wrapper: CunninghamProvider,
-      });
+      await act(async () =>
+        render(
+          <ControlledSearchableFetchedOptionsSelectWrapper
+            optionsCallback={callbackFetchOptionsMock}
+            label="City"
+            defaultValue="london"
+          />,
+        ),
+      );
 
       const input = screen.getByRole("combobox", {
         name: "City",
       });
+
+      const menu: HTMLDivElement = screen.getByRole("listbox", {
+        name: "City",
+      });
+
+      const clearButton = screen.getByRole("button", {
+        name: "Clear selection",
+      });
+
+      const user = userEvent.setup();
+
+      expect(input.tagName).toEqual("INPUT");
+      expect(screen.getByText("Value = london|")).toBeVisible();
+      expect(input).toHaveValue("London");
+      expectMenuToBeClosed(menu);
+
+      await user.click(input);
+
+      expectMenuToBeOpen(menu);
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(1, {
+        search: "london",
+      });
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+
+      await userEvent.click(clearButton);
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(2, {
+        search: undefined,
+      });
+      expect(input).toHaveValue("");
+      expect(screen.getByText("Value = |")).toBeVisible();
+      expectMenuToBeClosed(menu);
+
+      await user.click(input);
+
+      expectMenuToBeOpen(menu);
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
+
+      await user.type(input, "P");
+
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(3, {
+        search: "P",
+      });
+      expectMenuToBeOpen(menu);
+      expectOptions(["Paris", "Panama"]);
+
+      const option: HTMLLIElement = screen.getByRole("option", {
+        name: "Paris",
+      });
+
+      await user.click(option);
+
+      expect(screen.getByText("Value = paris|")).toBeVisible();
       expect(input).toHaveValue("Paris");
-      screen.getByText("Value = paris|");
-      screen.getByText("onChangeCounts = 0|");
 
-      rerender(
-        <Wrapper
-          options={[
-            {
-              label: "Paname",
-              value: "paris",
-            },
-            ...myOptions.slice(1),
-          ]}
-        />,
-      );
+      await user.clear(input);
 
-      await waitFor(() => expect(input).toHaveValue("Paname"));
-      screen.getByText("Value = paris|");
-      screen.getByText("onChangeCounts = 0|");
+      expect(callbackFetchOptionsMock).toHaveBeenNthCalledWith(4, {
+        search: "",
+      });
+      expect(screen.getByText("Value = |")).toBeVisible();
+      expect(input).toHaveValue("");
+      expectOptions(["Paris", "Panama", "London", "New York", "Tokyo"]);
     });
   });
 
diff --git a/packages/react/src/components/Forms/Select/mono.stories.tsx b/packages/react/src/components/Forms/Select/mono.stories.tsx
index c6865f7f5..1d3b42c47 100644
--- a/packages/react/src/components/Forms/Select/mono.stories.tsx
+++ b/packages/react/src/components/Forms/Select/mono.stories.tsx
@@ -4,14 +4,21 @@ import { FormProvider, useForm } from "react-hook-form";
 import * as Yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { onSubmit } from ":/components/Forms/Examples/ReactHookForm/reactHookFormUtils";
-import { Select, SelectHandle } from ":/components/Forms/Select";
+import {
+  ContextCallbackFetchOptions,
+  Option,
+  Select,
+  SelectHandle,
+} from ":/components/Forms/Select";
 import { Button } from ":/components/Button";
 import {
   getCountryOption,
   RhfSelect,
+  fetchOptions,
 } from ":/components/Forms/Select/stories-utils";
 import { Modal, ModalSize, useModal } from ":/components/Modal";
 import { Input } from ":/components/Forms/Input";
+import { CunninghamProvider } from ":/components/Provider";
 
 export default {
   title: "Components/Forms/Select/Mono",
@@ -175,6 +182,107 @@ export const SearchableUncontrolled = {
   },
 };
 
+export const SearchableUncontrolledWithAsyncOptionsFetching = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInitialOptionFetching, setIsInitialOptionFetching] = useState(true);
+
+  const fetchAsyncOptions = async (context: ContextCallbackFetchOptions) => {
+    let arrayOptions: Option[] = [];
+
+    setIsLoading(true);
+    context.search = isInitialOptionFetching ? "" : context.search;
+    arrayOptions = await fetchOptions(context, OPTIONS, 1000);
+    setIsInitialOptionFetching(false);
+
+    setIsLoading(false);
+    return arrayOptions;
+  };
+
+  return (
+    <div style={{ paddingBottom: "200px", position: "relative" }}>
+      <Select
+        label="Select a city"
+        options={fetchAsyncOptions}
+        isLoading={isLoading}
+        searchable={true}
+      />
+    </div>
+  );
+};
+
+export const SearchableUncontrolledWithAsyncOptionsFetchingAndDefaultValue =
+  () => {
+    const [isLoading, setIsLoading] = useState(true);
+    const [isInitialOptionFetching, setIsInitialOptionFetching] =
+      useState(true);
+
+    const fetchAsyncOptions = async (context: ContextCallbackFetchOptions) => {
+      let arrayOptions: Option[] = [];
+
+      setIsLoading(true);
+      context.search = isInitialOptionFetching ? "" : context.search;
+      arrayOptions = await fetchOptions(context, OPTIONS, 1000);
+      setIsInitialOptionFetching(false);
+
+      setIsLoading(false);
+      return arrayOptions;
+    };
+
+    return (
+      <div style={{ paddingBottom: "200px", position: "relative" }}>
+        <Select
+          label="Select a city"
+          options={fetchAsyncOptions}
+          isLoading={isLoading}
+          defaultValue={OPTIONS[4].value}
+          searchable={true}
+        />
+      </div>
+    );
+  };
+
+export const SearchableControlledWithAsyncOptionsFetching = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInitialOptionFetching, setIsInitialOptionFetching] = useState(true);
+  const [value, setValue] = useState<string | number | undefined>("woodbury");
+
+  const fetchAsyncOptions = async (context: ContextCallbackFetchOptions) => {
+    let arrayOptions: Option[] = [];
+
+    setIsLoading(true);
+    context.search = isInitialOptionFetching ? "" : context.search;
+
+    arrayOptions = await fetchOptions(context, OPTIONS, 200);
+
+    setIsInitialOptionFetching(false);
+
+    setIsLoading(false);
+
+    return arrayOptions;
+  };
+
+  return (
+    <CunninghamProvider>
+      <div style={{ paddingBottom: "200px", position: "relative" }}>
+        <div>
+          Value: <span>{value}</span>
+        </div>
+        <Select
+          label="Select a city"
+          options={fetchAsyncOptions}
+          searchable={true}
+          isLoading={isLoading}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value as string);
+          }}
+        />
+        <Button onClick={() => setValue(undefined)}>Reset</Button>
+      </div>
+    </CunninghamProvider>
+  );
+};
+
 export const SearchableDisabled = {
   render: Template,
 
diff --git a/packages/react/src/components/Forms/Select/mono.tsx b/packages/react/src/components/Forms/Select/mono.tsx
index f364b8198..d2abafa91 100644
--- a/packages/react/src/components/Forms/Select/mono.tsx
+++ b/packages/react/src/components/Forms/Select/mono.tsx
@@ -5,13 +5,24 @@ import { SelectMonoSearchable } from ":/components/Forms/Select/mono-searchable"
 import { SelectMonoSimple } from ":/components/Forms/Select/mono-simple";
 import { Option, SelectHandle, SelectProps } from ":/components/Forms/Select";
 
-export const SelectMono = forwardRef<SelectHandle, SelectProps>(
+export type SelectMonoProps = Omit<SelectProps, "value"> & {
+  value?: string | number;
+};
+export const SelectMono = forwardRef<SelectHandle, SelectMonoProps>(
   (props, ref) => {
-    const defaultSelectedItem = props.defaultValue
-      ? props.options.find(
-          (option) => optionToValue(option) === props.defaultValue,
-        )
-      : undefined;
+    const { options } = props;
+
+    const isPropOptionsAnArray = Array.isArray(options);
+
+    const arrayOptions: Option[] = isPropOptionsAnArray ? options : [];
+
+    const defaultSelectedItem =
+      props.defaultValue && arrayOptions?.length
+        ? arrayOptions.find(
+            (option) => optionToValue(option) === props.defaultValue,
+          )
+        : undefined;
+
     const [value, setValue] = useState(
       defaultSelectedItem ? optionToValue(defaultSelectedItem) : props.value,
     );
@@ -58,6 +69,7 @@ export const SelectMono = forwardRef<SelectHandle, SelectProps>(
     ) : (
       <SelectMonoSimple
         {...props}
+        options={arrayOptions}
         downshiftProps={commonDownshiftProps}
         value={value}
         ref={ref}
diff --git a/packages/react/src/components/Forms/Select/multi-searchable.tsx b/packages/react/src/components/Forms/Select/multi-searchable.tsx
index f7c08b2ab..7939bfbf2 100644
--- a/packages/react/src/components/Forms/Select/multi-searchable.tsx
+++ b/packages/react/src/components/Forms/Select/multi-searchable.tsx
@@ -20,9 +20,11 @@ export const SelectMultiSearchable = forwardRef<SelectHandle, SubProps>(
     const inputRef = useRef<HTMLInputElement>(null);
     const options = React.useMemo(
       () =>
-        props.options.filter(
-          getMultiOptionsFilter(props.selectedItems, inputValue),
-        ),
+        Array.isArray(props.options)
+          ? props.options.filter(
+              getMultiOptionsFilter(props.selectedItems, inputValue),
+            )
+          : [],
       [props.selectedItems, inputValue],
     );
     const [hasInputFocused, setHasInputFocused] = useState(false);
diff --git a/packages/react/src/components/Forms/Select/multi-simple.tsx b/packages/react/src/components/Forms/Select/multi-simple.tsx
index ff901c4f9..a1a7be81e 100644
--- a/packages/react/src/components/Forms/Select/multi-simple.tsx
+++ b/packages/react/src/components/Forms/Select/multi-simple.tsx
@@ -13,6 +13,10 @@ import { Option, SelectHandle } from ":/components/Forms/Select/index";
 
 export const SelectMultiSimple = forwardRef<SelectHandle, SubProps>(
   (props, ref) => {
+    const arrayOptions: Option[] = Array.isArray(props.options)
+      ? props.options
+      : [];
+
     const isSelected = (option: Option) =>
       !!props.selectedItems.find((selectedItem) =>
         optionsEqual(selectedItem, option),
@@ -20,12 +24,12 @@ export const SelectMultiSimple = forwardRef<SelectHandle, SubProps>(
 
     const options = React.useMemo(() => {
       if (props.monoline) {
-        return props.options.map((option) => ({
+        return arrayOptions.map((option) => ({
           ...option,
           highlighted: isSelected(option),
         }));
       }
-      return props.options.filter(
+      return arrayOptions.filter(
         getMultiOptionsFilter(props.selectedItems, ""),
       );
     }, [props.selectedItems]);
diff --git a/packages/react/src/components/Forms/Select/multi.tsx b/packages/react/src/components/Forms/Select/multi.tsx
index 678435eac..aab6fe1ad 100644
--- a/packages/react/src/components/Forms/Select/multi.tsx
+++ b/packages/react/src/components/Forms/Select/multi.tsx
@@ -17,9 +17,11 @@ export const SelectMulti = forwardRef<SelectHandle, SelectMultiProps>(
   (props, ref) => {
     const getSelectedItemsFromProps = () => {
       const valueToUse = props.defaultValue ?? props.value ?? [];
-      return props.options.filter((option) =>
-        (valueToUse as string[]).includes(optionToValue(option)),
-      );
+      return Array.isArray(props.options)
+        ? props.options.filter((option) =>
+            (valueToUse as string[]).includes(optionToValue(option)),
+          )
+        : [];
     };
 
     const [selectedItems, setSelectedItems] = React.useState<Option[]>(
diff --git a/packages/react/src/components/Forms/Select/stories-utils.tsx b/packages/react/src/components/Forms/Select/stories-utils.tsx
index f4c50b2be..5d0547ced 100644
--- a/packages/react/src/components/Forms/Select/stories-utils.tsx
+++ b/packages/react/src/components/Forms/Select/stories-utils.tsx
@@ -1,6 +1,11 @@
 import { Controller, useFormContext } from "react-hook-form";
 import React from "react";
-import { Select, SelectProps } from ":/components/Forms/Select/index";
+import {
+  ContextCallbackFetchOptions,
+  Option,
+  Select,
+  SelectProps,
+} from ":/components/Forms/Select/index";
 
 export const RhfSelect = (props: SelectProps & { name: string }) => {
   const { control, setValue } = useFormContext();
@@ -38,3 +43,26 @@ export const getCountryOption = (name: string, code: string) => ({
     </div>
   ),
 });
+
+export const fetchOptions = async (
+  context: ContextCallbackFetchOptions,
+  options: Option[],
+  msTimeOut?: number,
+): Promise<Option[]> =>
+  new Promise((resolve) => {
+    // simulate a delayed response
+    setTimeout(() => {
+      const stringSearch = context?.search ?? undefined;
+
+      const filterOptions = (arrayOptions: Option[], search: string) =>
+        arrayOptions.filter((option) =>
+          option.label.toLocaleLowerCase().includes(search.toLowerCase()),
+        );
+
+      const arrayOptions: Option[] = stringSearch
+        ? filterOptions(options, String(stringSearch))
+        : options;
+
+      resolve(arrayOptions);
+    }, msTimeOut || 500);
+  });
diff --git a/packages/react/src/components/Forms/Select/test-utils.tsx b/packages/react/src/components/Forms/Select/test-utils.tsx
index f32348d98..19f3feba7 100644
--- a/packages/react/src/components/Forms/Select/test-utils.tsx
+++ b/packages/react/src/components/Forms/Select/test-utils.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import { screen } from "@testing-library/react";
+import { screen, waitFor } from "@testing-library/react";
 
 export const expectMenuToBeOpen = (menu: HTMLDivElement) => {
   expect(Array.from(menu.classList)).contains("c__select__menu--opened");
@@ -49,3 +49,20 @@ export const expectSelectedOptionsText = (expectedOptions: string[]) => {
   const valueElement = document.querySelector(".c__select__inner__value");
   expect(valueElement?.textContent).toEqual(expectedOptions.join(", "));
 };
+
+export const expectLoaderToBeVisible = async () => {
+  await waitFor(() => {
+    const loader = screen.queryByRole("status", {
+      name: "Loading data",
+    });
+    expect(loader).toBeVisible();
+  });
+};
+export const expectLoaderNotToBeInTheDocument = async () => {
+  await waitFor(() => {
+    const loader = screen.queryByRole("status", {
+      name: "Loading data",
+    });
+    expect(loader).not.toBeInTheDocument();
+  });
+};
diff --git a/packages/react/src/locales/en-US.json b/packages/react/src/locales/en-US.json
index bbe2d6405..ac1102af7 100644
--- a/packages/react/src/locales/en-US.json
+++ b/packages/react/src/locales/en-US.json
@@ -34,7 +34,8 @@
         "toggle_button_aria_label": "Toggle dropdown",
         "clear_button_aria_label": "Clear selection",
         "clear_all_button_aria_label": "Clear all selections",
-        "menu_empty_placeholder": "No options available"
+        "menu_empty_placeholder": "No options available",
+        "loader_aria": "Loading data"
       },
       "file_uploader": {
         "delete_file_name": "Delete file {name}",
diff --git a/packages/react/src/locales/fr-FR.json b/packages/react/src/locales/fr-FR.json
index 5c4f0b471..2a02421b6 100644
--- a/packages/react/src/locales/fr-FR.json
+++ b/packages/react/src/locales/fr-FR.json
@@ -26,7 +26,8 @@
         "toggle_button_aria_label": "Ouvrir le menu",
         "clear_button_aria_label": "Effacer la sélection",
         "clear_all_button_aria_label": "Effacer toutes les sélections",
-        "menu_empty_placeholder": "Aucun choix disponible"
+        "menu_empty_placeholder": "Aucun choix disponible",
+        "loader_aria": "Données en cours de chargement"
       },
       "file_uploader": {
         "delete_file_name": "Supprimer le fichier {name}",
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
new file mode 100644
index 000000000..e6d52ba77
--- /dev/null
+++ b/vitest.workspace.ts
@@ -0,0 +1 @@
+export default ["packages/react"];