diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 9652e59..dbcb332 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -11,17 +11,14 @@ Templates.framework = "tailwind";
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    // actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
+    docs: {
+      source: { language: "tsx" }
     }
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS
-  }
+  },
+  tags: ["autodocs"]
 };
 
 export default preview;
diff --git a/package.json b/package.json
index b9f44f7..9cfea7c 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.2.1",
+    "react-select": "^5.9.0",
     "react-table": "^7.8.0",
     "redux-thunk": "^2.4.1",
     "tooltip.js": "^1.3.3"
diff --git a/packages/react-formio-container/src/views/forms.stories.tsx b/packages/react-formio-container/src/views/forms.stories.tsx
index 1075c23..1740500 100644
--- a/packages/react-formio-container/src/views/forms.stories.tsx
+++ b/packages/react-formio-container/src/views/forms.stories.tsx
@@ -5,9 +5,7 @@ export default {
   component: FormsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }
diff --git a/packages/react-formio-container/src/views/submissions.stories.tsx b/packages/react-formio-container/src/views/submissions.stories.tsx
index ff064dc..9758aeb 100644
--- a/packages/react-formio-container/src/views/submissions.stories.tsx
+++ b/packages/react-formio-container/src/views/submissions.stories.tsx
@@ -7,9 +7,7 @@ export default {
   component: SubmissionsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }
diff --git a/packages/react-formio/package.json b/packages/react-formio/package.json
index 679da2f..65f530f 100644
--- a/packages/react-formio/package.json
+++ b/packages/react-formio/package.json
@@ -38,6 +38,7 @@
     "react-dnd": ">=16.0.1",
     "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
+    "react-select": ">=5.9.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },
diff --git a/packages/react-formio/src/molecules/alert/Alert.stories.tsx b/packages/react-formio/src/molecules/alert/Alert.stories.tsx
index 03ca06e..515e0d6 100644
--- a/packages/react-formio/src/molecules/alert/Alert.stories.tsx
+++ b/packages/react-formio/src/molecules/alert/Alert.stories.tsx
@@ -16,18 +16,18 @@ export default {
   component: Alert,
   argTypes: {
     message: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     type: {
-      control: {
-        type: "select",
-        options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
-      }
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    }
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx" }
     }
   },
-  parameters: {},
   tags: ["autodocs"]
 };
 
