diff --git a/examples/react/src/basic-ui/components/Containers/FormField.tsx b/examples/react/src/basic-ui/components/Containers/FormField.tsx
index 07f551b..a9d393b 100644
--- a/examples/react/src/basic-ui/components/Containers/FormField.tsx
+++ b/examples/react/src/basic-ui/components/Containers/FormField.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormFieldProps } from '@schepta/factory-react';
 
-export const FormField = ({ children, ...props }: any) => {
+export const FormField: React.FC<FormFieldProps> = ({ children, ...props }) => {
     return <div data-test-id="FormField" {...props}>{children}</div>;
   };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
index 4da09ab..fdbed14 100644
--- a/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
+++ b/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionContainerProps } from '@schepta/factory-react';
 
-export const FormSectionContainer = ({ children, ...props }: any) => {
+export const FormSectionContainer: React.FC<FormSectionContainerProps> = ({ children, ...props }) => {
     return <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px' }} {...props}>{children}</div>;
   };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
index e32fc5b..7e62108 100644
--- a/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
+++ b/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
+import type { FormSectionGroupProps } from '@schepta/factory-react';
 
-export const FormSectionGroup = ({ children, columns, ...props }: any) => {
-    const gridColumns = columns || 'repeat(auto-fit, minmax(200px, 1fr))';
-    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: gridColumns, gap: '16px' }} {...props}>{children}</div>;
+export const FormSectionGroup: React.FC<FormSectionGroupProps> = ({ children, ...props }) => {
+    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>{children}</div>;
   };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
index 3d7140e..e070cde 100644
--- a/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
+++ b/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionGroupContainerProps } from '@schepta/factory-react';
 
-export const FormSectionGroupContainer = ({ children, ...props }: any) => {
+export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps> = ({ children, ...props }) => {
     return <div data-test-id="FormSectionGroupContainer" {...props}>{children}</div>;
   };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
index b0db5aa..3a6482d 100644
--- a/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
+++ b/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
+import type { FormSectionTitleProps } from '@schepta/factory-react';
 
-export const FormSectionTitle = ({ 'x-content': content, children, ...props }: any) => {
-    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333' }} {...props}>{content || children}</h2>;
+export const FormSectionTitle: React.FC<FormSectionTitleProps> = ({ 'x-content': content, children, ...props }) => {
+    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>{content || children}</h2>;
   };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx b/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
index 413adb8..1f76e81 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
+import type { InputCheckboxProps } from '@schepta/factory-react';
 
-export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, children, ...rest } = props;
+export const InputCheckbox: React.FC<InputCheckboxProps> = ({ label, name, value, onChange, children, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
           <input
-            ref={ref}
             type="checkbox"
             name={name}
             data-test-id={name}
@@ -19,4 +18,4 @@ export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref
         {children}
       </div>
     );
-  });
\ No newline at end of file
+  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputDate.tsx b/examples/react/src/basic-ui/components/Inputs/InputDate.tsx
index 1c2cd14..632a9e1 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputDate.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputDate.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import type { InputDateProps } from '@schepta/factory-react';
 
-export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
+export const InputDate: React.FC<InputDateProps> = ({ label, name, value, onChange, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -13,7 +13,6 @@ export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) =>
           </label>
         )}
         <input
-          ref={ref}
           type="date"
           id={name}
           name={name}
@@ -30,4 +29,4 @@ export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) =>
         />
       </div>
     );
-  });
\ No newline at end of file
+  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx b/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
index e65d505..ac223ce 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
@@ -1,8 +1,7 @@
+import type { InputNumberProps } from '@schepta/factory-react';
 import React from 'react';
 
-export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, min, max, step, ...rest } =
-      props;
+export const InputNumber: React.FC<InputNumberProps> = ({ label, name, value, onChange, placeholder, min, max, step, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -14,7 +13,6 @@ export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref)
           </label>
         )}
         <input
-          ref={ref}
           type="number"
           id={name}
           name={name}
@@ -37,4 +35,4 @@ export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref)
         />
       </div>
     );
-  });
\ No newline at end of file
+  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputPhone.tsx b/examples/react/src/basic-ui/components/Inputs/InputPhone.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx b/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
index 499a4cf..c2abeb6 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
@@ -1,16 +1,7 @@
+import type { InputSelectProps } from '@schepta/factory-react';
 import React from 'react';
 
-export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref) => {
-    const {
-      label,
-      name,
-      value,
-      onChange,
-      options = [],
-      placeholder = "Select...",
-      children,
-      ...rest
-    } = props;
+export const InputSelect: React.FC<InputSelectProps> = ({ label, name, value, onChange, options = [], placeholder = "Select...", children, ...rest }) => {
     return (
       <div style={{ marginBottom: "16px" }}>
         {label && (
@@ -22,7 +13,6 @@ export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref)
           </label>
         )}
         <select
-          ref={ref}
           id={name}
           name={name}
           data-test-id={name}
@@ -49,4 +39,4 @@ export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref)
         {children}
       </div>
     );
-  });
\ No newline at end of file
+  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputText.tsx b/examples/react/src/basic-ui/components/Inputs/InputText.tsx
index d067cbf..38a30dc 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputText.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputText.tsx
@@ -1,7 +1,7 @@
+import type { InputTextProps } from '@schepta/factory-react';
 import React from "react";
 
-export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-  const { label, name, value, onChange, placeholder, ...rest } = props;
+export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChange, placeholder, ...rest }) => {
   return (
     <div style={{ marginBottom: "16px" }}>
       {label && (
@@ -13,7 +13,6 @@ export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) =>
         </label>
       )}
       <input
-        ref={ref}
         id={name}
         name={name}
         data-test-id={name}
@@ -30,4 +29,4 @@ export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) =>
       />
     </div>
   );
-});
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx b/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx
index b842bea..3f28f0c 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx
@@ -1,45 +1,42 @@
-import React from 'react';
+import type { InputTextareaProps } from "@schepta/factory-react";
+import React from "react";
 
