From a296f7cb616656dad004f7e6bdc41f0d9775d262 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Thu, 16 Jan 2025 10:13:32 +0100
Subject: [PATCH 1/4] feat(react-formio): add react-select

---
 .storybook/preview.ts                         |  11 +-
 package.json                                  |   1 +
 .../src/views/forms.stories.tsx               |   4 +-
 .../src/views/submissions.stories.tsx         |   4 +-
 packages/react-formio/package.json            |   1 +
 .../src/molecules/alert/Alert.stories.tsx     |  16 +-
 .../form-control/FormControl.stories.tsx      |  12 +-
 .../forms/form-control/FormControl.tsx        |   4 +-
 .../forms/input-tags/InputTags.stories.tsx    |  30 +-
 .../molecules/forms/input-tags/InputTags.tsx  |   3 +
 .../forms/input-text/InputText.stories.tsx    |  36 +-
 .../molecules/forms/input-text/InputText.tsx  |   9 +-
 .../forms/select/Select.interfaces.ts         |  47 +++
 .../molecules/forms/select/Select.spec.tsx    |  84 ----
 .../molecules/forms/select/Select.stories.tsx | 167 --------
 .../src/molecules/forms/select/Select.tsx     |  96 +----
 .../src/molecules/forms/select/all.ts         |   6 +
 .../components/ChoicesSelect.stories.tsx      | 375 ++++++++++++++++++
 .../forms/select/components/ChoicesSelect.tsx | 168 ++++++++
 .../select/components/HtmlSelect.stories.tsx  | 305 ++++++++++++++
 .../forms/select/components/HtmlSelect.tsx    |  53 +++
 .../select/components/ReactSelect.stories.tsx | 285 +++++++++++++
 .../forms/select/components/ReactSelect.tsx   |  60 +++
 .../select/components/choices.template.tsx    |  38 ++
 .../forms/select/hooks/useOptions.spec.ts     | 154 +++++++
 .../forms/select/hooks/useOptions.ts          |  49 +++
 .../src/molecules/loader/Loader.stories.tsx   |  18 +-
 .../pagination/Pagination.stories.tsx         |  34 +-
 .../src/molecules/pagination/Pagination.tsx   |  42 +-
 .../molecules/pagination/PaginationButton.tsx |  30 ++
 .../src/molecules/pagination/all.ts           |   2 +
 .../src/molecules/table/Table.stories.tsx     |   4 +-
 .../table/filters/DefaultColumnFilter.tsx     |   2 +-
 .../table/filters/SelectColumnFilter.tsx      |   8 +-
 .../src/organisms/form/Form.stories.tsx       |  32 +-
 .../form/action/FormAction.stories.tsx        |  12 +-
 .../form/builder/FormBuilder.stories.tsx      |  14 +-
 .../form/builder/FormEdit.stories.tsx         |  20 +-
 .../form/settings/FormSettings.stories.tsx    |   8 +-
 .../organisms/modal/RemoveModal.stories.tsx   |   4 +-
 .../table/actions/ActionsTable.stories.tsx    |  20 +-
 .../table/forms/FormsTable.stories.tsx        |  34 +-
 .../submissions/SubmissionsTable.stories.tsx  |  28 +-
 .../react-formio/src/registries/components.ts |  17 +
 packages/tailwind-formio/styles/choices.css   |  44 +-
 packages/tailwind-formio/styles/form.css      |   2 +-
 packages/tailwind-formio/styles/index.css     |   1 +
 .../tailwind-formio/styles/react-select.css   |  41 ++
 yarn.lock                                     | 251 +++++++++++-
 49 files changed, 2081 insertions(+), 605 deletions(-)
 create mode 100644 packages/react-formio/src/molecules/forms/select/Select.interfaces.ts
 delete mode 100644 packages/react-formio/src/molecules/forms/select/Select.spec.tsx
 delete mode 100644 packages/react-formio/src/molecules/forms/select/Select.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/all.ts
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/HtmlSelect.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/ReactSelect.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/ReactSelect.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/components/choices.template.tsx
 create mode 100644 packages/react-formio/src/molecules/forms/select/hooks/useOptions.spec.ts
 create mode 100644 packages/react-formio/src/molecules/forms/select/hooks/useOptions.ts
 create mode 100644 packages/react-formio/src/molecules/pagination/PaginationButton.tsx
 create mode 100644 packages/react-formio/src/molecules/pagination/all.ts
 create mode 100644 packages/react-formio/src/registries/components.ts
 create mode 100644 packages/tailwind-formio/styles/react-select.css

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 9652e59a..dbcb3327 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 b9f44f79..9cfea7c9 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 1075c231..1740500e 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 ff064dc3..9758aeb3 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 679da2fc..65f530fe 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 03ca06ef..515e0d6b 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 b457bb34..f922e7b5 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 1eba2da9..003ae357 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 68955998..5b61a763 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 bcd2f4eb..19bbdb70 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 31e4a431..c5116c14 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 ea7b6fbf..8a40218e 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 00000000..3d6e439a
--- /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 71c55392..00000000
--- 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 9ee076bf..00000000
--- 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 ebca4fbc..33837913 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 00000000..55cceae9
--- /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 00000000..604fa7d3
--- /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 00000000..a2a4d302
--- /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 00000000..d0829e11
--- /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 00000000..9e889dc2
--- /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 00000000..c3039e8d
--- /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 00000000..15216810
--- /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 00000000..531e3617
--- /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 00000000..12828798
--- /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 00000000..4b6ebcab
--- /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 beb9e6c1..f5850067 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 7018f20e..207425fe 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 7fb57875..1182e683 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 00000000..d695c86f
--- /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 00000000..581f1f01
--- /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 be5aafe3..997504e4 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 61f0ff73..1004a4a3 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 bd5f94a8..1e2bc24e 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 c6230f3e..4ba6cca2 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 094a8343..1253625f 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 4dce6348..db4d0bbd 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 22a6be89..e6c158e1 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 35eb186b..dac32253 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 e2605860..27638535 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 3a458f30..51186ca4 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 56af3a1d..c686fb43 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 012a5c79..66bb9de7 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 00000000..e6d84958
--- /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 5b40ac48..cc5f3724 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 6c2742cf..359ed38b 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 8189a189..869571f3 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 00000000..3bd597c4
--- /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 1656274d..f1e84fab 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"