diff --git a/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
index b457bb3..f922e7b 100644
--- a/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
@@ -12,19 +12,13 @@ export default {
   component: FormControl,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     children: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {},
diff --git a/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
index 1eba2da..003ae35 100644
--- a/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
+++ b/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
@@ -2,6 +2,7 @@ import classnames from "classnames";
 import type { PropsWithChildren, ReactNode } from "react";
 
 export interface FormControlProps<Data = any> {
+  id?: string;
   name: string;
   value?: Data;
   required?: boolean;
@@ -17,6 +18,7 @@ export interface FormControlProps<Data = any> {
 export function FormControl({
   children,
   name,
+  id = name,
   required,
   prefix,
   suffix,
@@ -27,7 +29,7 @@ export function FormControl({
   return (
     <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
       {label && (
-        <label htmlFor={name} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
+        <label htmlFor={id} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
           {label}
         </label>
       )}
diff --git a/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
index 6895599..5b61a76 100644
--- a/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
@@ -14,40 +14,26 @@ export default {
   component: InputTags,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     value: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
+      control: "select",
+      options: ["small", "normal"]
     },
     placeholder: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     choices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     description: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     }
   },
   parameters: {},
diff --git a/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
index bcd2f4e..19bbdb7 100644
--- a/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
+++ b/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
@@ -2,6 +2,7 @@ import Choices from "@formio/choices.js";
 import uniq from "lodash/uniq";
 import { useEffect, useRef } from "react";
 
+import { registerComponent } from "../../../registries/components";
 import { FormControl, FormControlProps } from "../form-control/FormControl";
 
 export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
@@ -47,3 +48,5 @@ export function InputTags({ name, value = [], label, onChange, required, descrip
     </FormControl>
   );
 }
+
+registerComponent("InputTags", InputTags);
diff --git a/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
index 31e4a43..c5116c1 100644
--- a/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
@@ -18,45 +18,29 @@ export default {
   component: InputText,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     type: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     value: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     required: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
+      control: "select",
+      options: ["small", "normal"]
     },
     placeholder: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     description: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     onChange: {
       action: "onChange"
@@ -188,7 +172,7 @@ export const Sizing: Story = {
     label: "Label",
     type: "number",
     value: "",
-    size: "sm",
+    size: "small",
     placeholder: "Placeholder",
     description: "Use dollars!"
   }
diff --git a/packages/react-formio/src/molecules/forms/input-text/InputText.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
index ea7b6fb..8a40218 100644
--- a/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
+++ b/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
@@ -2,6 +2,7 @@ import classnames from "classnames";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
+import { registerComponent } from "../../../registries/components";
 import { getEventValue } from "../../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/FormControl";
 
@@ -11,7 +12,7 @@ export interface InputTextProps<Data = any> extends FormControlProps<Data> {
   /**
    * The input size
    */
-  size?: string;
+  size?: "small" | string;
   onChange?: (name: string, value: Data) => void;
   placeholder?: string;
   debounceDelay?: number;
@@ -21,6 +22,7 @@ export interface InputTextProps<Data = any> extends FormControlProps<Data> {
 
 export function InputText<T = any>({
   name,
+  id = name,
   value,
   label,
   onChange,
@@ -57,7 +59,8 @@ export function InputText<T = any>({
         {...props}
         data-testid={`input_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
-        id={name}
+        id={id}
+        name={name}
         required={required}
         value={(localValue || "") as any}
         placeholder={placeholder}
@@ -71,3 +74,5 @@ export function InputText<T = any>({
     </FormControl>
   );
 }
+
+registerComponent("InputText", InputText);
diff --git a/packages/react-formio/src/molecules/forms/select/Select.interfaces.ts b/packages/react-formio/src/molecules/forms/select/Select.interfaces.ts
new file mode 100644
index 0000000..3d6e439
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/Select.interfaces.ts
@@ -0,0 +1,47 @@
+import { HTMLAttributes } from "react";
+
+import { FormControlProps } from "../form-control/FormControl";
+
+export interface SelectOptionBaseProps<Data = any> extends Record<string, any> {
+  label: string | JSX.Element;
+  value: string;
+  id?: string;
+  disabled?: boolean;
+  note?: string | JSX.Element;
+  group?: string;
+  data?: Data;
+  template?: (item: SelectOptionProps<Data>) => JSX.Element;
+}
+
+export interface SelectOptionProps<Data = string> extends SelectOptionBaseProps<Data> {
+  options?: SelectOptionProps<Data>[];
+}
+
+export interface SelectProps<Data = string> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
+  layout?: "html5" | "react" | "choicesjs";
+  /**
+   * Error message
+   */
+  errorMessage?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  size?: string;
+  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+  disableSearch?: boolean;
+  searchEnabled?: boolean;
+  customProperties?: Record<string, any>;
+}
+
+export interface SelectSingle<Data = string> extends SelectProps<Data> {
+  multiple?: false | undefined;
+  value?: Data;
+  onChange?: (name: string, value: Data) => void;
+}
+
+export interface SelectMultiple<Data = string> extends SelectProps<Data> {
+  multiple: true;
+  value?: Data[];
+  onChange?: (name: string, value: Data[]) => void;
+}
+
+export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;
diff --git a/packages/react-formio/src/molecules/forms/select/Select.spec.tsx b/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
deleted file mode 100644
index 71c5539..0000000
--- a/packages/react-formio/src/molecules/forms/select/Select.spec.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import { Select } from "./Select";
-import { Choicesjs, Usage } from "./Select.stories";
-const choices = [
-  { label: "label1", value: "value1" },
-  { label: "label2", value: "value2" }
-];
-
-describe("Select", () => {
-  describe("select component Usage version", () => {
-    it("should render the select component", () => {
-      render(<Select {...Usage.args} choices={choices} name={"test-sandbox"} />);
-
-      expect(screen.getByTestId("select_test-sandbox")).toBeInTheDocument();
-    });
-
-    it("should render the select component with a different size", () => {
-      render(<Select {...Usage.args} choices={choices} size='small' name={"test-sandbox"} />);
-      const select = screen.getByTestId("select_test-sandbox");
-      expect(select).toBeInTheDocument();
-      expect(select).toHaveClass("form-control-small");
-    });
-
-    it("should render select options with 'Placeholder test' as first value", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-
-      const placeHolderTest = "Placeholder test";
-
-      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-
-      expect(screen.getByRole("option", { name: "Placeholder test" })).toBeInTheDocument();
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-      expect(screen.getByRole("option", { name: "test2" })).toBeInTheDocument();
-    });
-
-    it("should have Placeholder label as selected option by default", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-
-      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} />);
-      const option = screen.getByRole("option", { name: placeHolderTest }) as HTMLOptionElement;
-
-      expect(option.selected).toBeTruthy();
-    });
-
-    it("should change the value of the selected option when you click on another choice", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-      const onChange = vi.fn();
-
-      render(<Select {...Usage.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
-
-      fireEvent.change(screen.getByTestId("select_test-sandbox"), {
-        target: { value: "value1" }
-      });
-
-      expect(onChange).toHaveBeenCalledWith("test-sandbox", "value1");
-    });
-  });
-
-  describe("select component Choicesjs version", () => {
-    it("should render select options with 'test1' as first value", () => {
-      const choices = [
-        { label: "test1", value: "value1" },
-        { label: "test2", value: "value2" }
-      ];
-      const placeHolderTest = "Placeholder test";
-
-      render(<Select {...Choicesjs.args} layout={"choicesjs"} choices={choices} placeholder={placeHolderTest} name={"test-choicesjs"} />);
-
-      expect(screen.getByRole("option", { name: "test1" })).toBeInTheDocument();
-    });
-  });
-});
diff --git a/packages/react-formio/src/molecules/forms/select/Select.stories.tsx b/packages/react-formio/src/molecules/forms/select/Select.stories.tsx
deleted file mode 100644
index 9ee076b..0000000
--- a/packages/react-formio/src/molecules/forms/select/Select.stories.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-
-import { iconClass } from "../../../utils/iconClass";
-import { useValue } from "../../__fixtures__/useValue.hook";
-import { Select } from "./Select";
-
-const choices = [
-  { label: "label1", value: "value1" },
-  { label: "label2", value: "value2" }
-];
-
-/**
- * Select components are used for collecting user provided information from a list of options.
- *
- * ```tsx
- * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
- * ```
- */
-export default {
-  title: "forms/Select",
-  component: Select,
-  argTypes: {
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    name: {
-      control: {
-        type: "text"
-      }
-    },
-    value: {
-      control: {
-        type: "select",
-        options: choices
-      }
-    },
-    size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
-    },
-    layout: {
-      control: {
-        type: "select",
-        options: ["html5", "choicesjs"]
-      }
-    },
-    placeholder: {
-      control: {
-        type: "text"
-      }
-    },
-    choices: {
-      control: {
-        type: "object"
-      }
-    }
-  },
-  parameters: {},
-  render(args: any) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return <Select {...useValue(args)} />;
-  },
-  tags: ["autodocs"]
-} satisfies Meta<typeof Select>;
-
-type Story = StoryObj<typeof Select>;
-/**
- * Basic select component using HTML5 syntax.
- */
-export const Usage: Story = {
-  args: {
-    label: "Label",
-    value: "",
-    size: "",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-/**
- * Use Choice.js to render the Select component.
- */
-export const Choicesjs: Story = {
-  args: {
-    label: "Label",
-    value: "",
-    size: "",
-    layout: "choicesjs",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-
-export const ChoicesjsPrefix: Story = {
-  args: {
-    prefix: <i className={iconClass(undefined, "calendar")} />,
-    label: "Label",
-    name: "name",
-    value: "",
-    size: "",
-    layout: "choicesjs",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-
-export const WithPrefix: Story = {
-  args: {
-    prefix: <i className={iconClass(undefined, "calendar")} />,
-    label: "Label",
-    value: "",
-    size: "",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-
-export const WithSuffix: Story = {
-  args: {
-    suffix: <i className={iconClass(undefined, "calendar")} />,
-    label: "Label",
-    value: "",
-    size: "",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-
-export const TypeMultiple: Story = {
-  args: {
-    label: "Label",
-    name: "name",
-    value: [],
-    size: "",
-    multiple: true,
-    placeholder: "Placeholder",
-    description: "Select multiple values",
-    choices
-  }
-};
-
-export const ChoicesjsMultiple: Story = {
-  args: {
-    label: "Label",
-    value: [],
-    size: "",
-    multiple: true,
-    layout: "choicesjs",
-    placeholder: "Placeholder",
-    choices
-  }
-};
-
-export const Sizing: Story = {
-  args: {
-    suffix: <i className={iconClass(undefined, "dollar")} />,
-    label: "Label",
-    value: "",
-    size: "sm",
-    placeholder: "Placeholder",
-    description: "Use dollars!",
-    choices
-  }
-};
diff --git a/packages/react-formio/src/molecules/forms/select/Select.tsx b/packages/react-formio/src/molecules/forms/select/Select.tsx
index ebca4fb..3383791 100644
--- a/packages/react-formio/src/molecules/forms/select/Select.tsx
+++ b/packages/react-formio/src/molecules/forms/select/Select.tsx
@@ -1,88 +1,26 @@
-import Choices from "@formio/choices.js";
-import classnames from "classnames";
-import { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
+import type { ComponentType } from "react";
 
-import { getEventValue } from "../../../utils/getEventValue";
-import { FormControl, FormControlProps } from "../form-control/FormControl";
+import { getComponent, registerComponent } from "../../../registries/components";
+import { FormControl } from "../form-control/FormControl";
+import { useOptions } from "./hooks/useOptions";
+import { AllSelectProps } from "./Select.interfaces";
 
-export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
-  size?: string;
-  placeholder?: string;
-  choices: { label: string; value: Data }[];
-  layout?: "html5" | "choicesjs";
-  disabled?: boolean;
-  multiple?: boolean;
-}
-
-export function Select<Data = any>({
-  name,
-  label,
-  size,
-  onChange,
-  required,
-  value,
-  choices,
-  description,
-  placeholder,
-  prefix,
-  suffix,
-  multiple,
-  layout,
-  ...props
-}: SelectProps<Data>): ReactElement {
-  const ref = useRef<HTMLSelectElement>(null);
-
-  useEffect(() => {
-    let instance: any;
+let uuid = 0;
 
-    if (layout === "choicesjs") {
-      instance = new Choices(ref.current as unknown as HTMLInputElement, {
-        removeItemButton: true,
-        placeholderValue: placeholder
-      });
-    }
+export function Select<Data = string>(props: AllSelectProps<Data>) {
+  const { className, name = "", id = `field-select-${++uuid}`, label, description = "" } = props;
+  const options = useOptions<Data>({
+    ...props,
+    value: (Array.isArray(props.value) ? props.value : [props.value]) as any
+  });
 
-    return () => {
-      instance && instance.destroy();
-    };
-  }, []);
-
-  choices =
-    layout === "choicesjs" || multiple || !placeholder
-      ? choices
-      : ([
-          {
-            label: placeholder,
-            value: ""
-          },
-          ...choices
-        ] as any[]);
+  const Component = getComponent<ComponentType<AllSelectProps<Data>>>(["Select." + props.layout, "Select.html5"]);
 
   return (
-    <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
-      {}
-      <select
-        ref={ref}
-        data-testid={`select_${name}`}
-        {...props}
-        className={classnames("form-control", size && `form-control-${size}`)}
-        name={name}
-        id={name}
-        multiple={multiple}
-        value={value || ("" as any)}
-        placeholder={placeholder}
-        onChange={(event) => {
-          onChange && onChange(name, getEventValue(event));
-        }}
-      >
-        {choices.map(({ label, value }) => {
-          return (
-            <option key={String(value)} label={label} value={value as any}>
-              {label}
-            </option>
-          );
-        })}
-      </select>
+    <FormControl {...props} id={id} description={description} shadow={false} className={className} label={label}>
+      <Component {...props} options={options} name={name} id={id} />
     </FormControl>
   );
 }
+
+registerComponent("Select", Select);
diff --git a/packages/react-formio/src/molecules/forms/select/all.ts b/packages/react-formio/src/molecules/forms/select/all.ts
new file mode 100644
index 0000000..55cceae
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/all.ts
@@ -0,0 +1,6 @@
+import "./components/ReactSelect";
+import "./components/HtmlSelect";
+import "./components/ChoicesSelect";
+
+export * from "./Select";
+export * from "./Select.interfaces";
diff --git a/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
new file mode 100644
index 0000000..604fa7d
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
@@ -0,0 +1,375 @@
+import "./ChoicesSelect";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * ChoicesJS select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/ChoicesSelect"; // register only ChoicesJS component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/ChoiceJs",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {
+    layout: "choicesjs"
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "text"
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "radio",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("option-1");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+
+    const label = canvas.getByTestId("form-group-name");
+
+    await expect(label).toBeInTheDocument();
+    await expect(label).toHaveTextContent("Label");
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+  }
+};
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholderAndRequired: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    required: true,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    size: "small",
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithPrefix: Story = {
+  args: {
+    prefix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithSuffix: Story = {
+  args: {
+    suffix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export const WithGroupsLegacy: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Option 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Option 3",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]
+  }
+};
diff --git a/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.tsx b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.tsx
new file mode 100644
index 0000000..a2a4d30
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.tsx
@@ -0,0 +1,168 @@
+import Choices from "@formio/choices.js";
+import cx from "classnames";
+import omit from "lodash/omit";
+import { useEffect, useMemo, useRef } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+import { registerComponent } from "../../../../registries/components";
+import type { AllSelectProps } from "../Select.interfaces";
+import { callbackOnCreateTemplates } from "./choices.template";
+
+export function useChoices({
+  name,
+  disabled,
+  multiple,
+  options,
+  placeholder,
+  searchEnabled = true,
+  customProperties = {},
+  size,
+  value,
+  required,
+  onChange
+}: AllSelectProps) {
+  const ref = useRef<any>();
+  const choicesRef = useRef<Choices>();
+
+  const opts = useMemo(() => {
+    const isSelected = (itemValue: any) => [].concat(value as any).includes(itemValue as never);
+
+    const opts = options.map((item) => {
+      if (item.options) {
+        item = {
+          ...item,
+          choices: item.options.map((item: any) => ({
+            ...item,
+            selected: isSelected(item.value)
+          }))
+        };
+      }
+
+      return {
+        ...item,
+        selected: isSelected(item.value)
+      };
+    });
+
+    if (!multiple && placeholder) {
+      return [
+        {
+          disabled: required,
+          label: placeholder,
+          value: ""
+        },
+        ...opts
+      ];
+    }
+
+    return opts;
+  }, [options, value, required, multiple, placeholder]);
+
+  const onChangeCallback = useDebouncedCallback((name: string, value: any) => {
+    onChange?.(name, value);
+  }, 50);
+
+  useEffect(() => {
+    if (choicesRef.current) {
+      if (multiple) {
+        choicesRef.current.clearStore();
+        choicesRef.current.setChoices(opts, "value", "label", true);
+      } else {
+        choicesRef.current.setChoices(opts, "value", "label", true);
+      }
+    }
+  }, [opts]);
+
+  useEffect(() => {
+    if (!choicesRef.current) {
+      const {
+        allowHTML = true,
+        silent = true,
+        removeItemButton = true,
+        shouldSort = false,
+        itemSelectText = "",
+        classNames
+      } = customProperties;
+      choicesRef.current = new Choices(ref.current, {
+        ...customProperties,
+        allowHTML,
+        silent,
+        searchEnabled,
+        removeItemButton,
+        choices: opts,
+        placeholder: placeholder as string,
+        placeholderValue: "" as string,
+        itemSelectText,
+        shouldSort,
+        classNames: {
+          ...classNames,
+          containerOuter: `choices ${size || ""}`
+        },
+        callbackOnCreateTemplates
+      } as any);
+    }
+
+    if (disabled) {
+      choicesRef.current?.disable();
+    } else {
+      choicesRef.current?.enable();
+    }
+
+    const addItem = ({ detail: { value: newValue } }: any) => {
+      onChangeCallback(name, multiple ? [...new Set([...new Set(value as string[]), newValue])] : newValue);
+    };
+
+    const removeItem = ({ detail: { value: newValue } }: any) => {
+      if (multiple) {
+        onChangeCallback(
+          name,
+          (value as string[]).filter((v) => v !== newValue)
+        );
+      } else {
+        onChangeCallback(name, undefined as any);
+      }
+    };
+
+    choicesRef.current?.passedElement.element.addEventListener("addItem", addItem);
+    choicesRef.current?.passedElement.element.addEventListener("removeItem", removeItem);
+
+    return () => {
+      choicesRef.current?.passedElement.element.removeEventListener("addItem", addItem);
+      choicesRef.current?.passedElement.element.removeEventListener("removeItem", removeItem);
+    };
+  }, [disabled, onChange, opts, placeholder, searchEnabled, size, value]);
+
+  return {
+    ref,
+    choicesRef
+  };
+}
+
+export function ChoiceSelect(props: AllSelectProps) {
+  const { ref } = useChoices({
+    ...props,
+    searchEnabled: !props.disableSearch
+  });
+
+  return (
+    <select
+      ref={ref}
+      data-testid={`select_${props.name}`}
+      {...omit(props as any, [
+        "value",
+        "options",
+        "placeholder",
+        "onChange",
+        "allowHTML",
+        "silent",
+        "removeItemButton",
+        "shouldSort",
+        "itemSelectText",
+        "customProperties"
+      ])}
+      className={cx("form-control", props.size && `form-control-${props.size}`)}
+    />
+  );
+}
+
+registerComponent("Select.choicesjs", ChoiceSelect);
diff --git a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.stories.tsx b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.stories.tsx
new file mode 100644
index 0000000..d0829e1
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.stories.tsx
@@ -0,0 +1,305 @@
+import "./HtmlSelect";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * HTML5 select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect"; // register only HTML5 component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/Html5",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {},
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "select",
+      options: ["option-1", "option-2", "option-3"]
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "select",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("option-1");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+
+    const label = canvas.getByTestId("form-group-name");
+
+    await expect(label).toBeInTheDocument();
+    await expect(label).toHaveTextContent("Label");
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    size: "small",
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithPrefix: Story = {
+  args: {
+    prefix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithSuffix: Story = {
+  args: {
+    suffix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Group 2",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Group 2",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
diff --git a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
new file mode 100644
index 0000000..9e889dc
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
@@ -0,0 +1,53 @@
+import cx from "classnames";
+
+import { registerComponent } from "../../../../registries/components";
+import { getEventValue } from "../../../../utils/getEventValue";
+import { AllSelectProps, SelectOptionBaseProps } from "../Select.interfaces";
+
+function Option({ value, label, ...props }: SelectOptionBaseProps) {
+  return (
+    <option {...props} value={value as any}>
+      {label}
+    </option>
+  );
+}
+
+export function HTMLSelect({ name, id = name, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps) {
+  const hasGroup = !!options[0].options;
+
+  return (
+    <select
+      {...(props as any)}
+      data-testid={`select_${name}`}
+      className={cx("form-control", size && `form-control-${size}`)}
+      name={name}
+      id={id}
+      multiple={multiple}
+      value={value || ("" as any)}
+      onChange={(event) => {
+        onChange && onChange(name, getEventValue(event));
+      }}
+    >
+      {placeholder && !multiple && (
+        <option value='' disabled>
+          {placeholder}
+        </option>
+      )}
+      {hasGroup
+        ? options.map(({ label, options }) => {
+            return (
+              <optgroup key={label} label={label}>
+                {options.map((props: SelectOptionBaseProps) => {
+                  return <Option key={String(props.value)} {...props} />;
+                })}
+              </optgroup>
+            );
+          })
+        : (options as SelectOptionBaseProps[]).map((props) => {
+            return <Option key={String(props.value)} {...props} />;
+          })}
+    </select>
+  );
+}
+
+registerComponent("Select.html5", HTMLSelect);
diff --git a/packages/react-formio/src/molecules/forms/select/components/ReactSelect.stories.tsx b/packages/react-formio/src/molecules/forms/select/components/ReactSelect.stories.tsx
new file mode 100644
index 0000000..c3039e8
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/ReactSelect.stories.tsx
@@ -0,0 +1,285 @@
+import "./ReactSelect";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * React select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/ReactSelect"; // register only React select component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/React",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {
+    layout: "react"
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "select",
+      options: ["option-1", "option-2", "option-3"]
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "select",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    size: "small",
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithPrefix: Story = {
+  args: {
+    prefix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithSuffix: Story = {
+  args: {
+    suffix: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          }
+        ]
+      },
+      {
+        group: "group-1",
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        group: "group-2",
+        label: "Option 3",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Option 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Option 3",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
diff --git a/packages/react-formio/src/molecules/forms/select/components/ReactSelect.tsx b/packages/react-formio/src/molecules/forms/select/components/ReactSelect.tsx
new file mode 100644
index 0000000..1521681
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/ReactSelect.tsx
@@ -0,0 +1,60 @@
+import Select, { OptionsOrGroups } from "react-select";
+import makeAnimated from "react-select/animated";
+
+import { registerComponent } from "../../../../registries/components";
+import { AllSelectProps } from "../Select.interfaces";
+
+const animatedComponents = makeAnimated();
+
+function findValues(value: string | string[], options: AllSelectProps["options"][0]) {
+  const localValue: string[] = [].concat(value as never);
+
+  return options
+    .flatMap((item: any) => {
+      if (localValue.includes(item.value)) {
+        return item;
+      }
+
+      if (item.options) {
+        return item.options.filter((option: any) => localValue.includes(option.value));
+      }
+    })
+    .filter(Boolean);
+}
+
+function mapValues(value: { label: string; value: never[] } | null, multiple?: boolean) {
+  return multiple
+    ? []
+        .concat(value as never)
+        .filter(Boolean)
+        .map((v: { value: unknown }) => v.value)
+    : (value as any).value;
+}
+
+export function ReactSelect(props: AllSelectProps) {
+  const { placeholder, options, multiple, searchEnabled = true, customProperties = {} } = props;
+
+  const values = findValues(props.value!, props.options);
+
+  return (
+    <Select<{ label: string; value: never | never[] }>
+      {...customProperties}
+      id={props.id}
+      placeholder={placeholder}
+      className='react-select-container'
+      classNamePrefix='react-select'
+      name={props.name || ""}
+      components={animatedComponents}
+      options={options as OptionsOrGroups<any, any>}
+      isDisabled={props.disabled}
+      isSearchable={searchEnabled}
+      isMulti={props.multiple as false}
+      value={multiple ? values : values[0]}
+      onChange={(value) => {
+        props.onChange?.(props.name, mapValues(value, props.multiple));
+      }}
+    />
+  );
+}
+
+registerComponent("Select.react", ReactSelect);
diff --git a/packages/react-formio/src/molecules/forms/select/components/choices.template.tsx b/packages/react-formio/src/molecules/forms/select/components/choices.template.tsx
new file mode 100644
index 0000000..531e361
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/components/choices.template.tsx
@@ -0,0 +1,38 @@
+import classnames from "classnames";
+import { renderToString } from "react-dom/server";
+
+const ChoiceTemplate = ({ classNames, data, itemSelectText }: { classNames: any; data: any; itemSelectText: string }) => {
+  const Template = data.customProperties?.template;
+
+  return (
+    <div
+      className={classnames(classNames.item, classNames.itemChoice, data.disabled ? classNames.itemDisabled : classNames.itemSelectable)}
+      aria-label={data.label}
+      data-select-text={itemSelectText}
+      data-choice=''
+      data-id={data.id}
+      data-value={data.value}
+      {...(data.disabled
+        ? {
+            "data-choice-disabled": "",
+            "aria-disabled": true
+          }
+        : {
+            "data-choice-selectable": ""
+          })}
+      {...(data.groupId > 0 ? { role: "treeitem" } : { role: "option" })}
+    >
+      {Template ? <Template {...data} data={{ ...data, ...data?.customProperties }} /> : data.label}
+    </div>
+  );
+};
+
+export function callbackOnCreateTemplates(this: { config: { itemSelectText: string } }, strToEl: (template: string) => any) {
+  const itemSelectText = this.config.itemSelectText;
+
+  return {
+    choice: (...args: any) => {
+      return strToEl(renderToString(<ChoiceTemplate itemSelectText={itemSelectText} classNames={args[0]} data={args[1]} />));
+    }
+  };
+}
diff --git a/packages/react-formio/src/molecules/forms/select/hooks/useOptions.spec.ts b/packages/react-formio/src/molecules/forms/select/hooks/useOptions.spec.ts
new file mode 100644
index 0000000..1282879
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/hooks/useOptions.spec.ts
@@ -0,0 +1,154 @@
+import { mapOptions } from "./useOptions";
+
+describe("mapOptions", () => {
+  it("should map options correctly", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Option 1",
+          value: "option-1"
+        },
+        {
+          label: "Option 2",
+          value: "option-2",
+          disabled: true
+        },
+        {
+          label: "Option 3",
+          value: "option-3"
+        }
+      ])
+    ).toEqual([
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]);
+  });
+  it("should map options correctly group (legacy)", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Option 1",
+          group: "group-1",
+          value: "option-1"
+        },
+        {
+          group: "group-1",
+          label: "Option 2",
+          value: "option-2"
+        },
+        {
+          label: "Option 3",
+          group: "group-2",
+          value: "option-3"
+        },
+        {
+          group: "group-2",
+          label: "Option 4",
+          value: "option-4"
+        }
+      ])
+    ).toEqual([
+      {
+        label: "group-1",
+        options: [
+          {
+            label: "Option 1",
+            group: "group-1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            group: "group-1",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "group-2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3",
+            group: "group-2"
+          },
+          {
+            label: "Option 4",
+            value: "option-4",
+            group: "group-2"
+          }
+        ]
+      }
+    ]);
+  });
+
+  it("should map options correctly group (new)", () => {
+    expect(
+      mapOptions([
+        {
+          label: "Group 1",
+          options: [
+            {
+              label: "group-1",
+              value: "option-1"
+            },
+            {
+              label: "Option 2",
+              value: "option-2"
+            }
+          ]
+        },
+        {
+          label: "Group 2",
+          options: [
+            {
+              label: "Option 3",
+              value: "option-3"
+            },
+            {
+              label: "Option 4",
+              value: "option-4"
+            }
+          ]
+        }
+      ])
+    ).toEqual([
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "group-1",
+            value: "option-1"
+          },
+          {
+            label: "Option 2",
+            value: "option-2"
+          }
+        ]
+      },
+      {
+        label: "Group 2",
+        options: [
+          {
+            label: "Option 3",
+            value: "option-3"
+          },
+          {
+            label: "Option 4",
+            value: "option-4"
+          }
+        ]
+      }
+    ]);
+  });
+});
diff --git a/packages/react-formio/src/molecules/forms/select/hooks/useOptions.ts b/packages/react-formio/src/molecules/forms/select/hooks/useOptions.ts
new file mode 100644
index 0000000..4b6ebca
--- /dev/null
+++ b/packages/react-formio/src/molecules/forms/select/hooks/useOptions.ts
@@ -0,0 +1,49 @@
+import { useMemo } from "react";
+
+import type { AllSelectProps } from "../Select.interfaces";
+
+export function mapOptions(options: AllSelectProps["options"]) {
+  if (options.find((item) => item.group)) {
+    let groupsMap = new Map();
+
+    function mapItem(item: AllSelectProps["options"][0]) {
+      return {
+        ...item,
+        customProperties: {
+          ...item.data,
+          template: item.template
+        }
+      };
+    }
+
+    options.forEach((item) => {
+      if (item.group) {
+        // legacy model group
+        const group = groupsMap.get(item.group) || [];
+
+        group.push(item);
+
+        groupsMap.set(item.group, group);
+      } else {
+        const group = groupsMap.get("default") || [];
+        group.push(mapItem(item));
+        groupsMap.set("default", group);
+      }
+    });
+
+    return [...groupsMap.entries()].map(([label, options]) => {
+      return {
+        label,
+        options
+      };
+    });
+  }
+
+  return options;
+}
+
+export function useOptions<Data = string>({ options }: AllSelectProps<Data>) {
+  return useMemo(() => {
+    return mapOptions(options);
+  }, [options]);
+}
diff --git a/packages/react-formio/src/molecules/loader/Loader.stories.tsx b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
index beb9e6c..f585006 100644
--- a/packages/react-formio/src/molecules/loader/Loader.stories.tsx
+++ b/packages/react-formio/src/molecules/loader/Loader.stories.tsx
@@ -15,25 +15,17 @@ export default {
   component: Loader,
   argTypes: {
     isActive: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     color: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     icon: {
-      control: {
-        type: "select",
-        options: Object.keys(tailwind.templates.tailwind.ICONS)
-      }
+      control: "select",
+      options: Object.keys(tailwind.templates.tailwind.ICONS)
     },
     className: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     }
   },
   parameters: {},
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
index 7018f20..207425f 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.stories.tsx
@@ -1,13 +1,41 @@
+import "../forms/select/all";
+
 import { Meta, StoryObj } from "@storybook/react";
 import { useEffect, useState } from "react";
 
-import { Pagination } from "./Pagination";
+import { Pagination } from "./all";
 
 /**
- * Pagination component
+ * Pagination component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
+ * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
+ *
+ * or
+ *
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
+ * import "@tsed/react-formio/molecules/pagination/PaginationButton";
+ *
+ * or
+ *
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
+ *
+ * registerComponent("PaginationButton", MyPaginationButton);
+ * ```
+ *
+ * Pagination component support DI container and can be used with custom PaginationButton component.
+ *
+ * You can also override the Pagination component with your own implementation:
  *
  * ```tsx
- * import {Modal} from "@tsed/react-formio/molecules/pagination/Pagination";
+ * function MyPagination(props: PaginationProps) {
+ *
+ * }
+ *
+ * registerComponent("Pagination", MyPagination);
  * ```
  */
 export default {
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.tsx b/packages/react-formio/src/molecules/pagination/Pagination.tsx
index 7fb5787..1182e68 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.tsx
@@ -1,32 +1,9 @@
 import classnames from "classnames";
-import { PropsWithChildren } from "react";
 
-import { Select } from "../forms/select/Select";
+import { getComponent, registerComponent } from "../../registries/components";
+import type { Select as DefaultSelect } from "../forms/select/Select";
 import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table";
-
-function PaginationButton(
-  props: PropsWithChildren<
-    {
-      component?: any;
-      disabled?: boolean;
-      className?: string;
-      active?: boolean;
-    } & Record<string, any>
-  >
-) {
-  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
-
-  return (
-    <Component
-      {...otherProps}
-      data-testid='pagination-button'
-      disabled={disabled}
-      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
-    >
-      {children}
-    </Component>
-  );
-}
+import type { PaginationButton as DefaultPaginationButton } from "./PaginationButton";
 
 export interface PaginationProps {
   className?: string;
@@ -42,6 +19,7 @@ export interface PaginationProps {
   pageSize: number;
   setPageSize: any;
   totalLength?: number;
+  layout?: "html5" | "react" | "choicesjs";
   i18n?: (f: string) => string;
 }
 
@@ -69,6 +47,8 @@ export function Pagination(props: PaginationProps) {
     totalPages: pageCount
   });
   const choices: any[] = pageSizes.map((value) => ({ value, label: value }));
+  const Select = getComponent<typeof DefaultSelect>("Select");
+  const PaginationButton = getComponent<typeof DefaultPaginationButton>("PaginationButton");
 
   return (
     <nav aria-label='Page navigation' className={classnames("pagination-group -mb-3", className)}>
@@ -106,11 +86,13 @@ export function Pagination(props: PaginationProps) {
       </ul>
 
       <li className='mb-3 mr-3 flex items-center'>
-        <Select
+        <Select<number>
           name={"page"}
           value={pageSize}
-          choices={choices}
-          onChange={(name: string, value: number) => {
+          options={choices}
+          multiple={false}
+          layout={props.layout}
+          onChange={(_: string, value: number) => {
             setPageSize(+value);
           }}
         />
@@ -132,3 +114,5 @@ export function Pagination(props: PaginationProps) {
     </nav>
   );
 }
+
+registerComponent("Pagination", Pagination);
diff --git a/packages/react-formio/src/molecules/pagination/PaginationButton.tsx b/packages/react-formio/src/molecules/pagination/PaginationButton.tsx
new file mode 100644
index 0000000..d695c86
--- /dev/null
+++ b/packages/react-formio/src/molecules/pagination/PaginationButton.tsx
@@ -0,0 +1,30 @@
+import classnames from "classnames";
+import { PropsWithChildren } from "react";
+
+import { registerComponent } from "../../registries/components";
+
+export function PaginationButton(
+  props: PropsWithChildren<
+    {
+      component?: any;
+      disabled?: boolean;
+      className?: string;
+      active?: boolean;
+    } & Record<string, any>
+  >
+) {
+  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
+
+  return (
+    <Component
+      {...otherProps}
+      data-testid='pagination-button'
+      disabled={disabled}
+      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
+    >
+      {children}
+    </Component>
+  );
+}
+
+registerComponent("PaginationButton", PaginationButton);
diff --git a/packages/react-formio/src/molecules/pagination/all.ts b/packages/react-formio/src/molecules/pagination/all.ts
new file mode 100644
index 0000000..581f1f0
--- /dev/null
+++ b/packages/react-formio/src/molecules/pagination/all.ts
@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export * from "./PaginationButton";
diff --git a/packages/react-formio/src/molecules/table/Table.stories.tsx b/packages/react-formio/src/molecules/table/Table.stories.tsx
index be5aafe..997504e 100644
--- a/packages/react-formio/src/molecules/table/Table.stories.tsx
+++ b/packages/react-formio/src/molecules/table/Table.stories.tsx
@@ -1,3 +1,6 @@
+import "../pagination/all";
+import "../forms/select/all";
+
 import { useState } from "react";
 
 import { mapPagination } from "../../utils/mapPagination";
@@ -5,7 +8,6 @@ import FormType from "../__fixtures__/form-schema.json";
 import formSubmissions from "../__fixtures__/form-submissions.json";
 import { Table } from "./Table";
 import { mapFormToColumns } from "./utils/mapFormToColumns";
-
 export default {
   title: "Table",
   component: Table,
diff --git a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx
index 61f0ff7..1004a4a 100644
--- a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx
+++ b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.tsx
@@ -21,7 +21,7 @@ export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
   /* eslint-disable jsx-a11y/no-autofocus */
   return (
     <InputText
-      size={"sm"}
+      size={"small"}
       id={id}
       name={id}
       key={id}
diff --git a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx
index bd5f94a..1e2bc24 100644
--- a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx
+++ b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.tsx
@@ -31,20 +31,20 @@ export function useSelectColumnFilter<D extends Record<string, unknown> = {}>(pr
   return {
     value: filterValue,
     onChange,
-    choices: [{ value: "", label: "All" }].concat(choices)
+    options: [{ value: "", label: "All" }].concat(choices)
   };
 }
 
 export function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
-  const { value, choices, onChange } = useSelectColumnFilter(props);
+  const { value, options, onChange } = useSelectColumnFilter(props);
 
   return (
     <Select
       key={`filter-${props.column.id}`}
       name={`filter-${props.column.id}`}
-      size={"sm"}
+      size={"small"}
       value={value}
-      choices={choices}
+      options={options}
       onChange={onChange}
     />
   );
diff --git a/packages/react-formio/src/organisms/form/Form.stories.tsx b/packages/react-formio/src/organisms/form/Form.stories.tsx
index c6230f3..4ba6cca 100644
--- a/packages/react-formio/src/organisms/form/Form.stories.tsx
+++ b/packages/react-formio/src/organisms/form/Form.stories.tsx
@@ -32,47 +32,33 @@ export default {
     form: {
       description:
         "Instead of loading a form from the `src` url, you can preload the form definition and pass it in with the `form` prop. You should also set `url` if you are using any advanced components like file upload or oauth.",
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     src: {
       description:
         "The src of the form definition. This is commonly from a form.io server. When using src, the form will automatically submit the data to that url as well.",
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     url: {
       description:
         "The url of the form definition. The form will not be loaded from this url and the submission will not be saved here either. This is used for file upload, oauth and other components or actions that need to know where the server is. Use this in connection with `form`",
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     submission: {
       description:
         "Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.",
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
       description:
         "An options object that can pass options to the formio.js Form that is rendered. You can set options such as `readOnly`, `noAlerts` or `hide`. There are [many options to be found in the formio.js library](https://github.com/formio/formio.js/wiki/Form-Renderer#options).",
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     className: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     style: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     // onFormReady: {
     //   description:
@@ -185,9 +171,7 @@ export default {
     otherEvents: {
       description:
         'A "catch-all" prop for subscribing to other events (for a complete list, see [our documentation](https://help.form.io/developers/form-development/form-renderer#form-events)).',
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   tags: ["autodocs"]
diff --git a/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx b/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
index 094a834..1253625 100644
--- a/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
+++ b/packages/react-formio/src/organisms/form/action/FormAction.stories.tsx
@@ -13,19 +13,13 @@ export default {
     onSubmit: { action: "onSubmit" },
 
     type: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {
diff --git a/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx b/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
index 4dce634..db4d0bb 100644
--- a/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormBuilder.stories.tsx
@@ -22,22 +22,16 @@ export default {
   component: FormBuilder,
   argTypes: {
     display: {
-      control: {
-        type: "select",
-        options: ["form", "wizard", "pdf"]
-      }
+      control: "select",
+      options: ["form", "wizard", "pdf"]
     },
     components: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
       description:
         "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     onBuilderReady: {
       description:
diff --git a/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
index 22a6be8..e6c158e 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
@@ -14,31 +14,21 @@ export default {
   component: FormEdit,
   argTypes: {
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     typeChoices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     displayChoices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
       description:
         "The form builder options. See [here](https://help.form.io/developers/form-development/form-builder#form-builder-options) for more details.",
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     enableTags: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     onSubmit: { action: "onSubmit" },
     onCopy: { action: "onCopy" },
diff --git a/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx b/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
index 35eb186..dac3225 100644
--- a/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
+++ b/packages/react-formio/src/organisms/form/settings/FormSettings.stories.tsx
@@ -12,14 +12,10 @@ export default {
   argTypes: {
     onSubmit: { action: "onSubmit" },
     actionInfo: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     options: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {
diff --git a/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
index e260586..2763853 100644
--- a/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
+++ b/packages/react-formio/src/organisms/modal/RemoveModal.stories.tsx
@@ -16,9 +16,7 @@ export default {
   argTypes: {
     onSubmit: {
       title: {
-        control: {
-          type: "text"
-        }
+        control: "text"
       },
       control: {
         action: "onSubmit"
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
index 3a458f3..51186ca 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
@@ -15,29 +15,19 @@ export default {
   component: ActionsTable,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     onAddAction: {
       action: "onAddAction"
diff --git a/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
index 56af3a1..c686fb4 100644
--- a/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
@@ -13,45 +13,29 @@ export default {
   component: FormsTable,
   argTypes: {
     icon: {
-      control: {
-        type: "select",
-        options: Object.keys(tailwind.templates.tailwind.ICONS)
-      }
+      control: "select",
+      options: Object.keys(tailwind.templates.tailwind.ICONS)
     },
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     isEmpty: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     tags: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {}
diff --git a/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
index 012a5c7..66bb9de 100644
--- a/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
@@ -15,39 +15,25 @@ export default {
   component: SubmissionsTable,
   argTypes: {
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     isEmpty: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     }
   },
   parameters: {}
diff --git a/packages/react-formio/src/registries/components.ts b/packages/react-formio/src/registries/components.ts
new file mode 100644
index 0000000..e6d8495
--- /dev/null
+++ b/packages/react-formio/src/registries/components.ts
@@ -0,0 +1,17 @@
+export const components = new Map<string, unknown>();
+
+export function registerComponent(type: string, component: unknown) {
+  components.set(type, component);
+}
+
+export function getComponent<Cmp>(type: string | string[]): Cmp {
+  if (Array.isArray(type)) {
+    for (const t of type) {
+      if (components.has(t)) {
+        return components.get(t) as unknown as Cmp;
+      }
+    }
+  }
+
+  return components.get(type as string) as unknown as Cmp;
+}
diff --git a/packages/tailwind-formio/styles/choices.css b/packages/tailwind-formio/styles/choices.css
index 5b40ac4..cc5f372 100644
--- a/packages/tailwind-formio/styles/choices.css
+++ b/packages/tailwind-formio/styles/choices.css
@@ -26,6 +26,15 @@
     line-height: inherit;
   }
 
+  &__small {
+    .choices__inner {
+      @apply px-2;
+      padding-top: 2px;
+      min-height: 0;
+      font-size: 14px;
+    }
+  }
+
   &__input {
     @apply bg-white;
   }
@@ -82,6 +91,10 @@
       @apply pb-2;
     }
 
+    &.choices__small .choices__inner {
+      padding-bottom: 1px;
+    }
+
     .choices__input {
       @apply block w-full p-2.5 border-b-1 border-solid border-gray-300 bg-white m-0;
     }
@@ -153,6 +166,7 @@
       }
     }
   }
+
   &[data-type=select-multiple] {
     &:after {
       @apply h-0 w-0 border-solid absolute border-0 h-full top-0 m-0 right-1.5;
@@ -168,14 +182,16 @@
       @apply pb-0;
     }
   }
+  .choices__list--multiple .choices__item {
+    @apply rounded-md bg-primary border-0 text-xs py-1 px-2;
+    font-weight: 600;
+  }
 }
 
-.choices__list--multiple .choices__item {
-  @apply rounded-sm;
-}
 
-.is-open .choices__inner , .is-flipped.is-open .choices__inner {
-  @apply rounded-md rounded-b-none;
+
+.is-open .choices__inner, .is-flipped.is-open .choices__inner {
+  @apply rounded-md;
 }
 
 .choices__list {
@@ -188,7 +204,8 @@
     .choices__item {
       @apply w-full;
     }
-    .choices__item.choices__item--selectable{
+
+    .choices__item.choices__item--selectable {
       margin-bottom: -0.375rem;
     }
   }
@@ -207,6 +224,7 @@
 
       &.is-highlighted {
         @apply bg-secondary-500 border-secondary-600;
+
         .choices__button {
           @apply border-secondary-600;
         }
@@ -214,8 +232,8 @@
     }
   }
 
-  &--dropdown {
-    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded overflow-hidden break-all top-full;
+  &--dropdown[aria-expanded=true] {
+    @apply invisible absolute z-5 w-full bg-white border-1 border-solid border-gray-300 rounded-md overflow-hidden break-all top-full;
     will-change: visibility;
 
     &.is-active {
@@ -280,6 +298,16 @@
 }
 
 @media (min-width: 640px) {
+  .choices__small {
+    .choices__list--dropdown .choices__item--selectable {
+      padding: 5px 10px;
+
+      &:after {
+        display: none;
+      }
+    }
+  }
+
   .choices__list--dropdown {
     .choices__item--selectable {
       padding-right: 100px;
diff --git a/packages/tailwind-formio/styles/form.css b/packages/tailwind-formio/styles/form.css
index 6c2742c..359ed38 100644
--- a/packages/tailwind-formio/styles/form.css
+++ b/packages/tailwind-formio/styles/form.css
@@ -26,7 +26,7 @@
 .form-control {
   @apply appearance-none bg-white leading-normal px-3 py-2 block w-full rounded-md border-1 border-gray-300 shadow-sm;
 
-  &.form-control-sm {
+  &.form-control-small {
     @apply px-2 py-1 text-sm;
   }
 }
diff --git a/packages/tailwind-formio/styles/index.css b/packages/tailwind-formio/styles/index.css
index 8189a18..869571f 100644
--- a/packages/tailwind-formio/styles/index.css
+++ b/packages/tailwind-formio/styles/index.css
@@ -5,6 +5,7 @@
 @import "card.css";
 @import "form.css";
 @import "choices.css";
+@import "react-select.css";
 @import "input-group.css";
 @import "checkbox.css";
 @import "tooltip.css";
diff --git a/packages/tailwind-formio/styles/react-select.css b/packages/tailwind-formio/styles/react-select.css
new file mode 100644
index 0000000..3bd597c
--- /dev/null
+++ b/packages/tailwind-formio/styles/react-select.css
@@ -0,0 +1,41 @@
+
+.react-select-container {
+  display: block;
+  flex: 1;
+
+  .react-select__control {
+    @apply appearance-none bg-white leading-normal w-full rounded-md border-1 border-gray-300 shadow-sm;
+
+    &--is-focused {
+      @apply outline-none border-primary-300 ring ring-primary-50 ring-opacity-50;
+      outline-offset: theme('outline.none[1]');
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      border-color: theme('colors.blue.600');
+    }
+  }
+
+  .react-select__multi-value {
+    @apply bg-primary-600 text-white rounded-md;
+
+    &__label {
+      @apply text-white text-xs py-1 px-2;
+      font-weight: 600;
+    }
+
+    &__remove {
+      @apply  opacity-80;
+      &:hover {
+        @apply bg-transparent text-white opacity-100;
+      }
+    }
+  }
+
+  .react-select__value-container.react-select__value-container--is-multi {
+    @apply px-2 py-1;
+  }
+}
+
+.input-group-prepend + .react-select-container .react-select__control {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/yarn.lock b/yarn.lock
index 1656274..f1e84fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -292,7 +292,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.9":
+"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/helper-module-imports@npm:7.25.9"
   dependencies:
@@ -1670,7 +1670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.20.6":
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
   version: 7.26.0
   resolution: "@babel/runtime@npm:7.26.0"
   dependencies:
@@ -1993,6 +1993,123 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.13.5":
+  version: 11.13.5
+  resolution: "@emotion/babel-plugin@npm:11.13.5"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.16.7"
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    babel-plugin-macros: "npm:^3.1.0"
+    convert-source-map: "npm:^1.5.0"
+    escape-string-regexp: "npm:^4.0.0"
+    find-root: "npm:^1.1.0"
+    source-map: "npm:^0.5.7"
+    stylis: "npm:4.2.0"
+  checksum: 10c0/8ccbfec7defd0e513cb8a1568fa179eac1e20c35fda18aed767f6c59ea7314363ebf2de3e9d2df66c8ad78928dc3dceeded84e6fa8059087cae5c280090aeeeb
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.14.0, @emotion/cache@npm:^11.4.0":
+  version: 11.14.0
+  resolution: "@emotion/cache@npm:11.14.0"
+  dependencies:
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/sheet": "npm:^1.4.0"
+    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    stylis: "npm:4.2.0"
+  checksum: 10c0/3fa3e7a431ab6f8a47c67132a00ac8358f428c1b6c8421d4b20de9df7c18e95eec04a5a6ff5a68908f98d3280044f247b4965ac63df8302d2c94dba718769724
+  languageName: node
+  linkType: hard
+
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 10c0/0dc254561a3cc0a06a10bbce7f6a997883fd240c8c1928b93713f803a2e9153a257a488537012efe89dbe1246f2abfe2add62cdb3471a13d67137fcb808e81c2
+  languageName: node
+  linkType: hard
+
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 10c0/13f474a9201c7f88b543e6ea42f55c04fb2fdc05e6c5a3108aced2f7e7aa7eda7794c56bba02985a46d8aaa914fcdde238727a98341a96e2aec750d372dadd15
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:^11.8.1":
+  version: 11.14.0
+  resolution: "@emotion/react@npm:11.14.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@emotion/babel-plugin": "npm:^11.13.5"
+    "@emotion/cache": "npm:^11.14.0"
+    "@emotion/serialize": "npm:^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.2.0"
+    "@emotion/utils": "npm:^1.4.2"
+    "@emotion/weak-memoize": "npm:^0.4.0"
+    hoist-non-react-statics: "npm:^3.3.1"
+  peerDependencies:
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/d0864f571a9f99ec643420ef31fde09e2006d3943a6aba079980e4d5f6e9f9fecbcc54b8f617fe003c00092ff9d5241179149ffff2810cb05cf72b4620cfc031
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@emotion/serialize@npm:1.3.3"
+  dependencies:
+    "@emotion/hash": "npm:^0.9.2"
+    "@emotion/memoize": "npm:^0.9.0"
+    "@emotion/unitless": "npm:^0.10.0"
+    "@emotion/utils": "npm:^1.4.2"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/b28cb7de59de382021de2b26c0c94ebbfb16967a1b969a56fdb6408465a8993df243bfbd66430badaa6800e1834724e84895f5a6a9d97d0d224de3d77852acb4
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: 10c0/3ca72d1650a07d2fbb7e382761b130b4a887dcd04e6574b2d51ce578791240150d7072a9bcb4161933abbcd1e38b243a6fb4464a7fe991d700c17aa66bb5acc7
+  languageName: node
+  linkType: hard
+
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: 10c0/150943192727b7650eb9a6851a98034ddb58a8b6958b37546080f794696141c3760966ac695ab9af97efe10178690987aee4791f9f0ad1ff76783cdca83c1d49
+  languageName: node
+  linkType: hard
+
+"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 10c0/074dbc92b96bdc09209871070076e3b0351b6b47efefa849a7d9c37ab142130767609ca1831da0055988974e3b895c1de7606e4c421fecaa27c3e56a2afd3b08
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@emotion/utils@npm:1.4.2"
+  checksum: 10c0/7d0010bf60a2a8c1a033b6431469de4c80e47aeb8fd856a17c1d1f76bbc3a03161a34aeaa78803566e29681ca551e7bf9994b68e9c5f5c796159923e44f78d9a
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: 10c0/64376af11f1266042d03b3305c30b7502e6084868e33327e944b539091a472f089db307af69240f7188f8bc6b319276fd7b141a36613f1160d73d12a60f6ca1a
+  languageName: node
+  linkType: hard
+
 "@esbuild/aix-ppc64@npm:0.21.5":
   version: 0.21.5
   resolution: "@esbuild/aix-ppc64@npm:0.21.5"
@@ -2418,6 +2535,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.6.0":
+  version: 1.6.9
+  resolution: "@floating-ui/core@npm:1.6.9"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/77debdfc26bc36c6f5ae1f26ab3c15468215738b3f5682af4e1915602fa21ba33ad210273f31c9d2da1c531409929e1afb1138b1608c6b54a0f5853ee84c340d
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.1":
+  version: 1.6.13
+  resolution: "@floating-ui/dom@npm:1.6.13"
+  dependencies:
+    "@floating-ui/core": "npm:^1.6.0"
+    "@floating-ui/utils": "npm:^0.2.9"
+  checksum: 10c0/272242d2eb6238ffcee0cb1f3c66e0eafae804d5d7b449db5ecf904bc37d31ad96cf575a9e650b93c1190f64f49a684b1559d10e05ed3ec210628b19116991a9
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@floating-ui/utils@npm:0.2.9"
+  checksum: 10c0/48bbed10f91cb7863a796cc0d0e917c78d11aeb89f98d03fc38d79e7eb792224a79f538ed8a2d5d5584511d4ca6354ef35f1712659fd569868e342df4398ad6f
+  languageName: node
+  linkType: hard
+
 "@formio/bootstrap3@npm:2.12.4-rc.1":
   version: 2.12.4-rc.1
   resolution: "@formio/bootstrap3@npm:2.12.4-rc.1"
@@ -5480,6 +5623,7 @@ __metadata:
     react-dnd: ">=16.0.1"
     react-dnd-html5-backend: ">=16.0.1"
     react-dom: ">=16.14.0"
+    react-select: ">=5.9.0"
     react-table: ">=7.6.3"
     tooltip.js: ">=1.3.3"
   languageName: unknown
@@ -5575,6 +5719,7 @@ __metadata:
     react-redux: "npm:7.2.6"
     react-router: "npm:5.2.1"
     react-router-dom: "npm:5.2.1"
+    react-select: "npm:^5.9.0"
     react-table: "npm:^7.8.0"
     redux-thunk: "npm:^2.4.1"
     rimraf: "npm:^3.0.2"
@@ -6033,6 +6178,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.0":
+  version: 4.4.12
+  resolution: "@types/react-transition-group@npm:4.4.12"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/0441b8b47c69312c89ec0760ba477ba1a0808a10ceef8dc1c64b1013ed78517332c30f18681b0ec0b53542731f1ed015169fed1d127cc91222638ed955478ec7
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:^18.2.8":
   version: 18.2.8
   resolution: "@types/react@npm:18.2.8"
@@ -7349,7 +7503,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^3.0.1":
+"babel-plugin-macros@npm:^3.0.1, babel-plugin-macros@npm:^3.1.0":
   version: 3.1.0
   resolution: "babel-plugin-macros@npm:3.1.0"
   dependencies:
@@ -8762,7 +8916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.9.0
   resolution: "convert-source-map@npm:1.9.0"
   checksum: 10c0/281da55454bf8126cbc6625385928c43479f2060984180c42f3a86c8b8c12720a24eac260624a7d1e090004028d2dee78602330578ceec1a08e27cb8bb0a8a5b
@@ -9596,6 +9750,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dom-helpers@npm:^5.0.1":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.8.7"
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c
+  languageName: node
+  linkType: hard
+
 "dom-mousemove-dispatcher@npm:^1.0.1":
   version: 1.0.1
   resolution: "dom-mousemove-dispatcher@npm:1.0.1"
@@ -11148,6 +11312,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: 10c0/1abc7f3bf2f8d78ff26d9e00ce9d0f7b32e5ff6d1da2857bcdf4746134c422282b091c672cde0572cac3840713487e0a7a636af9aa1b74cb11894b447a521efa
+  languageName: node
+  linkType: hard
+
 "find-up-simple@npm:^1.0.0":
   version: 1.0.0
   resolution: "find-up-simple@npm:1.0.0"
@@ -12310,7 +12481,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -16031,6 +16202,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "memoize-one@npm:6.0.0"
+  checksum: 10c0/45c88e064fd715166619af72e8cf8a7a17224d6edf61f7a8633d740ed8c8c0558a4373876c9b8ffc5518c2b65a960266adf403cc215cb1e90f7e262b58991f54
+  languageName: node
+  linkType: hard
+
 "memoizerific@npm:^1.11.3":
   version: 1.11.3
   resolution: "memoizerific@npm:1.11.3"
@@ -19238,7 +19416,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -19539,6 +19717,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-select@npm:^5.9.0":
+  version: 5.9.0
+  resolution: "react-select@npm:5.9.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.0"
+    "@emotion/cache": "npm:^11.4.0"
+    "@emotion/react": "npm:^11.8.1"
+    "@floating-ui/dom": "npm:^1.0.1"
+    "@types/react-transition-group": "npm:^4.4.0"
+    memoize-one: "npm:^6.0.0"
+    prop-types: "npm:^15.6.0"
+    react-transition-group: "npm:^4.3.0"
+    use-isomorphic-layout-effect: "npm:^1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/f21f18ca41a8c866ab69f9c65253e86dcc5323477bbfc729bf6aa9d897e04e27cfffd13c07f10b70dc554e15ad1d238c1283e05e457bf4ead8526a1dd7fbc8b0
+  languageName: node
+  linkType: hard
+
 "react-table@npm:^7.8.0":
   version: 7.8.0
   resolution: "react-table@npm:7.8.0"
@@ -19548,6 +19746,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-transition-group@npm:^4.3.0":
+  version: 4.4.5
+  resolution: "react-transition-group@npm:4.4.5"
+  dependencies:
+    "@babel/runtime": "npm:^7.5.5"
+    dom-helpers: "npm:^5.0.1"
+    loose-envify: "npm:^1.4.0"
+    prop-types: "npm:^15.6.2"
+  peerDependencies:
+    react: ">=16.6.0"
+    react-dom: ">=16.6.0"
+  checksum: 10c0/2ba754ba748faefa15f87c96dfa700d5525054a0141de8c75763aae6734af0740e77e11261a1e8f4ffc08fd9ab78510122e05c21c2d79066c38bb6861a886c82
+  languageName: node
+  linkType: hard
+
 "react@npm:18.3.1, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -21072,6 +21285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 10c0/904e767bb9c494929be013017380cbba013637da1b28e5943b566031e29df04fba57edf3f093e0914be094648b577372bd8ad247fa98cfba9c600794cd16b599
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -21653,6 +21873,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 10c0/a7128ad5a8ed72652c6eba46bed4f416521bc9745a460ef5741edc725252cebf36ee45e33a8615a7057403c93df0866ab9ee955960792db210bb80abd5ac6543
+  languageName: node
+  linkType: hard
+
 "sucrase@npm:^3.35.0":
   version: 3.35.0
   resolution: "sucrase@npm:3.35.0"
@@ -22938,6 +23165,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-isomorphic-layout-effect@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "use-isomorphic-layout-effect@npm:1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/2e4bdee68d65893b37e716ebdcc111550775189c80e662eda87d6f5b54dc431d3383a18914ea01a893ee5478902a878012713eaebcacbb6611ab88c463accb83
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"