diff --git a/packages/main/src/components/Form/Form.test.tsx b/packages/main/src/components/Form/Form.test.tsx
index 3deca963789..ff66d8ef3ad 100644
--- a/packages/main/src/components/Form/Form.test.tsx
+++ b/packages/main/src/components/Form/Form.test.tsx
@@ -88,5 +88,11 @@ describe('Create a Form', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  createPassThroughPropsTest(Form);
+  createPassThroughPropsTest(Form, {
+    children: (
+      <FormItem labelText={'item 1'}>
+        <Input type={InputType.Text}></Input>
+      </FormItem>
+    )
+  });
 });
diff --git a/packages/main/src/components/Form/FormGroup/index.tsx b/packages/main/src/components/Form/FormGroup/index.tsx
index 640841ee9ab..35a73a32ca7 100644
--- a/packages/main/src/components/Form/FormGroup/index.tsx
+++ b/packages/main/src/components/Form/FormGroup/index.tsx
@@ -6,12 +6,12 @@ import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React, { Children, FC, forwardRef, ReactNode, ReactNodeArray, Ref } from 'react';
 import { createUseStyles } from 'react-jss';
+import { CommonProps } from '../../../interfaces/CommonProps';
 import { styles } from '../Form.jss';
 
-export interface FormGroupProps {
+export interface FormGroupProps extends CommonProps {
   title?: string;
   children: ReactNode | ReactNodeArray;
-  type?: string;
 }
 
 const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { name: 'FormGroup' });