From 00bc3fd0981bcf5df64af7a12550665a5b6fcc48 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 17 Jan 2025 13:36:19 +0100
Subject: [PATCH 2/4] feat(react-formio): add Icon atom

---
 .../src/atoms/icon/Icon.stories.tsx           | 124 ++++++++++++++++++
 packages/react-formio/src/atoms/icon/Icon.tsx |  16 +++
 2 files changed, 140 insertions(+)
 create mode 100644 packages/react-formio/src/atoms/icon/Icon.stories.tsx
 create mode 100644 packages/react-formio/src/atoms/icon/Icon.tsx

diff --git a/packages/react-formio/src/atoms/icon/Icon.stories.tsx b/packages/react-formio/src/atoms/icon/Icon.stories.tsx
new file mode 100644
index 00000000..4574bf73
--- /dev/null
+++ b/packages/react-formio/src/atoms/icon/Icon.stories.tsx
@@ -0,0 +1,124 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Template from "@tsed/tailwind-formio";
+
+import { Icon } from "./Icon";
+
+/**
+ * Icon component to display icons based on [BxIcons](https://boxicons.com/).
+ *
+ * ## Usage
+ *
+ * ```ts
+ * import {Icon} from "@tsed/react-formio/atoms/icon/Icon";
+ * ```
+ *
+ * ## Override Icon
+ *
+ * This component is registered with the name `Icon` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Icon", MyIconComponent);
+ * ```
+ */
+export default {
+  title: "Icon",
+  component: Icon,
+  argTypes: {
+    name: {
+      control: "text"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Icon>;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Usage: Story = {
+  args: {
+    name: "save"
+  }
+};
+
+export const Size: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm", "text-large", "text-xl", "text-3xl", "text-8xl"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Colors: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm text-red-600", "text-large text-primary", "text-xl text-secondary", "text-3xl text-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Rounded: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {["text-sm bg-red-600", "text-large bg-primary", "text-xl bg-secondary", "text-3xl bg-green-600"].map((className) => (
+          <div key={className} className={"flex gap-3 items-end"}>
+            <Icon name='save' className={className + " rounded-full text-white p-3"} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+/**
+ * Formio needs theses icons to be displayed in the form builder and other places.
+ */
+export const PresetsForFormio: Story = {
+  args: {
+    name: "save"
+  },
+  render() {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {Object.entries(Template.templates.tailwind.ICONS).map(([icon]) => (
+          <div key={icon} className={"flex gap-3 flex-wrap"}>
+            <div
+              className={"flex flex-col justify-center items-center space-y-3 border-1 border-gray-300 rounded-md"}
+              style={{
+                width: "100px",
+                height: "100px"
+              }}
+            >
+              <div>
+                <Icon name={icon} />
+              </div>
+              <span className='text-sm'>{icon}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
diff --git a/packages/react-formio/src/atoms/icon/Icon.tsx b/packages/react-formio/src/atoms/icon/Icon.tsx
new file mode 100644
index 00000000..b319da6e
--- /dev/null
+++ b/packages/react-formio/src/atoms/icon/Icon.tsx
@@ -0,0 +1,16 @@
+import cx from "classnames";
+import type { HTMLAttributes } from "react";
+
+import { registerComponent } from "../../registries/components";
+import { iconClass } from "../../utils/iconClass";
+
+export interface IconProps extends HTMLAttributes<HTMLElement> {
+  iconset?: string;
+  name: string;
+}
+
+export function Icon({ iconset, name, className, ...props }: IconProps) {
+  return <i {...props} className={cx(iconClass(iconset, name), className)} />;
+}
+
+registerComponent("Icon", Icon);

From 6551167d0308c93fac8e7de880a2e2f4ee18ad44 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 17 Jan 2025 13:37:34 +0100
Subject: [PATCH 3/4] feat(react-formio): add button molecule

---
 .../src/molecules/button/Button.stories.tsx   | 106 ++++++++++++++++++
 .../src/molecules/button/Button.tsx           |  54 +++++++++
 2 files changed, 160 insertions(+)
 create mode 100644 packages/react-formio/src/molecules/button/Button.stories.tsx
 create mode 100644 packages/react-formio/src/molecules/button/Button.tsx

diff --git a/packages/react-formio/src/molecules/button/Button.stories.tsx b/packages/react-formio/src/molecules/button/Button.stories.tsx
new file mode 100644
index 00000000..28164fac
--- /dev/null
+++ b/packages/react-formio/src/molecules/button/Button.stories.tsx
@@ -0,0 +1,106 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Icon } from "../../atoms/icon/Icon";
+import { Button, BUTTON_VARIANTS } from "./Button";
+
+/**
+ * Button component with a label and an onClick handler.
+ *
+ * ```ts
+ * import {Button} from "@tsed/react-formio/molecules/button/Button";
+ * ```
+ *
+ * ## Override Button
+ *
+ * This component is registered with the name `Button` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("Button", MyCustomButtonComponent);
+ * ```
+ */
+export default {
+  title: "Button",
+  component: Button,
+  argTypes: {
+    onClick: { action: "clicked" },
+    variant: {
+      control: "select",
+      options: BUTTON_VARIANTS
+    },
+    disabled: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    children: "Text",
+    variant: "primary"
+  }
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+export const Usage: Story = {
+  args: {
+    children: "Text",
+    variant: "primary"
+  }
+};
+
+export const Variant: Story = {
+  args: {
+    children: "Text"
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Text",
+    disabled: true
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: "Text"
+  },
+  render(args) {
+    return (
+      <div className='flex flex-wrap gap-3'>
+        {BUTTON_VARIANTS.map((variant) => (
+          <div key={variant}>
+            <Button {...args} variant={variant as any}>
+              <Icon name='save' />
+              {variant}
+            </Button>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};
diff --git a/packages/react-formio/src/molecules/button/Button.tsx b/packages/react-formio/src/molecules/button/Button.tsx
new file mode 100644
index 00000000..dae2563e
--- /dev/null
+++ b/packages/react-formio/src/molecules/button/Button.tsx
@@ -0,0 +1,54 @@
+import cx from "classnames";
+import { type ButtonHTMLAttributes, forwardRef, type LegacyRef, type PropsWithChildren } from "react";
+
+import { registerComponent } from "../../registries/components";
+
+export const BUTTON_VARIANTS = [
+  "primary",
+  "secondary",
+  "success",
+  "danger",
+  "warning",
+  "info",
+  "light",
+  "dark",
+  "link",
+  "outline-primary",
+  "outline-secondary",
+  "outline-success",
+  "outline-danger",
+  "outline-warning",
+  "outline-info",
+  "outline-light",
+  "outline-dark",
+  "outline-link"
+];
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS] | string;
+}
+
+export const Button = forwardRef(
+  ({ variant, className, children, ...props }: PropsWithChildren<ButtonProps>, ref: LegacyRef<HTMLButtonElement>) => {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        className={cx(
+          "btn flex gap-1",
+          {
+            disabled: props.disabled
+          },
+          `btn-${variant}`,
+          className
+        )}
+        disabled={props.disabled}
+        onClick={(evt) => !props.disabled && props.onClick?.(evt)}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+registerComponent("Button", Button);

From 6600e62d7b682529167b84fc446be334808eb937 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Fri, 17 Jan 2025 13:38:13 +0100
Subject: [PATCH 4/4] feat(react-formio): register FormBuilder, FormEdit, etc
 to the container components

---
 .storybook/main.ts                            |   4 +
 package.json                                  |   6 +-
 packages/react-formio-container/package.json  |   3 +-
 .../src/stores/auth/auth.reducers.ts          |   4 +-
 .../components/ChoicesSelect.stories.tsx      |  46 +-----
 .../forms/select/components/HtmlSelect.tsx    |   2 +-
 .../molecules/pagination/Pagination.spec.tsx  |   2 +-
 .../src/molecules/pagination/all.ts           |   1 +
 .../filters/DefaultColumnFilter.spec.tsx      |   2 +
 .../table/filters/SelectColumnFilter.spec.tsx |   2 +
 .../organisms/form/builder/FormBuilder.tsx    |   3 +
 .../form/builder/FormEdit.stories.tsx         |  34 ++++-
 .../src/organisms/form/builder/FormEdit.tsx   |  12 +-
 .../organisms/form/builder/FormEditCtas.tsx   |  43 +++---
 .../organisms/form/builder/FormParameters.tsx |  22 ++-
 .../src/organisms/form/builder/all.ts         |  13 ++
 .../table/actions/ActionsTable.spec.tsx       |   2 +
 .../table/actions/ActionsTable.stories.tsx    |   2 +
 .../organisms/table/actions/ActionsTable.tsx  |   2 +-
 .../table/forms/FormsTable.stories.tsx        |   5 +
 .../submissions/SubmissionsTable.stories.tsx  |   5 +
 packages/redux-utils/package.json             |   3 +-
 packages/tailwind-formio/package.json         |   4 +-
 stories/Getting-started.mdx                   | 140 +++++++++---------
 stories/home/StoryBanner.jsx                  |  53 +++++++
 tools/typescript/package.json                 |   5 +-
 tools/vitest/package.json                     |   4 +-
 27 files changed, 263 insertions(+), 161 deletions(-)
 create mode 100644 packages/react-formio/src/organisms/form/builder/all.ts
 create mode 100644 stories/home/StoryBanner.jsx

diff --git a/.storybook/main.ts b/.storybook/main.ts
index 28f0f002..d59901ba 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -10,6 +10,10 @@ const config: StorybookConfig = {
       titlePrefix: "Styling",
       directory: "../packages/tailwind-formio"
     },
+    {
+      titlePrefix: "Atoms",
+      directory: "../packages/react-formio/src/atoms"
+    },
     {
       titlePrefix: "Molecules",
       directory: "../packages/react-formio/src/molecules"
diff --git a/package.json b/package.json
index 9cfea7c9..3ed5bc29 100644
--- a/package.json
+++ b/package.json
@@ -7,12 +7,12 @@
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TypedProject/tsed-formio.git"
+    "url": "https://github.com/tsedio/tsed-formio.git"
   },
   "bugs": {
-    "url": "https://github.com/TypedProject/tsed-formio/issues"
+    "url": "https://github.com/tsedio/tsed-formio/issues"
   },
-  "homepage": "https://github.com/TypedProject/tsed-formio",
+  "homepage": "https://github.com/tsedio/tsed-formio",
   "scripts": {
     "configure": "monorepo ci configure",
     "test": "lerna run test --stream",
diff --git a/packages/react-formio-container/package.json b/packages/react-formio-container/package.json
index 57185c4f..41c14f30 100644
--- a/packages/react-formio-container/package.json
+++ b/packages/react-formio-container/package.json
@@ -97,5 +97,6 @@
     "tooltip.js": {
       "optional": false
     }
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/react-formio-stores/src/stores/auth/auth.reducers.ts b/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
index 40f33310..afe27b42 100644
--- a/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
+++ b/packages/react-formio-stores/src/stores/auth/auth.reducers.ts
@@ -1,4 +1,4 @@
-import type { FormType, RoleType, SubmissionType } from "@tsed/react-formio";
+import { FormType, JSON, RoleType, SubmissionType } from "@tsed/react-formio";
 import { createReducer } from "@tsed/redux-utils";
 
 import {
@@ -14,7 +14,7 @@ import {
 } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 
-export interface AuthState<User = any> {
+export interface AuthState<User extends { [key: string]: JSON } = any> {
   init: boolean;
   isActive: boolean;
   user: null | SubmissionType<User>;
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
index 604fa7d3..1448b2f8 100644
--- a/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
+++ b/packages/react-formio/src/molecules/forms/select/components/ChoicesSelect.stories.tsx
@@ -1,7 +1,7 @@
 import "./ChoicesSelect";
 
 import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import { fn } from "@storybook/test";
 
 import { iconClass } from "../../../../utils/iconClass";
 import { useValue } from "../../../__fixtures__/useValue.hook";
@@ -95,24 +95,6 @@ export const Usage: Story = {
     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");
   }
 };
 
@@ -125,19 +107,6 @@ export const WithPlaceholder: Story = {
     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");
   }
 };
 /**
@@ -150,19 +119,6 @@ export const WithPlaceholderAndRequired: Story = {
     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");
   }
 };
 /**
diff --git a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
index 9e889dc2..d16a4dd4 100644
--- a/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
+++ b/packages/react-formio/src/molecules/forms/select/components/HtmlSelect.tsx
@@ -17,8 +17,8 @@ export function HTMLSelect({ name, id = name, size, value, multiple, onChange, o
 
   return (
     <select
-      {...(props as any)}
       data-testid={`select_${name}`}
+      {...(props as any)}
       className={cx("form-control", size && `form-control-${size}`)}
       name={name}
       id={id}
diff --git a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
index f30eb08f..8607c137 100644
--- a/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
+++ b/packages/react-formio/src/molecules/pagination/Pagination.spec.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Pagination } from "./Pagination";
+import { Pagination } from "./all";
 
 const args: any = {
   pageSizes: [10, 25, 50, 100],
diff --git a/packages/react-formio/src/molecules/pagination/all.ts b/packages/react-formio/src/molecules/pagination/all.ts
index 581f1f01..d6542de0 100644
--- a/packages/react-formio/src/molecules/pagination/all.ts
+++ b/packages/react-formio/src/molecules/pagination/all.ts
@@ -1,2 +1,3 @@
+import "../forms/select/all.ts";
 export * from "./Pagination";
 export * from "./PaginationButton";
diff --git a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
index ecdf5c58..739ae73d 100644
--- a/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/DefaultColumnFilter.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { act, fireEvent, render, screen } from "@testing-library/react";
 
 import { DefaultColumnFilter } from "./DefaultColumnFilter";
diff --git a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
index 5a1d0c08..65dce764 100644
--- a/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
+++ b/packages/react-formio/src/molecules/table/filters/SelectColumnFilter.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { render, screen } from "@testing-library/react";
 
 import { SelectColumnFilter } from "./SelectColumnFilter";
diff --git a/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
index 6ae7a379..cb2ef69c 100755
--- a/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormBuilder.tsx
@@ -1,5 +1,6 @@
 import type { CSSProperties } from "react";
 
+import { registerComponent } from "../../../registries/components";
 import { useFormBuilder, UseFormBuilderProps } from "./useFormBuilder";
 
 export function FormBuilder({
@@ -23,3 +24,5 @@ export function FormBuilder({
     </div>
   );
 }
+
+registerComponent("FormBuilder", FormBuilder);
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 e6c158e1..6296e117 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.stories.tsx
@@ -1,13 +1,43 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { FormEdit } from "./FormEdit";
+import { FormEdit, FormParameters } from "./all";
 import { defaultDisplayChoices } from "./FormParameters";
-
+console.log(FormParameters);
 /**
+ * Form Edit component to edit form schema using the form builder.
+ *
+ * ## Usage
  *
  * ```tsx
+ * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/all";
+ *
+ * or
+ *
+ * // register needed components
+ * import "@tsed/react-formio/atoms/icon/Icon";
+ * import "@tsed/react-formio/molecules/button/Button";
+ * import "@tsed/react-formio/molecules/forms/input-text/InputText";
+ * import "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
+ * import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+ * import "@tsed/react-formio/organisms/form/builder/FormParameters";
+ * import "@tsed/react-formio/organisms/form/builder/FormBuilder";
+ * import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
+ *
+ * // use FormEdit component
  * import {FormEdit} from "@tsed/react-formio/organisms/form/builder/FormEdit";
  * ```
+ *
+ * ## Override FormEdit
+ *
+ * This component is registered with the name `FormEdit` and can be overridden with the following code:
+ *
+ * ```ts
+ * registerComponent("FormEdit", MyFormEditComponent);
+ * registerComponent("FormEditCtas", MyFormEditCtasComponent);
+ * registerComponent("FormBuilder", MyFormBuilderComponent);
+ * registerComponent("FormParameters", MyFormParametersComponent);
+ * ```
  */
 export default {
   title: "form/builder/FormEdit",
diff --git a/packages/react-formio/src/organisms/form/builder/FormEdit.tsx b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
index c9fba411..945dcc56 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEdit.tsx
@@ -1,7 +1,8 @@
 import type { FormOptions } from "../../../interfaces";
-import { FormBuilder } from "./FormBuilder";
-import { FormEditCTAs } from "./FormEditCtas";
-import { FormParameters } from "./FormParameters";
+import { getComponent } from "../../../registries/components";
+import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
+import { FormEditCTAs as DefaultFormEditCTAs } from "./FormEditCtas";
+import { FormParameters as DefaultFormParameters } from "./FormParameters";
 import { FormBuilderEvents } from "./useFormBuilder";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
@@ -28,7 +29,10 @@ export function FormEdit({
   });
 
   const { options = {} } = props;
-
+  const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
+  const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
+  const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
+  console.log(FormParameters, FormBuilder, FormEditCTAs);
   return (
     <div className='form-edit-container'>
       <div className='form-edit'>
diff --git a/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
index 3a74ed38..a2650421 100644
--- a/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormEditCtas.tsx
@@ -1,8 +1,10 @@
 import { ReactElement } from "react";
 
+import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
 import { useTooltip } from "../../../hooks/useTooltip";
 import type { FormOptions } from "../../../interfaces";
-import { iconClass } from "../../../utils/iconClass";
+import { Button as DefaultButton } from "../../../molecules/button/Button";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export interface FormEditCTAsProps extends Record<string, unknown> {
   saveText?: string;
@@ -55,40 +57,41 @@ export function FormEditCTAs({
     title: t("Reset all changes")
   });
 
+  const Button = getComponent<typeof DefaultButton>("Button");
+  const Icon = getComponent<typeof DefaultIcon>("Icon");
+
   return (
     <div className={"form-edit__actions"}>
       <div>
-        <button
-          className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
-          disabled={disabled}
-          onClick={() => !disabled && onSubmit && onSubmit()}
-        >
-          <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
+        <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
+          <Icon name='save' iconset={options.iconset} />
           {saveText}
-        </button>
+        </Button>
 
         <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()} ref={undoTooltipRef}>
-            <i className={iconClass(options.iconset, "undo")} />
-          </button>
+          <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
+            <Icon name='undo' iconset={options.iconset} />
+          </Button>
 
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()} ref={redoTooltipRef}>
-            <i className={iconClass(options.iconset, "redo")} />
-          </button>
+          <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
+            <Icon name='redo' iconset={options.iconset} />
+          </Button>
         </div>
 
         <div>
           {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef!}>
-              <i className={iconClass(options.iconset, "copy")} />
-            </button>
+            <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
+              <Icon name='copy' iconset={options.iconset} />
+            </Button>
           )}
 
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <i className={iconClass(options.iconset, "reset")} />
-          </button>
+          <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
+            <Icon name='reset' iconset={options.iconset} />
+          </Button>
         </div>
       </div>
     </div>
   );
 }
+
+registerComponent("FormEditCTAs", FormEditCTAs);
diff --git a/packages/react-formio/src/organisms/form/builder/FormParameters.tsx b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
index f8a9aa45..f6b5d318 100644
--- a/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
+++ b/packages/react-formio/src/organisms/form/builder/FormParameters.tsx
@@ -2,8 +2,9 @@ import { ReactElement } from "react";
 
 import type { FormType } from "../../../interfaces";
 import { InputTags } from "../../../molecules/forms/input-tags/InputTags";
-import { InputText } from "../../../molecules/forms/input-text/InputText";
-import { Select } from "../../../molecules/forms/select/Select";
+import { InputText as DefaultInputText } from "../../../molecules/forms/input-text/InputText";
+import { Select as DefaultSelect } from "../../../molecules/forms/select/Select";
+import { getComponent, registerComponent } from "../../../registries/components";
 
 export const defaultDisplayChoices = [
   { label: "Form", value: "form" },
@@ -34,6 +35,9 @@ export function FormParameters({
 }: FormParametersProps): ReactElement {
   const hasTypeChoices = typeChoices && typeChoices.length > 1;
 
+  const InputText = getComponent<typeof DefaultInputText>("InputText");
+  const Select = getComponent<typeof DefaultSelect>("Select");
+
   return (
     <div className={`form-edit__settings ${className}`}>
       <div>
@@ -43,7 +47,7 @@ export function FormParameters({
           name={"title"}
           required={true}
           value={form.title}
-          disabled={!!readonly["title"]}
+          disabled={readonly["title"]}
           onChange={onChange}
         />
       </div>
@@ -53,7 +57,7 @@ export function FormParameters({
           placeholder='Enter the form machine name'
           name={"name"}
           required={true}
-          disabled={!!readonly["name"]}
+          disabled={readonly["name"]}
           value={form.name}
           onChange={onChange}
         />
@@ -72,7 +76,7 @@ export function FormParameters({
           }
           required={true}
           value={form.path}
-          disabled={!!readonly["path"]}
+          disabled={readonly["path"]}
           style={{ textTransform: "lowercase", width: "120px" }}
           onChange={onChange}
         />
@@ -81,15 +85,15 @@ export function FormParameters({
         <Select
           label={"Display as"}
           name={"display"}
-          disabled={!!readonly["display"]}
+          disabled={readonly["display"]}
           value={form.display}
-          choices={displayChoices}
+          options={displayChoices}
           onChange={onChange}
         />
       </div>
       {hasTypeChoices && (
         <div>
-          <Select label={"Type"} name={"type"} value={form.type} choices={typeChoices} onChange={onChange} />
+          <Select label={"Type"} name={"type"} value={form.type} options={typeChoices} onChange={onChange} />
         </div>
       )}
       {enableTags && (
@@ -100,3 +104,5 @@ export function FormParameters({
     </div>
   );
 }
+
+registerComponent("FormParameters", FormParameters);
diff --git a/packages/react-formio/src/organisms/form/builder/all.ts b/packages/react-formio/src/organisms/form/builder/all.ts
new file mode 100644
index 00000000..24156e99
--- /dev/null
+++ b/packages/react-formio/src/organisms/form/builder/all.ts
@@ -0,0 +1,13 @@
+import "../../../atoms/icon/Icon";
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/Select";
+import "../../../molecules/forms/select/components/HtmlSelect";
+import "../../../molecules/forms/input-tags/InputTags";
+
+export * from "./FormBuilder";
+export * from "./FormEdit";
+export * from "./FormEditCtas";
+export * from "./FormParameters";
+export * from "./useFormBuilder";
+export * from "./useFormEdit";
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
index 4d35e88d..d7ff9aa1 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.spec.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
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 51186ca4..ae415b2c 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.stories.tsx
@@ -1,3 +1,5 @@
+import "../../../molecules/forms/select/all.ts";
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, within } from "@storybook/test";
 
diff --git a/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
index 57ffb034..ef14d842 100644
--- a/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
+++ b/packages/react-formio/src/organisms/table/actions/ActionsTable.tsx
@@ -37,7 +37,7 @@ export function ActionsTable({
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
           onChange={(name: string, action: string) => setAction(action)}
         />
         <div className={"pl-3"}>
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 c686fb43..bf4fe5fd 100644
--- a/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/forms/FormsTable.stories.tsx
@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import tailwind from "@tsed/tailwind-formio";
 
 import { FormsTable } from "./FormsTable";
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 66bb9de7..be719cf9 100644
--- a/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
+++ b/packages/react-formio/src/organisms/table/submissions/SubmissionsTable.stories.tsx
@@ -1,3 +1,8 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+
 import { useState } from "react";
 
 import { mapPagination } from "../../../utils/mapPagination";
diff --git a/packages/redux-utils/package.json b/packages/redux-utils/package.json
index 772290cd..7a9e950e 100644
--- a/packages/redux-utils/package.json
+++ b/packages/redux-utils/package.json
@@ -27,5 +27,6 @@
   "peerDependencies": {
     "react": "^18.3.1",
     "redux": "^4.0.5"
-  }
+  },
+  "dependencies": {}
 }
diff --git a/packages/tailwind-formio/package.json b/packages/tailwind-formio/package.json
index 80af637f..8b81c29e 100644
--- a/packages/tailwind-formio/package.json
+++ b/packages/tailwind-formio/package.json
@@ -49,5 +49,7 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }
diff --git a/stories/Getting-started.mdx b/stories/Getting-started.mdx
index 6a478002..963c83d8 100644
--- a/stories/Getting-started.mdx
+++ b/stories/Getting-started.mdx
@@ -1,73 +1,52 @@
 import {Canvas, Meta} from '@storybook/blocks'
 import * as FormBuilderStories from '../packages/react-formio/src/organisms/form/builder/FormBuilder.stories'
+import {StoryBanner} from './home/StoryBanner.jsx'
+
+<Meta title="Getting started"/>
+
 
-<Meta title="Getting started" />
-
-<div className="flex items-center justify-center pb-5">
-  <a href="https://tsed.io" target="_blank"><img className="overflow-hidden block"
-                                                 src="https://tsed.io/tsed-og.png" width="200" alt="Ts.ED logo"/></a>
-</div>
-
-<div className="text-center pb-5">
-  <h1>Ts.ED - React Formio</h1>
-
-  <div className="flex items-center justify-center gap-3">
-    <a href="https://github.com/tsedio/tsed-formio/actions/workflows/build.yml"><img
-      src="https://github.com/tsedio/tsed-formio/actions/workflows/build.yml/badge.svg" alt="Build & Release"/></a>
-    <a href="https://github.com/semantic-release/semantic-release"><img
-      src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg"
-      alt="semantic-release"/></a>
-    <a href="https://github.com/prettier/prettier"><img
-      src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square"
-      alt="code style: prettier"/></a>
-    <a href="https://opencollective.com/tsed"><img src="https://opencollective.com/tsed/tiers/badge.svg" alt="backers"/></a>
-  </div>
-</div>
-
-<div className="text-center pb-5">
-  <a href="https://tsed.io/">Website</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://tsed.io/tutorials/prisma.html">Tutorial</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://api.tsed.io/rest/slack/tsedio/tsed">Slack</a>
-  <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
-  <a href="https://twitter.com/TsED_io">Twitter</a>
-</div>
-
-<hr/>
-
-A [React](http://facebook.github.io/react/) library for rendering out forms based on the [Form.io](https://www.form.io)
-platform.
-
-This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
-listed above.
 
-See our [storybook](https://formio.tsed.io/) to see all available components.
+<StoryBanner />
+
+> This module is based on the original [react-formio](https://github.com/formio/react-formio) and add extra features
+listed above.
 
 ## Features
 
 Many components are provided to build your own backoffice based on Formio.js API:
 
-- [ActionsTable](/story/organisms-table-actions-actionstable--sandbox),
-- [FormAccess](/story/organisms-form-access-formaccess--sandbox),
-- [FormAction](/story/organisms-form-action-formaction--sandbox),
-- [Form](/docs/documentation-form--docs),
-- [FormBuilder](/docs/documentation-formbuilder--docs),
-- [FormEdit](/docs/documentation-formedit--docs),
-- [FormsTable](/docs/documentation-formstable--docs),
-- [InputTags](/story/reactformio-inputtags--sandbox),
-- [InputText](/story/reactformio-inputtext--sandbox),
-- [Pagination](/story/reactformio-pagination--sandbox),
-- [Select](/story/reactformio-select--sandbox),
-- [SubmissionsTable](/docs/documentation-submissionstable--docs).
-- [Table](/story/reactformio-table--sandbox),
+- [ActionsTable](?path=/docs/organisms-table-actions-actionstable--docs),
+- [FormAccess](?path=/docs/organisms-form-access-formaccess--docs),
+- [FormAction](?path=/docs/organisms-form-action-formaction--docs),
+- [Form](?path=/docs/organisms-form-form--docs),
+- [FormBuilder](?path=/docs/organisms-form-builder-formbuilder--docs),
+- [FormEdit](?path=/docs/organisms-form-builder-formedit--docs),
+- [FormsTable](?path=/docs/organisms-table-forms-formstable--docs),
+- [InputTags](?path=/docs/molecules-forms-inputtags--docs),
+- [InputText](?path=/docs/molecules-forms-inputtext--docs),
+- [Pagination](?path=/docs/molecules-pagination--docs),
+- Select: [Choicejs](?path=/docs/molecules-forms-select-choicejs--docs), [HTML5](?path=/docs/molecules-forms-select-html5--docs) or [ReactSelect](?path=/docs/molecules-forms-select-react--docs),
+- [SubmissionsTable](?path=/docs/organisms-table-submissions-submissionstable--docs).
+- [Table](?path=/docs/molecules-table--docs),
 - Predefined Reducers for Actions, Action, Form, Forms, Submission, Submissions, etc...,
 - TypeScript support.
 - Tailwind support.
 
+## Install
+
+`@tsed/react-formio` can be used on the server, or bundled for the client using an
+npm-compatible packaging system such as [Vite](https://vite.dev/), [webpack](http://webpack.github.io/) or [Rollup](https://rollupjs.org/).
+
+
+```sh
+npm install @tsed/react-formio react-table --save
+npm install formiojs choices.js --save // Install formiojs since it is a peerDependency
+```
+
+
 ## Migrate to v2
 
-If you use redux actions with v2, you have to install `@tsed/redux-formio-stores` and remplace your imports:
+If you use redux actions with v2, you have to install `@tsed/redux-formio-stores` and replace your imports:
 
 ```diff
 - import { defaultFormioReducer, formsReducer } from "@tsed/react-formio";
@@ -87,22 +66,11 @@ Example:
 + import { Form } from "@tsed/react-formio/organisms/form/Form";
 ```
 
-## Install
-
-`@tsed/react-formio` can be used on the server, or bundled for the client using an
-npm-compatible packaging system such as [Browserify](http://browserify.org/) or
-[webpack](http://webpack.github.io/).
-
-```
-npm install @tsed/react-formio react-table --save
-npm install formiojs choices.js --save // Install formiojs since it is a peerDependency
-```
-
 ## Usage
 
 ```tsx
 import React from "react";
-import { FormBuilder } from "@tsed/react-formio";
+import { FormBuilder } from "@tsed/react-formio/organisms/form/builder/FormBuilder";
 
 function App() {
   return (
@@ -115,7 +83,41 @@ function App() {
 export default App;
 ```
 
-<Canvas of={FormBuilderStories.WebForm} />
+<Canvas of={FormBuilderStories.WebForm}/>
+
+## Registering react components
+
+You can register your own components to be used within the `@tsed/react-formio` library. This is useful if you want to
+customize `FormEdit` or `Table` components.
+
+For example FormEdit component use the followings components:
+
+```ts
+import "@tsed/react-formio/atoms/icon/Icon";
+import "@tsed/react-formio/molecules/button/Button";
+import "@tsed/react-formio/molecules/forms/input-text/InputText";
+import "@tsed/react-formio/molecules/forms/select/Select";
+import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect";
+import "@tsed/react-formio/molecules/forms/input-tags/InputTags";
+import "@tsed/react-formio/organisms/form/builder/FormParameters";
+import "@tsed/react-formio/organisms/form/builder/FormBuilder";
+import "@tsed/react-formio/organisms/form/builder/FormEditCtas";
+```
+
+You can replace for example replace the default React Button component provided by the library by your own Button:
+
+```tsx
+import {registerComponent} from "@tsed/react-formio/registries/components";
+import type {ButtonProps} from "@tsed/react-formio/molecules/button/Button";
+
+registerComponent("button", (props: ButtonProps) => {
+  return <button {...props}>{props.label}</button>;
+});
+```
+A large part of the provided component from the library can be replaced by your own component.
+
+> Note: Override Button react component doesn't affect the button design and implementation used by formio.js.
+> To styling the original button component formio, you have to redefine the `.btn` class in your CSS.
 
 ## Contributors
 
@@ -140,7 +142,7 @@ website. [[Become a sponsor](https://opencollective.com/tsed#sponsor)]
 
 The MIT License (MIT)
 
-Copyright (c) 2016 - 2021 Romain Lenzotti
+Copyright (c) 2016 - Today Romain Lenzotti
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
diff --git a/stories/home/StoryBanner.jsx b/stories/home/StoryBanner.jsx
new file mode 100644
index 00000000..3dfd8ffe
--- /dev/null
+++ b/stories/home/StoryBanner.jsx
@@ -0,0 +1,53 @@
+export function StoryBanner() {
+  return (
+    <div>
+      <div className='flex items-center justify-center gap-3'>
+        <a href='https://tsed.io' target='_blank' rel='noreferrer'>
+          <img className='overflow-hidden block' src='https://tsed.io/tsed-og.png' width='200' alt='Ts.ED logo' />
+        </a>
+        <a href='https://form.io' target='_blank' rel='noreferrer'>
+          <img src='https://portal.form.io/template/images/formio-logo-with-slogan.png' width='200' alt='Form.io logo' />
+        </a>
+      </div>
+
+      <div className={"text-center pb-5 text-primary font-bold"}>@tsed/react-formio</div>
+
+      <div className='flex items-center justify-center pb-5 mb-5'>
+        <div style={{ maxWidth: "400px" }} className='text-center font-bold text-gray-900 dark:text-white'>
+          <div style={{ fontSize: "20px" }}>A React library for rendering out forms based on the Form.io platform.</div>
+        </div>
+      </div>
+
+      <hr />
+
+      <div className='text-center pb-5'>
+        <a href='https://tsed.io/'>Ts.ED</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://tsed.io/tutorials/prisma.html'>Tutorial</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://api.tsed.io/rest/slack/tsedio/tsed'>Slack</a>
+        <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
+        <a href='https://twitter.com/TsED_io'>Twitter</a>
+      </div>
+
+      <hr />
+
+      <div className='text-center pb-5'>
+        <div className='flex items-center justify-center gap-3'>
+          <a href='https://github.com/tsedio/tsed-formio/actions/workflows/build.yml'>
+            <img src='https://github.com/tsedio/tsed-formio/actions/workflows/build.yml/badge.svg' alt='Build & Release' />
+          </a>
+          <a href='https://github.com/semantic-release/semantic-release'>
+            <img src='https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg' alt='semantic-release' />
+          </a>
+          <a href='https://github.com/prettier/prettier'>
+            <img src='https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square' alt='code style: prettier' />
+          </a>
+          <a href='https://opencollective.com/tsed'>
+            <img src='https://opencollective.com/tsed/tiers/badge.svg' alt='backers' />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/tools/typescript/package.json b/tools/typescript/package.json
index 4fc3396b..1fc61fbc 100644
--- a/tools/typescript/package.json
+++ b/tools/typescript/package.json
@@ -7,5 +7,8 @@
   "main": "index.js",
   "exports": {
     "./tsconfig.web.json": "./tsconfig.web.json"
-  }
+  },
+  "dependencies": {},
+  "devDependencies": {},
+  "peerDependencies": {}
 }
diff --git a/tools/vitest/package.json b/tools/vitest/package.json
index bd3cf39a..27af42f5 100644
--- a/tools/vitest/package.json
+++ b/tools/vitest/package.json
@@ -14,5 +14,7 @@
   },
   "scripts": {
     "generate": "node index.js"
-  }
+  },
+  "dependencies": {},
+  "peerDependencies": {}
 }