-export const InputTextarea = React.forwardRef<HTMLTextAreaElement, any>(
-    (props, ref) => {
-      const {
-        label,
-        name,
-        value,
-        onChange,
-        placeholder,
-        rows = 4,
-        ...rest
-      } = props;
-      return (
-        <div style={{ marginBottom: "16px" }}>
-          {label && (
-            <label
-              htmlFor={name}
-              style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-            >
-              {label}
-            </label>
-          )}
-          <textarea
-            ref={ref}
-            id={name}
-            name={name}
-            data-test-id={name}
-            value={value || ""}
-            placeholder={placeholder}
-            rows={rows}
-            onChange={(e) => onChange?.(e.target.value)}
-            style={{
-              width: "100%",
-              padding: "8px",
-              border: "1px solid #ccc",
-              borderRadius: "4px",
-              fontFamily: "inherit",
-            }}
-            {...rest}
-          />
-        </div>
-      );
-    }
-  );
\ No newline at end of file
+export const InputTextarea: React.FC<InputTextareaProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  ...rest
+}) => {
+  return (
+    <div style={{ marginBottom: "16px" }}>
+      {label && (
+        <label
+          htmlFor={name}
+          style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        id={name}
+        name={name}
+        data-test-id={name}
+        value={value || ""}
+        placeholder={placeholder}
+        rows={rows}
+        onChange={(e) => onChange?.(e.target.value)}
+        style={{
+          width: "100%",
+          padding: "8px",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          fontFamily: "inherit",
+        }}
+        {...rest}
+      />
+    </div>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Containers/FormField.tsx b/examples/react/src/chakra-ui/components/Containers/FormField.tsx
index c38912e..5c8ab32 100644
--- a/examples/react/src/chakra-ui/components/Containers/FormField.tsx
+++ b/examples/react/src/chakra-ui/components/Containers/FormField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
+import type { FormFieldProps } from "@schepta/factory-react";
 
-export const FormField = ({ children, ...props }: any) => {
+export const FormField: React.FC<FormFieldProps & BoxProps> = ({ children, ...props }) => {
     return <Box data-test-id="FormField" {...props}>{children}</Box>;
   };
\ No newline at end of file
diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx b/examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx
index 8f3aa6f..ba93b16 100644
--- a/examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx
+++ b/examples/react/src/chakra-ui/components/Containers/FormSectionContainer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
+import type { FormSectionContainerProps } from "@schepta/factory-react";
 
-export const FormSectionContainer = ({ children, ...props }: any) => {
+export const FormSectionContainer: React.FC<FormSectionContainerProps & BoxProps> = ({ children, ...props }) => {
     return <Box mb={6} {...props}>{children}</Box>;
   };
\ No newline at end of file
diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx b/examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx
index f365584..6b88f48 100644
--- a/examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx
+++ b/examples/react/src/chakra-ui/components/Containers/FormSectionGroup.tsx
@@ -1,12 +1,10 @@
 import React from "react";
-import { Grid } from "@chakra-ui/react";
+import { Grid, GridProps } from "@chakra-ui/react";
+import type { FormSectionGroupProps } from "@schepta/factory-react";
 
-export const FormSectionGroup = ({ children, 'x-component-props': xComponentProps, ...props }: any) => {
-    const columns = xComponentProps?.columns || '1fr 1fr';
-    const gridColumns = columns === '1fr' ? 1 : 2;
-    
+export const FormSectionGroup: React.FC<FormSectionGroupProps & GridProps> = ({ children, ...props }) => {
     return (
-      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(${gridColumns}, 1fr)`} gap={4} {...props}>
+      <Grid data-test-id="FormSectionGroup" templateColumns={`repeat(auto-fit, minmax(200px, 1fr))`} gap={4} {...props}>
         {children}
       </Grid>
     );
diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx b/examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
index d6ac7bf..bdd8957 100644
--- a/examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
+++ b/examples/react/src/chakra-ui/components/Containers/FormSectionGroupContainer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
+import type { FormSectionGroupContainerProps } from "@schepta/factory-react";
 
-export const FormSectionGroupContainer = ({ children, ...props }: any) => {
+export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps & BoxProps> = ({ children, ...props }) => {
     return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
   };
\ No newline at end of file
diff --git a/examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx b/examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx
index 57744da..7ed8d77 100644
--- a/examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx
+++ b/examples/react/src/chakra-ui/components/Containers/FormSectionTitle.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Heading } from "@chakra-ui/react";
+import { Heading, HeadingProps } from "@chakra-ui/react";
+import type { FormSectionTitleProps } from "@schepta/factory-react";
 
-export const FormSectionTitle = ({ 'x-content': content, children, ...props }: any) => {
+export const FormSectionTitle: React.FC<FormSectionTitleProps & HeadingProps> = ({ 'x-content': content, children, ...props }) => {
     return (
       <Heading size="md" mb={4} {...props}>
         {content || children}
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx b/examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx
index fdf0341..8fec913 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputCheckbox.tsx
@@ -1,18 +1,23 @@
 import React from "react";
-import { Checkbox } from "@chakra-ui/react";
+import { Checkbox, CheckboxProps } from "@chakra-ui/react";
+import type { InputCheckboxProps } from "@schepta/factory-react";
 
-export const InputCheckbox = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
-    return (
-      <Checkbox
-        ref={ref}
-        name={name}
-        isChecked={value || false}
-        onChange={(e) => onChange?.(e.target.checked)}
-        data-test-id={name}
-        {...rest}
-      >
-        {label}
-      </Checkbox>
-    );
-  });
\ No newline at end of file
+export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <Checkbox
+      name={name}
+      isChecked={value || false}
+      onChange={(e) => onChange?.(e.target.checked)}
+      data-test-id={name}
+      {...rest}
+    >
+      {label}
+    </Checkbox>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputDate.tsx b/examples/react/src/chakra-ui/components/Inputs/InputDate.tsx
index 5b6e9b8..161c2b1 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputDate.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputDate.tsx
@@ -1,20 +1,25 @@
 import React from "react";
-import { FormControl, FormLabel, Input } from "@chakra-ui/react";
+import { FormControl, FormLabel, Input, InputProps } from "@chakra-ui/react";
+import type { InputDateProps } from "@schepta/factory-react";
 
-export const InputDate = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
-    return (
-      <FormControl>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Input
-          ref={ref}
-          type="date"
-          name={name}
-          value={value || ''}
-          onChange={(e) => onChange?.(e.target.value)}
-          data-test-id={name}
-          {...rest}
-        />
-      </FormControl>
-    );
-  });
\ No newline at end of file
+export const InputDate: React.FC<InputDateProps & InputProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <FormControl>
+      {label && <FormLabel>{label}</FormLabel>}
+      <Input
+        type="date"
+        name={name}
+        value={value || ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        data-test-id={name}
+        {...rest}
+      />
+    </FormControl>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx b/examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx
index 9fc5c0f..37218df 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputNumber.tsx
@@ -1,24 +1,35 @@
 import React from "react";
-import { FormControl, FormLabel, Input } from "@chakra-ui/react";
+import { FormControl, FormLabel, Input, InputProps } from "@chakra-ui/react";
+import type { InputNumberProps } from "@schepta/factory-react";
 
-export const InputNumber = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, min, max, step, ...rest } = props;
-    return (
-      <FormControl>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Input
-          ref={ref}
-          type="number"
-          name={name}
-          value={value || ''}
-          placeholder={placeholder}
-          onChange={(e) => onChange?.(e.target.value ? Number(e.target.value) : '')}
-          min={min}
-          max={max}
-          step={step}
-          data-test-id={name}
-          {...rest}
-        />
-      </FormControl>
-    );
-  });
\ No newline at end of file
+export const InputNumber: React.FC<InputNumberProps & InputProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  min,
+  max,
+  step,
+  ...rest
+}) => {
+  return (
+    <FormControl>
+      {label && <FormLabel>{label}</FormLabel>}
+      <Input
+        type="number"
+        name={name}
+        value={value || ""}
+        placeholder={placeholder}
+        onChange={(e) =>
+          onChange?.(e.target.value ? Number(e.target.value) : "")
+        }
+        min={min}
+        max={max}
+        step={step}
+        data-test-id={name}
+        {...rest}
+      />
+    </FormControl>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx b/examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx
index e2b3056..5727bb9 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputPhone.tsx
@@ -1,6 +1,30 @@
 import React from "react";
 import { InputText } from "./InputText";
+import { InputProps } from "@chakra-ui/react";
+import type { InputPhoneProps } from "@schepta/factory-react";
 
-export const InputPhone = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    return <InputText ref={ref} {...props} type="tel" />;
-  });
\ No newline at end of file
+export const InputPhone: React.FC<InputPhoneProps & InputProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  min,
+  max,
+  step,
+  ...rest
+}) => {
+  return (
+    <InputText
+      label={label}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      min={min}
+      max={max}
+      step={step}
+      {...rest}
+    />
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx b/examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx
index 70cc884..11c78c9 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputSelect.tsx
@@ -1,26 +1,36 @@
 import React from "react";
-import { FormControl, FormLabel, Select } from "@chakra-ui/react";
+import { FormControl, FormLabel, Select, SelectProps } from "@chakra-ui/react";
+import type { InputSelectProps } from "@schepta/factory-react";
 
-export const InputSelect = React.forwardRef<HTMLSelectElement, any>((props, ref) => {
-    const { label, name, value, onChange, options = [], placeholder = 'Select...', ...rest } = props;
-    return (
-      <FormControl>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Select
-          ref={ref}
-          name={name}
-          value={value || ''}
-          onChange={(e) => onChange?.(e.target.value)}
-          data-test-id={name}
-          placeholder={placeholder}
-          {...rest}
-        >
-          {options.map((opt: any) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </Select>
-      </FormControl>
-    );
-  });
\ No newline at end of file
+export const InputSelect: React.FC<InputSelectProps & SelectProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  options = [],
+  placeholder = "Select...",
+  ...rest
+}) => {
+  return (
+    <FormControl>
+      {label && <FormLabel>{label}</FormLabel>}
+      <Select
+        name={name}
+        value={value || ""}
+        onChange={(e) => onChange?.(e.target.value)}
+        data-test-id={name}
+        placeholder={placeholder}
+        {...rest}
+      >
+        {options.map((opt: any) => (
+          <option
+            key={opt.value}
+            value={opt.value}
+          >
+            {opt.label}
+          </option>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputText.tsx b/examples/react/src/chakra-ui/components/Inputs/InputText.tsx
index 2cb75c9..bca6bf3 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputText.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputText.tsx
@@ -1,20 +1,26 @@
 import React from "react";
-import { FormControl, FormLabel, Input } from "@chakra-ui/react";
+import { FormControl, FormLabel, Input, InputProps } from "@chakra-ui/react";
+import type { InputTextProps } from "@schepta/factory-react";
 
-export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, ...rest } = props;
-    return (
-      <FormControl>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Input
-          ref={ref}
-          name={name}
-          value={value || ''}
-          placeholder={placeholder}
-          onChange={(e) => onChange?.(e.target.value)}
-          data-test-id={name}
-          {...rest}
-        />
-      </FormControl>
-    );
-  });
\ No newline at end of file
+export const InputText: React.FC<InputTextProps & InputProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  ...rest
+}) => {
+  return (
+    <FormControl>
+      {label && <FormLabel>{label}</FormLabel>}
+      <Input
+        name={name}
+        value={value || ""}
+        placeholder={placeholder}
+        onChange={(e) => onChange?.(e.target.value)}
+        data-test-id={name}
+        {...rest}
+      />
+    </FormControl>
+  );
+};
diff --git a/examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx b/examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx
index a706703..def935e 100644
--- a/examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx
+++ b/examples/react/src/chakra-ui/components/Inputs/InputTextarea.tsx
@@ -1,21 +1,33 @@
 import React from "react";
-import { FormControl, FormLabel, Textarea } from "@chakra-ui/react";
+import {
+  FormControl,
+  FormLabel,
+  Textarea,
+  TextareaProps,
+} from "@chakra-ui/react";
+import type { InputTextareaProps } from "@schepta/factory-react";
 
-export const InputTextarea = React.forwardRef<HTMLTextAreaElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, rows = 4, ...rest } = props;
-    return (
-      <FormControl>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Textarea
-          ref={ref}
-          name={name}
-          value={value || ''}
-          placeholder={placeholder}
-          rows={rows}
-          onChange={(e) => onChange?.(e.target.value)}
-          data-test-id={name}
-          {...rest}
-        />
-      </FormControl>
-    );
-  });
\ No newline at end of file
+export const InputTextarea: React.FC<InputTextareaProps & TextareaProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  ...rest
+}) => {
+  return (
+    <FormControl>
+      {label && <FormLabel>{label}</FormLabel>}
+      <Textarea
+        name={name}
+        value={value || ""}
+        placeholder={placeholder}
+        rows={rows}
+        onChange={(e) => onChange?.(e.target.value)}
+        data-test-id={name}
+        {...rest}
+      />
+    </FormControl>
+  );
+};
diff --git a/examples/react/src/material-ui/components/Containers/FormContainer.tsx b/examples/react/src/material-ui/components/Containers/FormContainer.tsx
index 97a9760..3b09160 100644
--- a/examples/react/src/material-ui/components/Containers/FormContainer.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormContainer.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
 import type { FormContainerProps } from "@schepta/factory-react";
 import { SubmitButton } from "../SubmitButton";
 import { useScheptaFormAdapter } from "@schepta/factory-react";
 
-export const FormContainer: React.FC<FormContainerProps> = ({ 
+export const FormContainer: React.FC<FormContainerProps & BoxProps> = ({ 
   children, 
   onSubmit, 
 }) => {
diff --git a/examples/react/src/material-ui/components/Containers/FormField.tsx b/examples/react/src/material-ui/components/Containers/FormField.tsx
index aba9d70..9230059 100644
--- a/examples/react/src/material-ui/components/Containers/FormField.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
+import type { FormFieldProps } from "@schepta/factory-react";
 
-export const FormField = ({ children, ...props }: any) => {
+export const FormField: React.FC<FormFieldProps & BoxProps> = ({ children, ...props }) => {
   return <Box data-test-id="FormField" {...props}>{children}</Box>;
 };
diff --git a/examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx b/examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx
index b7063c0..0dfc9f3 100644
--- a/examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormSectionContainer.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
+import type { FormSectionContainerProps } from "@schepta/factory-react";
 
-export const FormSectionContainer = ({ children, ...props }: any) => {
+export const FormSectionContainer: React.FC<FormSectionContainerProps & BoxProps> = ({ children, ...props }) => {
   return (
     <Box
       sx={{ mb: 3 }}
diff --git a/examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx b/examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx
index 2017d52..4096daa 100644
--- a/examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormSectionGroup.tsx
@@ -1,19 +1,17 @@
 import React from "react";
-import { Box, Grid } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
+import type { FormSectionGroupProps } from "@schepta/factory-react";
 
-export const FormSectionGroup = ({
+export const FormSectionGroup: React.FC<FormSectionGroupProps & BoxProps> = ({
   children,
-  "x-component-props": xComponentProps,
   ...props
-}: any) => {
-  const columns = xComponentProps?.columns || "1fr 1fr";
-  const gridColumns = columns === "1fr" ? 1 : 2;
+}) => {
 
   return (
     <Box
       data-test-id="FormSectionGroup"
       display="grid"
-      gridTemplateColumns={`repeat(${gridColumns}, 1fr)`}
+      gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))"
       gap={4}
       {...props}
     >
diff --git a/examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx b/examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
index 397bb78..dc9b7ce 100644
--- a/examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormSectionGroupContainer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
-import { Box } from "@mui/material";
+import { Box, BoxProps } from "@mui/material";
+import type { FormSectionGroupContainerProps } from "@schepta/factory-react";
 
-export const FormSectionGroupContainer = ({ children, ...props }: any) => {
+export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps & BoxProps> = ({ children, ...props }) => {
   return <Box data-test-id="FormSectionGroupContainer" {...props}>{children}</Box>;
 };
diff --git a/examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx b/examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx
index 0c39d38..5e868e3 100644
--- a/examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx
+++ b/examples/react/src/material-ui/components/Containers/FormSectionTitle.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-import { Typography } from "@mui/material";
+import { Typography, TypographyProps } from "@mui/material";
+import type { FormSectionTitleProps } from "@schepta/factory-react";
 
-export const FormSectionTitle = ({
+export const FormSectionTitle: React.FC<FormSectionTitleProps & TypographyProps> = ({
   "x-content": content,
   children,
   ...props
-}: any) => {
+}) => {
   return (
     <Typography
       variant="h5"
diff --git a/examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx b/examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx
index e152c6a..3954818 100644
--- a/examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputCheckbox.tsx
@@ -1,24 +1,27 @@
 import React from "react";
-import { FormControlLabel } from "@mui/material";
+import { FormControlLabel, CheckboxProps } from "@mui/material";
 import { Checkbox } from "@mui/material";
+import type { InputCheckboxProps } from "@schepta/factory-react";
 
-export const InputCheckbox = React.forwardRef<HTMLInputElement, any>(
-  (props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
-    return (
-      <FormControlLabel
-        control={
-          <Checkbox
-            inputRef={ref}
-            name={name}
-            checked={value || false}
-            onChange={(e) => onChange?.(e.target.checked)}
-            data-test-id={name}
-            {...rest}
-          />
-        }
-        label={label}
-      />
-    );
-  },
-);
+export const InputCheckbox: React.FC<InputCheckboxProps & CheckboxProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          name={name}
+          checked={value || false}
+          onChange={(e) => onChange?.(e.target.checked)}
+          data-test-id={name}
+          {...rest}
+        />
+      }
+      label={label}
+    />
+  );
+};
diff --git a/examples/react/src/material-ui/components/Inputs/InputDate.tsx b/examples/react/src/material-ui/components/Inputs/InputDate.tsx
index c5827a1..0c2783c 100644
--- a/examples/react/src/material-ui/components/Inputs/InputDate.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputDate.tsx
@@ -1,23 +1,26 @@
 import React from "react";
-import { TextField } from "@mui/material";
+import { TextField, TextFieldProps } from "@mui/material";
+import type { InputDateProps } from "@schepta/factory-react";
 
-export const InputDate = React.forwardRef<HTMLInputElement, any>(
-  (props, ref) => {
-    const { label, name, value, onChange, ...rest } = props;
-    return (
-      <TextField
-        ref={ref}
-        fullWidth
-        type="date"
-        label={label}
-        name={name}
-        value={value || ""}
-        onChange={(e) => onChange?.(e.target.value)}
-        InputLabelProps={{ shrink: true }}
-        data-test-id={name}
-        margin="normal"
-        {...rest}
-      />
-    );
-  },
-);
+export const InputDate: React.FC<InputDateProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  ...rest
+}) => {
+  return (
+    <TextField
+      fullWidth
+      type="date"
+      label={label}
+      name={name}
+      value={value || ""}
+      onChange={(e) => onChange?.(e.target.value)}
+      InputLabelProps={{ shrink: true }}
+      data-test-id={name}
+      margin="normal"
+      {...rest}
+    />
+  );
+};
diff --git a/examples/react/src/material-ui/components/Inputs/InputNumber.tsx b/examples/react/src/material-ui/components/Inputs/InputNumber.tsx
index 2c1e8a5..6de86f5 100644
--- a/examples/react/src/material-ui/components/Inputs/InputNumber.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputNumber.tsx
@@ -1,22 +1,20 @@
 import React from "react";
-import { TextField } from "@mui/material";
+import { TextField, TextFieldProps } from "@mui/material";
+import type { InputNumberProps } from "@schepta/factory-react";
 
-export const InputNumber = React.forwardRef<HTMLInputElement, any>(
-  (props, ref) => {
-    const {
-      label,
-      name,
-      value,
-      onChange,
-      placeholder,
-      min,
-      max,
-      step,
-      ...rest
-    } = props;
-    return (
+export const InputNumber: React.FC<InputNumberProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  min,
+  max,
+  step,
+  ...rest
+}) => {
+  return (
       <TextField
-        ref={ref}
         fullWidth
         type="number"
         label={label}
@@ -32,5 +30,4 @@ export const InputNumber = React.forwardRef<HTMLInputElement, any>(
         {...rest}
       />
     );
-  },
-);
+};
diff --git a/examples/react/src/material-ui/components/Inputs/InputPhone.tsx b/examples/react/src/material-ui/components/Inputs/InputPhone.tsx
index e2b3056..97d9ea8 100644
--- a/examples/react/src/material-ui/components/Inputs/InputPhone.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputPhone.tsx
@@ -1,6 +1,27 @@
 import React from "react";
-import { InputText } from "./InputText";
+import type { InputPhoneProps } from "@schepta/factory-react";
+import { TextField, TextFieldProps } from "@mui/material";
 
-export const InputPhone = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    return <InputText ref={ref} {...props} type="tel" />;
-  });
\ No newline at end of file
+export const InputPhone: React.FC<InputPhoneProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  min,
+  max,
+  step,
+  ...rest
+}) => {
+  return (
+    <TextField
+      label={label}
+      name={name}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      inputProps={{ min, max, step }}
+      {...rest}
+    />
+  );
+};
diff --git a/examples/react/src/material-ui/components/Inputs/InputSelect.tsx b/examples/react/src/material-ui/components/Inputs/InputSelect.tsx
index d8c7f29..f28af81 100644
--- a/examples/react/src/material-ui/components/Inputs/InputSelect.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputSelect.tsx
@@ -1,14 +1,21 @@
-import { MenuItem } from "@mui/material";
+import { MenuItem, TextFieldProps } from "@mui/material";
 import React from "react";
 import { TextField } from "@mui/material";
+import type { InputSelectProps } from "@schepta/factory-react";
 
-export const InputSelect = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, options = [], placeholder = 'Select...', ...rest } = props;
-    return (
-      <TextField
-        select
-        fullWidth
-        inputRef={ref}
+export const InputSelect: React.FC<InputSelectProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  options = [],
+  placeholder = 'Select...',
+  ...rest
+}) => {
+  return (
+    <TextField
+      select
+      fullWidth
         label={label}
         name={name}
         value={value || ''}
@@ -24,5 +31,5 @@ export const InputSelect = React.forwardRef<HTMLInputElement, any>((props, ref)
           </MenuItem>
         ))}
       </TextField>
-    );
-  });
\ No newline at end of file
+  );
+};
\ No newline at end of file
diff --git a/examples/react/src/material-ui/components/Inputs/InputText.tsx b/examples/react/src/material-ui/components/Inputs/InputText.tsx
index 439ae01..50a613c 100644
--- a/examples/react/src/material-ui/components/Inputs/InputText.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputText.tsx
@@ -1,11 +1,17 @@
 import React from "react";
-import { TextField } from "@mui/material";
+import { TextField, TextFieldProps } from "@mui/material";
+import type { InputTextProps } from "@schepta/factory-react";
 
-export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, ...rest } = props;
-    return (
-      <TextField
-        ref={ref}
+export const InputText: React.FC<InputTextProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  ...rest
+}) => {
+  return (
+    <TextField
         fullWidth
         label={label}
         name={name}
@@ -17,4 +23,4 @@ export const InputText = React.forwardRef<HTMLInputElement, any>((props, ref) =>
         {...rest}
       />
     );
-  });
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/examples/react/src/material-ui/components/Inputs/InputTextarea.tsx b/examples/react/src/material-ui/components/Inputs/InputTextarea.tsx
index 5e98884..58f57f7 100644
--- a/examples/react/src/material-ui/components/Inputs/InputTextarea.tsx
+++ b/examples/react/src/material-ui/components/Inputs/InputTextarea.tsx
@@ -1,22 +1,29 @@
 import React from "react";
-import { TextField } from "@mui/material";
+import { TextField, TextFieldProps } from "@mui/material";
+import type { InputTextareaProps } from "@schepta/factory-react";
 
-export const InputTextarea = React.forwardRef<HTMLTextAreaElement, any>((props, ref) => {
-    const { label, name, value, onChange, placeholder, rows = 4, ...rest } = props;
-    return (
-      <TextField
-        inputRef={ref}
-        fullWidth
-        multiline
-        rows={rows}
-        label={label}
-        name={name}
-        value={value || ''}
-        placeholder={placeholder}
-        onChange={(e) => onChange?.(e.target.value)}
-        data-test-id={name}
-        margin="normal"
-        {...rest}
-      />
-    );
-  });
\ No newline at end of file
+export const InputTextarea: React.FC<InputTextareaProps & TextFieldProps> = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  rows = 4,
+  ...rest
+}) => {
+  return (
+    <TextField
+      fullWidth
+      multiline
+      rows={rows}
+      label={label}
+      name={name}
+      value={value || ""}
+      placeholder={placeholder}
+      onChange={(e) => onChange?.(e.target.value)}
+      data-test-id={name}
+      margin="normal"
+      {...rest}
+    />
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultFormField.tsx b/packages/factories/react/src/components/DefaultFormField.tsx
new file mode 100644
index 0000000..f74ba9c
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultFormField.tsx
@@ -0,0 +1,36 @@
+/**
+ * Default FormField Component
+ *
+ * Wrapper (grid cell) for a single form field. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the FormField component.
+ * Use this type when customizing FormField via components.FormField.
+ */
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Form field children (typically the rendered input) */
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom FormField. Use with createComponentSpec when
+ * registering a custom FormField in components.
+ */
+export type FormFieldComponentType = React.ComponentType<FormFieldProps>;
+
+/**
+ * Default form field wrapper component.
+ */
+export const DefaultFormField: React.FC<FormFieldProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div data-test-id="FormField" {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultFormSectionContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
new file mode 100644
index 0000000..e0523d7
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
@@ -0,0 +1,38 @@
+/**
+ * Default FormSectionContainer Component
+ *
+ * Container for a form section (title + groups). Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the FormSectionContainer component.
+ * Use this type when customizing FormSectionContainer via components.FormSectionContainer.
+ */
+export interface FormSectionContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Section children (FormSectionTitle, FormSectionGroupContainer) */
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom FormSectionContainer. Use with createComponentSpec when
+ * registering a custom FormSectionContainer in components.
+ */
+export type FormSectionContainerComponentType =
+  React.ComponentType<FormSectionContainerProps>;
+
+/**
+ * Default form section container component.
+ */
+export const DefaultFormSectionContainer: React.FC<FormSectionContainerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px', ...props.style }} {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroup.tsx b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
new file mode 100644
index 0000000..0f3646b
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
@@ -0,0 +1,39 @@
+/**
+ * Default FormSectionGroup Component
+ *
+ * Grid layout for a group of form fields. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the FormSectionGroup component.
+ * Use this type when customizing FormSectionGroup via components.FormSectionGroup.
+ */
+export interface FormSectionGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Group children (FormField components) */
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+/**
+ * Component type for custom FormSectionGroup. Use with createComponentSpec when
+ * registering a custom FormSectionGroup in components.
+ */
+export type FormSectionGroupComponentType =
+  React.ComponentType<FormSectionGroupProps>;
+
+/**
+ * Default form section group component (grid layout).
+ */
+export const DefaultFormSectionGroup: React.FC<FormSectionGroupProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
new file mode 100644
index 0000000..3ecc13f
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
@@ -0,0 +1,38 @@
+/**
+ * Default FormSectionGroupContainer Component
+ *
+ * Container for FormSectionGroup(s). Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the FormSectionGroupContainer component.
+ * Use this type when customizing FormSectionGroupContainer via components.FormSectionGroupContainer.
+ */
+export interface FormSectionGroupContainerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Container children (FormSectionGroup components) */
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom FormSectionGroupContainer. Use with createComponentSpec when
+ * registering a custom FormSectionGroupContainer in components.
+ */
+export type FormSectionGroupContainerComponentType =
+  React.ComponentType<FormSectionGroupContainerProps>;
+
+/**
+ * Default form section group container component.
+ */
+export const DefaultFormSectionGroupContainer: React.FC<FormSectionGroupContainerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <div data-test-id="FormSectionGroupContainer" {...props}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultFormSectionTitle.tsx b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
new file mode 100644
index 0000000..522eb6c
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
@@ -0,0 +1,41 @@
+/**
+ * Default FormSectionTitle Component
+ *
+ * Section title (x-content). Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the FormSectionTitle component.
+ * Use this type when customizing FormSectionTitle via components.FormSectionTitle.
+ */
+export interface FormSectionTitleProps
+  extends React.HTMLAttributes<HTMLHeadingElement> {
+  /** Title content (from schema x-content) */
+  'x-content'?: string;
+  /** Optional children (alternative to x-content) */
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom FormSectionTitle. Use with createComponentSpec when
+ * registering a custom FormSectionTitle in components.
+ */
+export type FormSectionTitleComponentType =
+  React.ComponentType<FormSectionTitleProps>;
+
+/**
+ * Default form section title component.
+ */
+export const DefaultFormSectionTitle: React.FC<FormSectionTitleProps> = ({
+  'x-content': content,
+  children,
+  ...props
+}) => {
+  return (
+    <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>
+      {content ?? children}
+    </h2>
+  );
+};
diff --git a/packages/factories/react/src/components/DefaultInputAutocomplete.tsx b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
new file mode 100644
index 0000000..9927917
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
@@ -0,0 +1,101 @@
+/**
+ * Default InputAutocomplete Component
+ *
+ * Built-in autocomplete input for forms (uses native datalist).
+ * Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+export interface InputAutocompleteOption {
+  value: string;
+  label?: string;
+}
+
+/**
+ * Props passed to the InputAutocomplete component.
+ * Use this type when customizing InputAutocomplete via components.InputAutocomplete.
+ */
+export interface InputAutocompleteProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'list'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  /** List of options for autocomplete (value used for both value and label if label omitted) */
+  options?: InputAutocompleteOption[] | string[];
+}
+
+/**
+ * Component type for custom InputAutocomplete. Use with createComponentSpec when
+ * registering a custom InputAutocomplete in components.
+ */
+export type InputAutocompleteComponentType = React.ComponentType<InputAutocompleteProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+function normalizeOptions(
+  options: InputAutocompleteOption[] | string[] = []
+): { value: string; label: string }[] {
+  return options.map((opt) =>
+    typeof opt === 'string' ? { value: opt, label: opt } : { value: opt.value, label: opt.label ?? opt.value }
+  );
+}
+
+/**
+ * Default autocomplete input component (uses native datalist).
+ */
+export const DefaultInputAutocomplete = React.forwardRef<
+  HTMLInputElement,
+  InputAutocompleteProps
+>(({ label, name, value, onChange, placeholder, options = [], ...rest }, ref) => {
+  const listId = `${name}-datalist`;
+  const normalizedOptions = normalizeOptions(options);
+
+  return (
+    <div style={wrapperStyle}>
+      {label && (
+        <label htmlFor={name} style={labelStyle}>
+          {label}
+        </label>
+      )}
+      <input
+        ref={ref}
+        id={name}
+        name={name}
+        data-test-id={name}
+        list={listId}
+        value={value ?? ''}
+        placeholder={placeholder}
+        onChange={(e) => onChange?.(e.target.value)}
+        style={inputStyle}
+        {...rest}
+      />
+      <datalist id={listId}>
+        {normalizedOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </datalist>
+    </div>
+  );
+});
+
+DefaultInputAutocomplete.displayName = 'DefaultInputAutocomplete';
diff --git a/packages/factories/react/src/components/DefaultInputCheckbox.tsx b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
new file mode 100644
index 0000000..9690f4a
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
@@ -0,0 +1,64 @@
+/**
+ * Default InputCheckbox Component
+ *
+ * Built-in checkbox input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputCheckbox component.
+ * Use this type when customizing InputCheckbox via components.InputCheckbox.
+ */
+export interface InputCheckboxProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'checked' | 'type'
+  > {
+  name: string;
+  value?: boolean;
+  onChange?: (value: boolean) => void;
+  label?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom InputCheckbox. Use with createComponentSpec when
+ * registering a custom InputCheckbox in components.
+ */
+export type InputCheckboxComponentType = React.ComponentType<InputCheckboxProps>;
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+const labelStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+};
+
+/**
+ * Default checkbox input component.
+ */
+export const DefaultInputCheckbox = React.forwardRef<HTMLInputElement, InputCheckboxProps>(
+  ({ label, name, value, onChange, children, ...rest }, ref) => {
+    return (
+      <div style={wrapperStyle}>
+        <label style={labelStyle}>
+          <input
+            ref={ref}
+            type="checkbox"
+            name={name}
+            data-test-id={name}
+            checked={value ?? false}
+            onChange={(e) => onChange?.(e.target.checked)}
+            {...rest}
+          />
+          {label}
+        </label>
+        {children}
+      </div>
+    );
+  }
+);
+
+DefaultInputCheckbox.displayName = 'DefaultInputCheckbox';
diff --git a/packages/factories/react/src/components/DefaultInputDate.tsx b/packages/factories/react/src/components/DefaultInputDate.tsx
new file mode 100644
index 0000000..a569388
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputDate.tsx
@@ -0,0 +1,73 @@
+/**
+ * Default InputDate Component
+ *
+ * Built-in date input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputDate component.
+ * Use this type when customizing InputDate via components.InputDate.
+ */
+export interface InputDateProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'type'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+}
+
+/**
+ * Component type for custom InputDate. Use with createComponentSpec when
+ * registering a custom InputDate in components.
+ */
+export type InputDateComponentType = React.ComponentType<InputDateProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default date input component.
+ */
+export const DefaultInputDate = React.forwardRef<HTMLInputElement, InputDateProps>(
+  ({ label, name, value, onChange, ...rest }, ref) => {
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label htmlFor={name} style={labelStyle}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          type="date"
+          id={name}
+          name={name}
+          data-test-id={name}
+          value={value ?? ''}
+          onChange={(e) => onChange?.(e.target.value)}
+          style={inputStyle}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
+
+DefaultInputDate.displayName = 'DefaultInputDate';
diff --git a/packages/factories/react/src/components/DefaultInputNumber.tsx b/packages/factories/react/src/components/DefaultInputNumber.tsx
new file mode 100644
index 0000000..1e4b91d
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputNumber.tsx
@@ -0,0 +1,82 @@
+/**
+ * Default InputNumber Component
+ *
+ * Built-in number input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputNumber component.
+ * Use this type when customizing InputNumber via components.InputNumber.
+ */
+export interface InputNumberProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'type'
+  > {
+  name: string;
+  value?: number | string;
+  onChange?: (value: number | string) => void;
+  label?: string;
+  min?: number;
+  max?: number;
+  step?: number | string;
+}
+
+/**
+ * Component type for custom InputNumber. Use with createComponentSpec when
+ * registering a custom InputNumber in components.
+ */
+export type InputNumberComponentType = React.ComponentType<InputNumberProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default number input component.
+ */
+export const DefaultInputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
+  ({ label, name, value, onChange, placeholder, min, max, step, ...rest }, ref) => {
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label htmlFor={name} style={labelStyle}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          type="number"
+          id={name}
+          name={name}
+          data-test-id={name}
+          value={value ?? ''}
+          placeholder={placeholder}
+          min={min}
+          max={max}
+          step={step}
+          onChange={(e) =>
+            onChange?.(e.target.value ? Number(e.target.value) : '')
+          }
+          style={inputStyle}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
+
+DefaultInputNumber.displayName = 'DefaultInputNumber';
diff --git a/packages/factories/react/src/components/DefaultInputPhone.tsx b/packages/factories/react/src/components/DefaultInputPhone.tsx
new file mode 100644
index 0000000..3bd9d8d
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputPhone.tsx
@@ -0,0 +1,75 @@
+/**
+ * Default InputPhone Component
+ *
+ * Built-in phone input for forms (text input with type="tel").
+ * Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputPhone component.
+ * Use this type when customizing InputPhone via components.InputPhone.
+ */
+export interface InputPhoneProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'type'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+}
+
+/**
+ * Component type for custom InputPhone. Use with createComponentSpec when
+ * registering a custom InputPhone in components.
+ */
+export type InputPhoneComponentType = React.ComponentType<InputPhoneProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default phone input component (uses type="tel").
+ */
+export const DefaultInputPhone = React.forwardRef<HTMLInputElement, InputPhoneProps>(
+  ({ label, name, value, onChange, placeholder, ...rest }, ref) => {
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label htmlFor={name} style={labelStyle}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          type="tel"
+          id={name}
+          name={name}
+          data-test-id={name}
+          value={value ?? ''}
+          placeholder={placeholder}
+          onChange={(e) => onChange?.(e.target.value)}
+          style={inputStyle}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
+
+DefaultInputPhone.displayName = 'DefaultInputPhone';
diff --git a/packages/factories/react/src/components/DefaultInputSelect.tsx b/packages/factories/react/src/components/DefaultInputSelect.tsx
new file mode 100644
index 0000000..82145d4
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputSelect.tsx
@@ -0,0 +1,100 @@
+/**
+ * Default InputSelect Component
+ *
+ * Built-in select input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+export interface InputSelectOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Props passed to the InputSelect component.
+ * Use this type when customizing InputSelect via components.InputSelect.
+ */
+export interface InputSelectProps
+  extends Omit<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    'value' | 'onChange'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  placeholder?: string;
+  options?: InputSelectOption[];
+  children?: React.ReactNode;
+}
+
+/**
+ * Component type for custom InputSelect. Use with createComponentSpec when
+ * registering a custom InputSelect in components.
+ */
+export type InputSelectComponentType = React.ComponentType<InputSelectProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default select input component.
+ */
+export const DefaultInputSelect = React.forwardRef<HTMLSelectElement, InputSelectProps>(
+  (
+    {
+      label,
+      name,
+      value,
+      onChange,
+      options = [],
+      placeholder = 'Select...',
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label htmlFor={name} style={labelStyle}>
+            {label}
+          </label>
+        )}
+        <select
+          ref={ref}
+          id={name}
+          name={name}
+          data-test-id={name}
+          value={value ?? ''}
+          onChange={(e) => onChange?.(e.target.value)}
+          style={inputStyle}
+          {...rest}
+        >
+          <option value="">{placeholder}</option>
+          {options.map((opt: InputSelectOption) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        {children}
+      </div>
+    );
+  }
+);
+
+DefaultInputSelect.displayName = 'DefaultInputSelect';
diff --git a/packages/factories/react/src/components/DefaultInputText.tsx b/packages/factories/react/src/components/DefaultInputText.tsx
new file mode 100644
index 0000000..2afc71f
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputText.tsx
@@ -0,0 +1,73 @@
+/**
+ * Default InputText Component
+ *
+ * Built-in text input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputText component.
+ * Use this type when customizing InputText via components.InputText.
+ */
+export interface InputTextProps
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'type'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+}
+
+/**
+ * Component type for custom InputText. Use with createComponentSpec when
+ * registering a custom InputText in components.
+ */
+export type InputTextComponentType = React.ComponentType<InputTextProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default text input component.
+ */
+export const DefaultInputText = React.forwardRef<HTMLInputElement, InputTextProps>(
+  ({ label, name, value, onChange, placeholder, ...rest }, ref) => {
+    return (
+      <div style={wrapperStyle}>
+        {label && (
+          <label htmlFor={name} style={labelStyle}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={name}
+          name={name}
+          data-test-id={name}
+          value={value ?? ''}
+          placeholder={placeholder}
+          onChange={(e) => onChange?.(e.target.value)}
+          style={inputStyle}
+          {...rest}
+        />
+      </div>
+    );
+  }
+);
+
+DefaultInputText.displayName = 'DefaultInputText';
diff --git a/packages/factories/react/src/components/DefaultInputTextarea.tsx b/packages/factories/react/src/components/DefaultInputTextarea.tsx
new file mode 100644
index 0000000..5d04c34
--- /dev/null
+++ b/packages/factories/react/src/components/DefaultInputTextarea.tsx
@@ -0,0 +1,77 @@
+/**
+ * Default InputTextarea Component
+ *
+ * Built-in textarea input for forms. Can be overridden via createComponentSpec.
+ */
+
+import React from 'react';
+
+/**
+ * Props passed to the InputTextarea component.
+ * Use this type when customizing InputTextarea via components.InputTextarea.
+ */
+export interface InputTextareaProps
+  extends Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'value' | 'onChange'
+  > {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  label?: string;
+  rows?: number;
+}
+
+/**
+ * Component type for custom InputTextarea. Use with createComponentSpec when
+ * registering a custom InputTextarea in components.
+ */
+export type InputTextareaComponentType = React.ComponentType<InputTextareaProps>;
+
+const inputStyle: React.CSSProperties = {
+  width: '100%',
+  padding: '8px',
+  border: '1px solid #ccc',
+  borderRadius: '4px',
+  fontFamily: 'inherit',
+};
+
+const labelStyle: React.CSSProperties = {
+  display: 'block',
+  marginBottom: '4px',
+  fontWeight: '500',
+};
+
+const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
+
+/**
+ * Default textarea input component.
+ */
+export const DefaultInputTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  InputTextareaProps
+>(({ label, name, value, onChange, placeholder, rows = 4, ...rest }, ref) => {
+  return (
+    <div style={wrapperStyle}>
+      {label && (
+        <label htmlFor={name} style={labelStyle}>
+          {label}
+        </label>
+      )}
+      <textarea
+        ref={ref}
+        id={name}
+        name={name}
+        data-test-id={name}
+        value={value ?? ''}
+        placeholder={placeholder}
+        rows={rows}
+        onChange={(e) => onChange?.(e.target.value)}
+        style={inputStyle}
+        {...rest}
+      />
+    </div>
+  );
+});
+
+DefaultInputTextarea.displayName = 'DefaultInputTextarea';
diff --git a/packages/factories/react/src/components/index.ts b/packages/factories/react/src/components/index.ts
index cae7259..4c5a5be 100644
--- a/packages/factories/react/src/components/index.ts
+++ b/packages/factories/react/src/components/index.ts
@@ -1,9 +1,26 @@
 /**
  * React Factory Components
- * 
+ *
  * Built-in components for the React form factory.
  */
 
 export * from './DefaultFormContainer';
 export * from './DefaultSubmitButton';
 export * from './DefaultFieldWrapper';
+
+// Input components
+export * from './DefaultInputText';
+export * from './DefaultInputSelect';
+export * from './DefaultInputCheckbox';
+export * from './DefaultInputDate';
+export * from './DefaultInputPhone';
+export * from './DefaultInputAutocomplete';
+export * from './DefaultInputTextarea';
+export * from './DefaultInputNumber';
+
+// Container components
+export * from './DefaultFormField';
+export * from './DefaultFormSectionContainer';
+export * from './DefaultFormSectionTitle';
+export * from './DefaultFormSectionGroup';
+export * from './DefaultFormSectionGroupContainer';
diff --git a/packages/factories/react/src/form-factory.tsx b/packages/factories/react/src/form-factory.tsx
index dcf75b7..ae2a4ba 100644
--- a/packages/factories/react/src/form-factory.tsx
+++ b/packages/factories/react/src/form-factory.tsx
@@ -22,10 +22,23 @@ import { createDebugContext } from './utils/debug';
 import { createFieldRenderer } from './renderers/field-renderer';
 import formSchemaDefinition from '../../src/schemas/form-schema.json';
 import { ScheptaFormProvider } from './context/schepta-form-context';
-import { 
-  DefaultFormContainer, 
-  DefaultSubmitButton, 
+import {
+  DefaultFormContainer,
+  DefaultSubmitButton,
   DefaultFieldWrapper,
+  DefaultInputText,
+  DefaultInputSelect,
+  DefaultInputCheckbox,
+  DefaultInputDate,
+  DefaultInputPhone,
+  DefaultInputAutocomplete,
+  DefaultInputTextarea,
+  DefaultInputNumber,
+  DefaultFormField,
+  DefaultFormSectionContainer,
+  DefaultFormSectionTitle,
+  DefaultFormSectionGroup,
+  DefaultFormSectionGroupContainer,
   type SubmitButtonComponentType,
   type FieldWrapperType,
 } from './components';
@@ -47,6 +60,73 @@ setFactoryDefaultComponents({
     type: 'field-wrapper',
     factory: () => DefaultFieldWrapper,
   }),
+  // Input components
+  InputText: createComponentSpec({
+    id: 'InputText',
+    type: 'field',
+    factory: () => DefaultInputText,
+  }),
+  InputSelect: createComponentSpec({
+    id: 'InputSelect',
+    type: 'field',
+    factory: () => DefaultInputSelect,
+  }),
+  InputCheckbox: createComponentSpec({
+    id: 'InputCheckbox',
+    type: 'field',
+    factory: () => DefaultInputCheckbox,
+  }),
+  InputDate: createComponentSpec({
+    id: 'InputDate',
+    type: 'field',
+    factory: () => DefaultInputDate,
+  }),
+  InputPhone: createComponentSpec({
+    id: 'InputPhone',
+    type: 'field',
+    factory: () => DefaultInputPhone,
+  }),
+  InputAutocomplete: createComponentSpec({
+    id: 'InputAutocomplete',
+    type: 'field',
+    factory: () => DefaultInputAutocomplete,
+  }),
+  InputTextarea: createComponentSpec({
+    id: 'InputTextarea',
+    type: 'field',
+    factory: () => DefaultInputTextarea,
+  }),
+  InputNumber: createComponentSpec({
+    id: 'InputNumber',
+    type: 'field',
+    factory: () => DefaultInputNumber,
+  }),
+  // Container components
+  FormField: createComponentSpec({
+    id: 'FormField',
+    type: 'container',
+    factory: () => DefaultFormField,
+  }),
+  FormSectionContainer: createComponentSpec({
+    id: 'FormSectionContainer',
+    type: 'container',
+    factory: () => DefaultFormSectionContainer,
+  }),
+  FormSectionTitle: createComponentSpec({
+    id: 'FormSectionTitle',
+    type: 'content',
+    factory: () => DefaultFormSectionTitle,
+  }),
+  FormSectionGroup: createComponentSpec({
+    id: 'FormSectionGroup',
+    type: 'container',
+    factory: () => DefaultFormSectionGroup,
+  }),
+  FormSectionGroupContainer: createComponentSpec({
+    id: 'FormSectionGroupContainer',
+    type: 'container',
+    factory: () => DefaultFormSectionGroupContainer,
+  }),
 });
 
 /**
diff --git a/packages/factories/react/src/index.ts b/packages/factories/react/src/index.ts
index 4d8ed30..99e6cc2 100644
--- a/packages/factories/react/src/index.ts
+++ b/packages/factories/react/src/index.ts
@@ -26,6 +26,49 @@ export {
   type SubmitButtonComponentType,
   type FieldWrapperProps,
   type FieldWrapperType,
+  // Input components
+  DefaultInputText,
+  DefaultInputSelect,
+  DefaultInputCheckbox,
+  DefaultInputDate,
+  DefaultInputPhone,
+  DefaultInputAutocomplete,
+  DefaultInputTextarea,
+  DefaultInputNumber,
+  type InputTextProps,
+  type InputTextComponentType,
+  type InputSelectProps,
+  type InputSelectOption,
+  type InputSelectComponentType,
+  type InputCheckboxProps,
+  type InputCheckboxComponentType,
+  type InputDateProps,
+  type InputDateComponentType,
+  type InputPhoneProps,
+  type InputPhoneComponentType,
+  type InputAutocompleteProps,
+  type InputAutocompleteOption,
+  type InputAutocompleteComponentType,
+  type InputTextareaProps,
+  type InputTextareaComponentType,
+  type InputNumberProps,
+  type InputNumberComponentType,
+  // Container components
+  DefaultFormField,
+  DefaultFormSectionContainer,
+  DefaultFormSectionTitle,
+  DefaultFormSectionGroup,
+  DefaultFormSectionGroupContainer,
+  type FormFieldProps,
+  type FormFieldComponentType,
+  type FormSectionContainerProps,
+  type FormSectionContainerComponentType,
+  type FormSectionTitleProps,
+  type FormSectionTitleComponentType,
+  type FormSectionGroupProps,
+  type FormSectionGroupComponentType,
+  type FormSectionGroupContainerProps,
+  type FormSectionGroupContainerComponentType,
 } from './components';
 
 // Context and hooks for form state management