@@ -20,12 +20,12 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
  * <code>import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';</code>
  */
 const FormGroup: FC<FormGroupProps> = forwardRef((props: FormGroupProps, ref: Ref<HTMLDivElement>) => {
-  const { title, children } = props;
+  const { title, children, tooltip, style, className, slot } = props;
 
   const classes = useStyles();
 
   return (
-    <div ref={ref}>
+    <div ref={ref} style={style} className={className} title={tooltip} slot={slot}>
       {title && (
         <Title level={TitleLevel.H5} className={classes.formPaddingBottom}>
           {title}
@@ -49,8 +49,6 @@ const FormGroup: FC<FormGroupProps> = forwardRef((props: FormGroupProps, ref: Re
   );
 });
 
-FormGroup.defaultProps = {
-  type: 'formGroup'
-};
+FormGroup.displayName = 'FormGroup';
 
 export { FormGroup };
diff --git a/packages/main/src/components/Form/FormItem/index.tsx b/packages/main/src/components/Form/FormItem/index.tsx
index f151246b840..bee239c71a7 100644
--- a/packages/main/src/components/Form/FormItem/index.tsx
+++ b/packages/main/src/components/Form/FormItem/index.tsx
@@ -2,12 +2,12 @@ import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/Curren
 import { Label } from '@ui5/webcomponents-react/lib/Label';
 import React, { FC, forwardRef, ReactNode, ReactNodeArray, Ref, useContext, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
+import { CommonProps } from '../../../interfaces/CommonProps';
 import { styles } from '../Form.jss';
 
-export interface FormItemProps {
+export interface FormItemProps extends CommonProps {
   labelText?: string;
   children: ReactNode | ReactNodeArray;
-  type?: string;
 }
 
 const calculateWidth = (rate) => {
@@ -20,14 +20,11 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
  * <code>import { FormItem } from '@ui5/webcomponents-react/lib/FormItem';</code>
  */
 const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<HTMLDivElement>) => {
-  const { labelText, children } = props;
+  const { labelText, children, tooltip, style, className, slot } = props;
 
   const currentRange = useContext(CurrentViewportRangeContext);
 
   const classes = useStyles();
-  const topDivClass = classes.formItemTopDiv;
-  const labelClass = classes.formLabel;
-  const elementClass = classes.formElement;
 
   const memoizedStyles = useMemo(() => {
     let labelWidth;
@@ -55,7 +52,8 @@ const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<H
 
     return {
       topDivStyle: {
-        display: display
+        display: display,
+        ...style
       },
       labelStyle: {
         width: labelWidth,
@@ -65,24 +63,25 @@ const FormItem: FC<FormItemProps> = forwardRef((props: FormItemProps, ref: Ref<H
         width: elementWidth
       }
     };
-  }, [children, currentRange]);
+  }, [children, currentRange, style]);
+
+  let classNames = `${classes.formItemTopDiv}`;
+  if (className) {
+    classNames += ` ${className}`;
+  }
 
   return (
-    <div ref={ref}>
-      <div style={memoizedStyles.topDivStyle} className={topDivClass}>
-        <Label style={memoizedStyles.labelStyle} className={labelClass}>
-          {labelText ? labelText : ''}
-        </Label>
-        <div style={memoizedStyles.elementStyle} className={elementClass}>
-          {children}
-        </div>
+    <div ref={ref} style={memoizedStyles.topDivStyle} className={classNames} title={tooltip} slot={slot}>
+      <Label style={memoizedStyles.labelStyle} className={classes.formLabel}>
+        {labelText ? labelText : ''}
+      </Label>
+      <div style={memoizedStyles.elementStyle} className={classes.formElement}>
+        {children}
       </div>
     </div>
   );
 });
 
-FormItem.defaultProps = {
-  type: 'formItem'
-};
+FormItem.displayName = 'FormItem';
 
 export { FormItem };
diff --git a/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap b/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap
index 20304834458..4a5b6d61e08 100644
--- a/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap
+++ b/packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap
@@ -24,58 +24,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -110,58 +106,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -202,58 +194,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -276,58 +264,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -368,58 +352,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 16%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 16%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 83%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 83%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 16%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 16%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 83%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 83%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -442,58 +422,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 16%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 16%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 83%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 83%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 16%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 16%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 83%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 83%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -534,58 +510,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: block;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 100%; justify-content: flex-start;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: block;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 100%; justify-content: flex-start;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 100%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 100%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: block;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 100%; justify-content: flex-start;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: block;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 100%; justify-content: flex-start;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 100%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 100%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -608,58 +580,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: block;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 100%; justify-content: flex-start;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: block;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 100%; justify-content: flex-start;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 100%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 100%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: block;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 100%; justify-content: flex-start;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: block;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 100%; justify-content: flex-start;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 100%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 100%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -700,58 +668,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
@@ -774,58 +738,54 @@ Array [
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 1
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 1
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Text"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Text"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
           <div
             class="FormGroup--formGroupStyle-"
           >
-            <div>
+            <div
+              class="FormItem--formItemTopDiv-"
+              style="display: flex;"
+            >
+              <ui5-label
+                class="FormItem--formLabel-"
+                for=""
+                style="width: 33%; justify-content: flex-end;"
+              >
+                item 2
+              </ui5-label>
               <div
-                class="FormItem--formItemTopDiv-"
-                style="display: flex;"
-              >
-                <ui5-label
-                  class="FormItem--formLabel-"
-                  for=""
-                  style="width: 33%; justify-content: flex-end;"
-                >
-                  item 2
-                </ui5-label>
-                <div
-                  class="FormItem--formElement-"
-                  style="width: 66%;"
-                >
-                  <ui5-input
-                    class=""
-                    type="Number"
-                    value=""
-                    value-state="None"
-                  />
-                </div>
+                class="FormItem--formElement-"
+                style="width: 66%;"
+              >
+                <ui5-input
+                  class=""
+                  type="Number"
+                  value=""
+                  value-state="None"
+                />
               </div>
             </div>
           </div>
diff --git a/packages/main/src/components/Form/index.tsx b/packages/main/src/components/Form/index.tsx
index 1327838d6f3..425419c3e4f 100644
--- a/packages/main/src/components/Form/index.tsx
+++ b/packages/main/src/components/Form/index.tsx
@@ -1,20 +1,20 @@
 import { usePassThroughHtmlProps } from '@ui5/webcomponents-react-base/lib/usePassThroughHtmlProps';
 import { useViewportRange } from '@ui5/webcomponents-react-base/lib/useViewportRange';
 import { CurrentViewportRangeContext } from '@ui5/webcomponents-react/lib/CurrentViewportRangeContext';
+import { FormGroup } from '@ui5/webcomponents-react/lib/FormGroup';
 import { Grid } from '@ui5/webcomponents-react/lib/Grid';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
-import React, { FC, forwardRef, ReactElement, ReactNode, ReactNodeArray, Ref, useMemo } from 'react';
+import React, { FC, forwardRef, ReactElement, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { styles } from './Form.jss';
-import { FormGroup } from './FormGroup';
 
 export interface FormPropTypes extends CommonProps {
   /**
    * Components that are placed into Form.
    */
-  children: ReactNode | ReactNodeArray;
+  children: ReactElement<unknown> | Array<ReactElement<unknown>>;
   /**
    * Form title
    */
@@ -27,7 +27,7 @@ const useStyles = createUseStyles<keyof ReturnType<typeof styles>>(styles, { nam
  * <code>import { Form } from '@ui5/webcomponents-react/lib/Form';</code>
  */
 const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLDivElement>) => {
-  const { title, children } = props;
+  const { title, children, className, slot, style, tooltip } = props;
 
   const classes = useStyles();
   const currentRange = useViewportRange('StdExt');
@@ -40,10 +40,11 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
     if (Array.isArray(children)) {
       const ungroupedItems = [];
       formGroups = [];
-      children.forEach((child) => {
-        if ((child as ReactElement).props.type === 'formItem') {
+      children.forEach((child: any) => {
+        console.log(child);
+        if (child.type.displayName === 'FormItem') {
           ungroupedItems.push(child);
-        } else if ((child as ReactElement).props.type === 'formGroup') {
+        } else if (child.type.displayName === 'FormGroup') {
           formGroups.push(child as ReactElement);
         }
       });
@@ -77,15 +78,20 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
           <div className={classes.formTitlePaddingBottom} />
         </>
       )}
-      <Grid ref={ref} children={formGroups} defaultSpan={'XL6 L12 M12 S12'} {...passThroughProps} />
+      <Grid
+        ref={ref}
+        children={formGroups}
+        defaultSpan={'XL6 L12 M12 S12'}
+        className={className}
+        slot={slot}
+        style={style}
+        tooltip={tooltip}
+        {...passThroughProps}
+      />
     </CurrentViewportRangeContext.Provider>
   );
 });
 
-Form.defaultProps = {
-  children: [],
-  title: null
-};
 Form.displayName = 'Form';
 
 export { Form };