diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
index 596b89c4e5d..335759e0ce6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
@@ -11,7 +11,7 @@ export const SectionDemo = () => (
     {
       /* jsx */ `
 <Section>
-	<P>Visual DNB Section: <Anchor href="#">default</Anchor></P>
+	<P space={0}>Visual DNB Section: <Anchor href="#">default</Anchor></P>
 </Section>
 `
     }
@@ -22,7 +22,7 @@ export const SectionDemoSpacing = () => (
   <ComponentBox hideCode data-visual-test="section-spacing">
     {
       /* jsx */ `
-<Section spacing="large">
+<Section spacing>
   <P space={0}>Visual DNB Section: <Anchor href="#">default with spacing</Anchor></P>
 </Section>
 `
@@ -34,7 +34,7 @@ export const SectionDemoWhite = () => (
   <ComponentBox hideCode data-visual-test="section-white">
     {
       /* jsx */ `
-<Section spacing="true" style_type="white">
+<Section spacing="large" style_type="white">
   <P space={0}>Visual DNB Section: <Anchor href="#">white</Anchor></P>
 </Section>
 `
@@ -46,7 +46,7 @@ export const SectionDemoDivider = () => (
   <ComponentBox hideCode data-visual-test="section-divider">
     {
       /* jsx */ `
-<Section spacing="true" style_type="divider">
+<Section spacing="medium" style_type="divider">
   <P space={0}>Visual DNB Section: <Anchor href="#">divider</Anchor></P>
 </Section>
 `
@@ -58,7 +58,7 @@ export const SectionDemoMintGreen = () => (
   <ComponentBox hideCode data-visual-test="section-mint-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="mint-green">
+<Section spacing="small" style_type="mint-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">mint-green</Anchor></P>
 </Section>
 `
@@ -70,7 +70,7 @@ export const SectionDemoSeaGreen = () => (
   <ComponentBox hideCode data-visual-test="section-sea-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="sea-green">
+<Section spacing="large" style_type="sea-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">sea-green</Anchor></P>
 </Section>
 `
@@ -82,7 +82,7 @@ export const SectionDemoEmeraldGreen = () => (
   <ComponentBox hideCode data-visual-test="section-emerald-green">
     {
       /* jsx */ `
-<Section spacing="true" style_type="emerald-green">
+<Section spacing="medium" style_type="emerald-green">
   <P space={0}>Visual DNB Section: <Anchor href="#">emerald-green</Anchor></P>
 </Section>
 `
@@ -94,7 +94,7 @@ export const SectionDemoLavender = () => (
   <ComponentBox data-visual-test="section-lavender">
     {
       /* jsx */ `
-<Section spacing="true" style_type="lavender">
+<Section spacing="small" style_type="lavender">
   <P space={0}>Visual DNB Section: <Anchor href="#">lavender</Anchor></P>
 </Section>
 `
@@ -106,7 +106,7 @@ export const SectionDemoBlack3 = () => (
   <ComponentBox data-visual-test="section-black-3">
     {
       /* jsx */ `
-<Section spacing="true" style_type="black-3">
+<Section spacing style_type="black-3">
   <P space={0}>Visual DNB Section: <Anchor href="#">black-3</Anchor></P>
 </Section>
 `
@@ -118,7 +118,7 @@ export const SectionDemoSandYellow = () => (
   <ComponentBox data-visual-test="section-sand-yellow">
     {
       /* jsx */ `
-<Section spacing="true" style_type="sand-yellow">
+<Section spacing style_type="sand-yellow">
   <P space={0}>Visual DNB Section: <Anchor href="#">sand-yellow</Anchor></P>
 </Section>
 `
@@ -130,7 +130,7 @@ export const SectionDemoPistachio = () => (
   <ComponentBox data-visual-test="section-pistachio">
     {
       /* jsx */ `
-<Section spacing="true" style_type="pistachio">
+<Section spacing style_type="pistachio">
   <P space={0}>Visual DNB Section: <Anchor href="#">pistachio</Anchor></P>
 </Section>
 `
@@ -142,7 +142,7 @@ export const SectionDemoFireRed = () => (
   <ComponentBox data-visual-test="section-fire-red">
     {
       /* jsx */ `
-<Section spacing="true" style_type="fire-red">
+<Section spacing style_type="fire-red">
   <P space={0}>Visual DNB Section: <Anchor href="#">fire-red</Anchor></P>
 </Section>
 `
@@ -154,7 +154,7 @@ export const SectionDemoFireRed8 = () => (
   <ComponentBox data-visual-test="section-fire-red-8">
     {
       /* jsx */ `
-<Section spacing="true" style_type="fire-red-8">
+<Section spacing style_type="fire-red-8">
   <P space={0}>Visual DNB Section: <Anchor href="#">fire-red-8</Anchor></P>
 </Section>
 `
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
index 31b1b43d8ca..29c638e0f31 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
@@ -4,12 +4,13 @@ showTabs: true
 
 ## Properties
 
-| Properties                                  | Description                                                                                                                                                                                                                                                            |
-| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `style_type`                                | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.                                                                                                                                                     |
-| `spacing`                                   | _(optional)_ will add the default spacing around the wrapped content. Use `spacing-large`, `spacing-medium` or `spacing-small`. Defaults to `false`. If `true`, then `spacing-default` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
-| `element`                                   | _(optional)_ define what HTML element should be used. Defaults to `<section>`.                                                                                                                                                                                         |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                  |
+| Properties                                  | Description                                                                                                                                                                                                                          |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `style_type`                                | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.                                                                                                                   |
+| `spacing`                                   | _(optional)_ will add the default spacing around the wrapped content. Use `large`, `medium` or `small`. Defaults to `false`. If `true`, then `large` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
+| `element`                                   | _(optional)_ define what HTML element should be used. Defaults to `<section>`.                                                                                                                                                       |
+| `inner_ref`                                 | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`.                                                                       |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                |
 
 ## Styles
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
index 468ca7be933..c09802226f8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
@@ -56,9 +56,9 @@ If you are able to provide the `data` to the Sidebar as well, it will use it dur
 
 The mode property is mandatory. It tells the component how it should behave.
 
-- [`strict`](/uilib/components/step-indicator#strict-mode)
-- [`loose`](/uilib/components/step-indicator#loose-mode)
-- [`static`](/uilib/components/step-indicator#static-mode)
+- [strict](/uilib/components/step-indicator#strict-mode)
+- [loose](/uilib/components/step-indicator#loose-mode)
+- [static](/uilib/components/step-indicator#static-mode)
 
 ### Strict mode
 
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
index 2a636a357c5..ff0fe52bf38 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
+++ b/packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames'
 // Components
 import { createSkeletonClass } from '../skeleton/SkeletonHelper'
 import { createSpacingClasses } from '../space/SpacingHelper'
-import Section from '../section/Section'
+import Section, { SectionStyleTypes } from '../section/Section'
 import Button from '../button/Button'
 
 // Shared
@@ -99,13 +99,13 @@ export interface BreadcrumbProps {
    * Use one of the Section component style types (style_type)
    * Default: transparent
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 
   /**
    * Use one of the Section component style types (style_type)
    * Default: pistachio
    */
-  collapsedStyleType?: string
+  collapsedStyleType?: SectionStyleTypes
 
   /**
    * Spacing around the breadcrumb
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
index 211785f32e8..da1366eeb65 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -918,9 +918,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                             className="dnb-dialog__navigation"
                           >
                             <Section
-                              class={null}
                               className="dnb-modal__header__bar dnb-dialog__navigation"
-                              element="section"
                               inner_ref={
                                 Object {
                                   "current": <section
@@ -974,7 +972,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                                   </section>,
                                 }
                               }
-                              spacing={null}
                               style_type="white"
                             >
                               <section
@@ -1166,12 +1163,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
                             title_class="dnb-dialog__title"
                           >
                             <Section
-                              class={null}
                               className="dnb-dialog__header"
-                              element="section"
                               id="dnb-modal-dialog_id-title"
-                              inner_ref={null}
-                              spacing={null}
                               style_type="white"
                             >
                               <section
diff --git a/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx b/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
index 2890f7a774d..57e99abb02a 100644
--- a/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
+++ b/packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
+import { SectionStyleTypes } from '../../Section'
 
 interface DialogBodyProps extends ModalInnerProps {
   /**
@@ -11,7 +12,7 @@ interface DialogBodyProps extends ModalInnerProps {
   /**
    * Color/Style of the dialog body
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 }
 
 export default function DialogBody({
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 32026e90415..16586997e4a 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -935,9 +935,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                           shadow_class="dnb-drawer__navigation--sticky"
                         >
                           <Section
-                            class={null}
                             className="dnb-modal__header__bar dnb-drawer__navigation"
-                            element="section"
                             inner_ref={
                               Object {
                                 "current": <section
@@ -991,7 +989,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                                 </section>,
                               }
                             }
-                            spacing={null}
                             style_type="white"
                           >
                             <section
@@ -1182,12 +1179,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
                           title_class="dnb-drawer__title"
                         >
                           <Section
-                            class={null}
                             className="dnb-drawer__header"
-                            element="section"
                             id="dnb-modal-drawer_id-title"
-                            inner_ref={null}
-                            spacing={null}
                             style_type="white"
                           >
                             <section
diff --git a/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx b/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
index b6ba0a150a1..76d0f8539df 100644
--- a/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
+++ b/packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
+import { SectionStyleTypes } from '../../Section'
 
 interface DrawerBodyProps extends ModalInnerProps {
   /**
@@ -11,7 +12,7 @@ interface DrawerBodyProps extends ModalInnerProps {
   /**
    * Color/Style of the drawer body
    */
-  styleType?: string
+  styleType?: SectionStyleTypes
 }
 
 export default function DrawerBody({
diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.js b/packages/dnb-eufemia/src/components/form-row/FormRow.js
index b850975243b..8c899637c23 100644
--- a/packages/dnb-eufemia/src/components/form-row/FormRow.js
+++ b/packages/dnb-eufemia/src/components/form-row/FormRow.js
@@ -18,6 +18,7 @@ import AlignmentHelper from '../../shared/AlignmentHelper'
 
 import Context from '../../shared/Context'
 import FormLabel from '../form-label/FormLabel'
+import Section from '../section/Section'
 import {
   spacingPropTypes,
   createSpacingClasses,
@@ -216,12 +217,6 @@ export default class FormRow extends React.PureComponent {
           `dnb-form-row__indent--${isTrue(indent) ? 'default' : indent}`,
         centered && 'dnb-form-row--centered',
         isNested && 'dnb-form-row--nested',
-        section_style ? `dnb-section dnb-section--${section_style}` : null,
-        section_spacing
-          ? `dnb-section--spacing-${
-              isTrue(section_spacing) ? 'default' : section_spacing
-            }`
-          : null,
         createSpacingClasses(props),
         className,
         _className
@@ -261,7 +256,12 @@ export default class FormRow extends React.PureComponent {
     return (
       <Context.Provider value={providerContext}>
         <Fieldset useFieldset={useFieldset}>
-          <div {...params}>
+          <Section
+            style_type={section_style || 'transparent'}
+            spacing={section_spacing}
+            element="div"
+            {...params}
+          >
             <AlignmentHelper />
 
             {label && (
@@ -302,7 +302,7 @@ export default class FormRow extends React.PureComponent {
                 {children}
               </div>
             )}
-          </div>
+          </Section>
         </Fieldset>
       </Context.Provider>
     )
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
index cf33ff02fc0..b876b56d03a 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
@@ -34,14 +34,16 @@ describe('FormRow component', () => {
   it('should have vertical direction class', () => {
     const Comp = mount(<Component {...props} direction="vertical" />)
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row--vertical')
+      Comp.find('.dnb-form-row').last().hasClass('dnb-form-row--vertical')
     ).toBe(true)
   })
 
   it('should have correct indent class', () => {
     const Comp = mount(<Component {...props} indent="large" />)
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
+      Comp.find('.dnb-form-row')
+        .last()
+        .hasClass('dnb-form-row__indent--large')
     ).toBe(true)
   })
 
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
index 7c4de9de0c4..83ab4fc5830 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -36,46 +36,53 @@ exports[`FormRow component have to match snapshot 1`] = `
     <fieldset
       className="dnb-form-row__fieldset"
     >
-      <div
-        className="dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row__indent--indent dnb-form-row--centered dnb-section dnb-section--section_style dnb-section--spacing-section_spacing"
+      <Section
+        className="dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row__indent--indent dnb-form-row--centered"
+        element="div"
+        spacing="section_spacing"
+        style_type="section_style"
       >
-        <AlignmentHelper
-          className={null}
-        >
-          <span
-            aria-hidden={true}
-            className="dnb-alignment-helper"
-          />
-        </AlignmentHelper>
-        <FormLabel
-          class={null}
-          className="dnb-form-row__label label_class"
-          disabled="disabled"
-          element="legend"
-          for_id={null}
-          id="label_id"
-          label_direction="horizontal"
-          skeleton="skeleton"
-          sr_only="label_sr_only"
-          text="label"
-          title={null}
-          vertical={null}
+        <div
+          className="dnb-section dnb-section--section_style dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row__indent--indent dnb-form-row--centered dnb-section--spacing-section_spacing"
         >
-          <legend
-            aria-disabled={true}
-            className="dnb-form-label dnb-form-row__label label_class"
-            disabled={true}
+          <AlignmentHelper
+            className={null}
+          >
+            <span
+              aria-hidden={true}
+              className="dnb-alignment-helper"
+            />
+          </AlignmentHelper>
+          <FormLabel
+            class={null}
+            className="dnb-form-row__label label_class"
+            disabled="disabled"
+            element="legend"
+            for_id={null}
             id="label_id"
+            label_direction="horizontal"
+            skeleton="skeleton"
+            sr_only="label_sr_only"
+            text="label"
+            title={null}
+            vertical={null}
           >
-            label
-          </legend>
-        </FormLabel>
-        <div
-          className="dnb-form-row__content dnb-form-row__content--indent_offset dnb-responsive-component"
-        >
-          children
+            <legend
+              aria-disabled={true}
+              className="dnb-form-label dnb-form-row__label label_class"
+              disabled={true}
+              id="label_id"
+            >
+              label
+            </legend>
+          </FormLabel>
+          <div
+            className="dnb-form-row__content dnb-form-row__content--indent_offset dnb-responsive-component"
+          >
+            children
+          </div>
         </div>
-      </div>
+      </Section>
     </fieldset>
   </Fieldset>
 </FormRow>
diff --git a/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js b/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
index a384d37413f..063806b875b 100644
--- a/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
+++ b/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
@@ -41,7 +41,7 @@ describe('FormSet component', () => {
       </Component>
     )
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row--vertical')
+      Comp.find('.dnb-form-row').last().hasClass('dnb-form-row--vertical')
     ).toBe(true)
   })
 
@@ -84,7 +84,9 @@ describe('FormSet component', () => {
       </Component>
     )
     expect(
-      Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
+      Comp.find('.dnb-form-row')
+        .last()
+        .hasClass('dnb-form-row__indent--large')
     ).toBe(true)
   })
 
diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
index 515bb28e108..a33ce47ebcb 100644
--- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
+++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap
@@ -699,21 +699,14 @@ button.dnb-button::-moz-focus-inner {
     z-index: -8; }
   .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -7; }
+  .dnb-section--spacing-x-small {
+    padding: var(--spacing-x-small) 0; }
   .dnb-section--spacing-small {
-    padding-top: var(--spacing-small);
-    padding-bottom: var(--spacing-small); }
+    padding: var(--spacing-small) 0; }
   .dnb-section--spacing-medium {
-    padding-top: var(--spacing-medium);
-    padding-bottom: var(--spacing-medium); }
-  .dnb-section--spacing, .dnb-section--spacing-default, .dnb-section--spacing-large {
-    padding-top: var(--spacing-large);
-    padding-bottom: var(--spacing-large); }
-  .dnb-section--spacing-x-large {
-    padding-top: var(--spacing-x-large);
-    padding-bottom: var(--spacing-xx-large); }
-  .dnb-section--spacing-xx-large {
-    padding-top: var(--spacing-xx-large);
-    padding-bottom: calc(var(--spacing-xx-large) + var(--spacing-small)); }
+    padding: var(--spacing-medium) 0; }
+  .dnb-section--spacing, .dnb-section--spacing-large {
+    padding: var(--spacing-large) 0; }
 
 .dnb-global-status {
   font-family: var(--font-family-default);
@@ -921,11 +914,7 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
           className="dnb-global-status__content"
         >
           <Section
-            class={null}
-            className={null}
             element="div"
-            inner_ref={null}
-            spacing={null}
             style_type="fire-red-8"
           >
             <div
@@ -1157,11 +1146,8 @@ exports[`GlobalStatus snapshot have to match component snapshot 1`] = `
                 </Button>
               </p>
               <Section
-                class={null}
                 className="dnb-global-status__message"
                 element="div"
-                inner_ref={null}
-                spacing={null}
                 style_type="fire-red-8"
               >
                 <div
@@ -1281,11 +1267,7 @@ Array [
             className="dnb-global-status__content"
           >
             <Section
-              class={null}
-              className={null}
               element="div"
-              inner_ref={null}
-              spacing={null}
               style_type="fire-red-8"
             >
               <div
@@ -1517,11 +1499,8 @@ Array [
                   </Button>
                 </p>
                 <Section
-                  class={null}
                   className="dnb-global-status__message"
                   element="div"
-                  inner_ref={null}
-                  spacing={null}
                   style_type="fire-red-8"
                 >
                   <div
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
index 0824a284331..e9be771ddfb 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -910,9 +910,7 @@ exports[`Modal component have to match snapshot 1`] = `
                           className="dnb-dialog__navigation"
                         >
                           <Section
-                            class={null}
                             className="dnb-modal__header__bar dnb-dialog__navigation dnb-dialog__navigation"
-                            element="section"
                             inner_ref={
                               Object {
                                 "current": <section
@@ -966,7 +964,6 @@ exports[`Modal component have to match snapshot 1`] = `
                                 </section>,
                               }
                             }
-                            spacing={null}
                             style_type="white"
                           >
                             <section
@@ -1158,12 +1155,8 @@ exports[`Modal component have to match snapshot 1`] = `
                           title_class="dnb-dialog__title"
                         >
                           <Section
-                            class={null}
                             className="dnb-dialog__header dnb-dialog__header"
-                            element="section"
                             id="dnb-modal-modal_id-title"
-                            inner_ref={null}
-                            spacing={null}
                             style_type="white"
                           >
                             <section
diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
index fadb415f27e..2430bd4ca48 100644
--- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -279,334 +279,341 @@ exports[`Radio group component have to match group snapshot 1`] = `
         <div
           className="dnb-form-row__fieldset"
         >
-          <div
+          <Section
             className="dnb-form-row"
+            element="div"
+            spacing={null}
+            style_type="transparent"
           >
-            <AlignmentHelper
-              className={null}
-            >
-              <span
-                aria-hidden={true}
-                className="dnb-alignment-helper"
-              />
-            </AlignmentHelper>
-            <FormLabel
-              class={null}
-              className="dnb-form-row__label"
-              disabled={null}
-              element="label"
-              for_id="group"
-              id="group-label"
-              label_direction={null}
-              skeleton={null}
-              sr_only={null}
-              text="Label"
-              title={null}
-              vertical={null}
+            <div
+              className="dnb-section dnb-section--transparent dnb-form-row"
             >
-              <label
-                className="dnb-form-label dnb-form-row__label"
-                disabled={false}
-                htmlFor="group"
+              <AlignmentHelper
+                className={null}
+              >
+                <span
+                  aria-hidden={true}
+                  className="dnb-alignment-helper"
+                />
+              </AlignmentHelper>
+              <FormLabel
+                class={null}
+                className="dnb-form-row__label"
+                disabled={null}
+                element="label"
+                for_id="group"
                 id="group-label"
+                label_direction={null}
+                skeleton={null}
+                sr_only={null}
+                text="Label"
+                title={null}
+                vertical={null}
               >
-                Label
-              </label>
-            </FormLabel>
-            <div
-              className="dnb-form-row__content dnb-form-row__content--default"
-            >
-              <span
-                aria-labelledby="group-label"
-                className="dnb-radio-group__shell"
-                id="group"
-                role="radiogroup"
+                <label
+                  className="dnb-form-label dnb-form-row__label"
+                  disabled={false}
+                  htmlFor="group"
+                  id="group-label"
+                >
+                  Label
+                </label>
+              </FormLabel>
+              <div
+                className="dnb-form-row__content dnb-form-row__content--default"
               >
-                <Radio
-                  attributes={null}
-                  checked={null}
-                  class={null}
-                  className={null}
-                  custom_element={null}
-                  custom_method={null}
-                  disabled={null}
-                  element="input"
-                  global_status_id={null}
-                  group={null}
-                  id="radio-1"
-                  label="Radio 1"
-                  label_position={null}
-                  label_sr_only={null}
-                  on_change={null}
-                  on_state_update={null}
-                  readOnly={false}
-                  size={null}
-                  skeleton={null}
-                  status={null}
-                  status_no_animation={null}
-                  status_props={null}
-                  status_state="error"
-                  suffix={null}
-                  value="first"
+                <span
+                  aria-labelledby="group-label"
+                  className="dnb-radio-group__shell"
+                  id="group"
+                  role="radiogroup"
                 >
-                  <span
-                    className="dnb-radio dnb-radio--label-position-right"
+                  <Radio
+                    attributes={null}
+                    checked={null}
+                    class={null}
+                    className={null}
+                    custom_element={null}
+                    custom_method={null}
+                    disabled={null}
+                    element="input"
+                    global_status_id={null}
+                    group={null}
+                    id="radio-1"
+                    label="Radio 1"
+                    label_position={null}
+                    label_sr_only={null}
+                    on_change={null}
+                    on_state_update={null}
+                    readOnly={false}
+                    size={null}
+                    skeleton={null}
+                    status={null}
+                    status_no_animation={null}
+                    status_props={null}
+                    status_state="error"
+                    suffix={null}
+                    value="first"
                   >
                     <span
-                      className="dnb-radio__order"
+                      className="dnb-radio dnb-radio--label-position-right"
                     >
                       <span
-                        className="dnb-radio__inner"
+                        className="dnb-radio__order"
                       >
-                        <AlignmentHelper
-                          className={null}
-                        >
-                          <span
-                            aria-hidden={true}
-                            className="dnb-alignment-helper"
-                          />
-                        </AlignmentHelper>
-                        <FormStatus
-                          attributes={null}
-                          class={null}
-                          className={null}
-                          global_status_id={null}
-                          icon="error"
-                          icon_size="medium"
-                          id="radio-1-form-status"
-                          label="Radio 1"
-                          no_animation={null}
-                          role={null}
-                          show={null}
-                          size="default"
-                          skeleton={null}
-                          state="error"
-                          status="error"
-                          stretch={null}
-                          text={null}
-                          text_id="radio-1-status"
-                          title={null}
-                          variant={null}
-                          width_element={null}
-                          width_selector="radio-1, radio-1-label"
-                        />
                         <span
-                          className="dnb-radio__row"
+                          className="dnb-radio__inner"
                         >
-                          <span
-                            className="dnb-radio__shell"
+                          <AlignmentHelper
+                            className={null}
                           >
-                            <input
-                              aria-checked={false}
-                              checked={false}
-                              className="dnb-radio__input"
-                              disabled={false}
-                              id="radio-1"
-                              name="group"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="radio"
-                              type="radio"
-                              value="first"
-                            />
-                            <span
-                              aria-hidden={true}
-                              className="dnb-radio__button"
-                            />
                             <span
                               aria-hidden={true}
-                              className="dnb-radio__focus"
+                              className="dnb-alignment-helper"
                             />
-                            <span
-                              aria-hidden={true}
-                              className="dnb-radio__dot"
-                            />
-                          </span>
-                          <FormLabel
+                          </AlignmentHelper>
+                          <FormStatus
+                            attributes={null}
                             class={null}
                             className={null}
-                            disabled={null}
-                            element="label"
-                            for_id="radio-1"
-                            id="radio-1-label"
-                            label_direction={null}
+                            global_status_id={null}
+                            icon="error"
+                            icon_size="medium"
+                            id="radio-1-form-status"
+                            label="Radio 1"
+                            no_animation={null}
+                            role={null}
+                            show={null}
+                            size="default"
                             skeleton={null}
-                            sr_only={null}
-                            text="Radio 1"
+                            state="error"
+                            status="error"
+                            stretch={null}
+                            text={null}
+                            text_id="radio-1-status"
                             title={null}
-                            vertical={null}
+                            variant={null}
+                            width_element={null}
+                            width_selector="radio-1, radio-1-label"
+                          />
+                          <span
+                            className="dnb-radio__row"
                           >
-                            <label
-                              className="dnb-form-label"
-                              disabled={false}
-                              htmlFor="radio-1"
+                            <span
+                              className="dnb-radio__shell"
+                            >
+                              <input
+                                aria-checked={false}
+                                checked={false}
+                                className="dnb-radio__input"
+                                disabled={false}
+                                id="radio-1"
+                                name="group"
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                role="radio"
+                                type="radio"
+                                value="first"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__button"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__focus"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__dot"
+                              />
+                            </span>
+                            <FormLabel
+                              class={null}
+                              className={null}
+                              disabled={null}
+                              element="label"
+                              for_id="radio-1"
                               id="radio-1-label"
+                              label_direction={null}
+                              skeleton={null}
+                              sr_only={null}
+                              text="Radio 1"
+                              title={null}
+                              vertical={null}
                             >
-                              Radio 1
-                            </label>
-                          </FormLabel>
+                              <label
+                                className="dnb-form-label"
+                                disabled={false}
+                                htmlFor="radio-1"
+                                id="radio-1-label"
+                              >
+                                Radio 1
+                              </label>
+                            </FormLabel>
+                          </span>
                         </span>
                       </span>
                     </span>
-                  </span>
-                </Radio>
-                <Radio
-                  attributes={null}
-                  checked={true}
-                  class={null}
-                  className={null}
-                  custom_element={null}
-                  custom_method={null}
-                  disabled={null}
-                  element="input"
-                  global_status_id={null}
-                  group={null}
-                  id="radio-2"
-                  label="Radio 2"
-                  label_position={null}
-                  label_sr_only={null}
-                  on_change={null}
-                  on_state_update={null}
-                  readOnly={false}
-                  size={null}
-                  skeleton={null}
-                  status={null}
-                  status_no_animation={null}
-                  status_props={null}
-                  status_state="error"
-                  suffix={null}
-                  value="second"
-                >
-                  <span
-                    className="dnb-radio dnb-radio--label-position-right"
+                  </Radio>
+                  <Radio
+                    attributes={null}
+                    checked={true}
+                    class={null}
+                    className={null}
+                    custom_element={null}
+                    custom_method={null}
+                    disabled={null}
+                    element="input"
+                    global_status_id={null}
+                    group={null}
+                    id="radio-2"
+                    label="Radio 2"
+                    label_position={null}
+                    label_sr_only={null}
+                    on_change={null}
+                    on_state_update={null}
+                    readOnly={false}
+                    size={null}
+                    skeleton={null}
+                    status={null}
+                    status_no_animation={null}
+                    status_props={null}
+                    status_state="error"
+                    suffix={null}
+                    value="second"
                   >
                     <span
-                      className="dnb-radio__order"
+                      className="dnb-radio dnb-radio--label-position-right"
                     >
                       <span
-                        className="dnb-radio__inner"
+                        className="dnb-radio__order"
                       >
-                        <AlignmentHelper
-                          className={null}
-                        >
-                          <span
-                            aria-hidden={true}
-                            className="dnb-alignment-helper"
-                          />
-                        </AlignmentHelper>
-                        <FormStatus
-                          attributes={null}
-                          class={null}
-                          className={null}
-                          global_status_id={null}
-                          icon="error"
-                          icon_size="medium"
-                          id="radio-2-form-status"
-                          label="Radio 2"
-                          no_animation={null}
-                          role={null}
-                          show={null}
-                          size="default"
-                          skeleton={null}
-                          state="error"
-                          status="error"
-                          stretch={null}
-                          text={null}
-                          text_id="radio-2-status"
-                          title={null}
-                          variant={null}
-                          width_element={null}
-                          width_selector="radio-2, radio-2-label"
-                        />
                         <span
-                          className="dnb-radio__row"
+                          className="dnb-radio__inner"
                         >
-                          <span
-                            className="dnb-radio__shell"
+                          <AlignmentHelper
+                            className={null}
                           >
-                            <input
-                              aria-checked={true}
-                              checked={true}
-                              className="dnb-radio__input"
-                              disabled={false}
-                              id="radio-2"
-                              name="group"
-                              onChange={[Function]}
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              role="radio"
-                              type="radio"
-                              value="second"
-                            />
-                            <span
-                              aria-hidden={true}
-                              className="dnb-radio__button"
-                            />
-                            <span
-                              aria-hidden={true}
-                              className="dnb-radio__focus"
-                            />
                             <span
                               aria-hidden={true}
-                              className="dnb-radio__dot"
+                              className="dnb-alignment-helper"
                             />
-                          </span>
-                          <FormLabel
+                          </AlignmentHelper>
+                          <FormStatus
+                            attributes={null}
                             class={null}
                             className={null}
-                            disabled={null}
-                            element="label"
-                            for_id="radio-2"
-                            id="radio-2-label"
-                            label_direction={null}
+                            global_status_id={null}
+                            icon="error"
+                            icon_size="medium"
+                            id="radio-2-form-status"
+                            label="Radio 2"
+                            no_animation={null}
+                            role={null}
+                            show={null}
+                            size="default"
                             skeleton={null}
-                            sr_only={null}
-                            text="Radio 2"
+                            state="error"
+                            status="error"
+                            stretch={null}
+                            text={null}
+                            text_id="radio-2-status"
                             title={null}
-                            vertical={null}
+                            variant={null}
+                            width_element={null}
+                            width_selector="radio-2, radio-2-label"
+                          />
+                          <span
+                            className="dnb-radio__row"
                           >
-                            <label
-                              className="dnb-form-label"
-                              disabled={false}
-                              htmlFor="radio-2"
+                            <span
+                              className="dnb-radio__shell"
+                            >
+                              <input
+                                aria-checked={true}
+                                checked={true}
+                                className="dnb-radio__input"
+                                disabled={false}
+                                id="radio-2"
+                                name="group"
+                                onChange={[Function]}
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                role="radio"
+                                type="radio"
+                                value="second"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__button"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__focus"
+                              />
+                              <span
+                                aria-hidden={true}
+                                className="dnb-radio__dot"
+                              />
+                            </span>
+                            <FormLabel
+                              class={null}
+                              className={null}
+                              disabled={null}
+                              element="label"
+                              for_id="radio-2"
                               id="radio-2-label"
+                              label_direction={null}
+                              skeleton={null}
+                              sr_only={null}
+                              text="Radio 2"
+                              title={null}
+                              vertical={null}
                             >
-                              Radio 2
-                            </label>
-                          </FormLabel>
+                              <label
+                                className="dnb-form-label"
+                                disabled={false}
+                                htmlFor="radio-2"
+                                id="radio-2-label"
+                              >
+                                Radio 2
+                              </label>
+                            </FormLabel>
+                          </span>
                         </span>
                       </span>
                     </span>
-                  </span>
-                </Radio>
-                <FormStatus
-                  attributes={null}
-                  class={null}
-                  className={null}
-                  global_status_id={null}
-                  icon="error"
-                  icon_size="medium"
-                  id="group-form-status"
-                  label="Label"
-                  no_animation={null}
-                  role={null}
-                  show={null}
-                  size="default"
-                  skeleton={null}
-                  state="error"
-                  status="error"
-                  stretch={null}
-                  text={null}
-                  text_id="group-status"
-                  title={null}
-                  variant={null}
-                  width_element={null}
-                  width_selector="group, group-label"
-                />
-              </span>
+                  </Radio>
+                  <FormStatus
+                    attributes={null}
+                    class={null}
+                    className={null}
+                    global_status_id={null}
+                    icon="error"
+                    icon_size="medium"
+                    id="group-form-status"
+                    label="Label"
+                    no_animation={null}
+                    role={null}
+                    show={null}
+                    size="default"
+                    skeleton={null}
+                    state="error"
+                    status="error"
+                    stretch={null}
+                    text={null}
+                    text_id="group-status"
+                    title={null}
+                    variant={null}
+                    width_element={null}
+                    width_selector="group, group-label"
+                  />
+                </span>
+              </div>
             </div>
-          </div>
+          </Section>
         </div>
       </Fieldset>
     </FormRow>
diff --git a/packages/dnb-eufemia/src/components/section/Section.d.ts b/packages/dnb-eufemia/src/components/section/Section.d.ts
deleted file mode 100644
index 3f03f052a81..00000000000
--- a/packages/dnb-eufemia/src/components/section/Section.d.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as React from 'react';
-export type SectionSpacing = string | boolean;
-export type SectionSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type SectionTop = string | number | boolean;
-export type SectionRight = string | number | boolean;
-export type SectionBottom = string | number | boolean;
-export type SectionLeft = string | number | boolean;
-export type SectionChildren =
-  | string
-  | ((...args: any[]) => any)
-  | React.ReactNode;
-
-export interface SectionProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.
-   */
-  style_type?: string;
-
-  /**
-   * Will add the default spacing around the wrapped content. Use `spacing-large`, `spacing-medium` or `spacing-small`. Defaults to `false`. If `true`, then `spacing-default` is used. Se the <a href="/uilib/usage/layout/spacing#spacing-helpers">available sizes</a>.
-   */
-  spacing?: SectionSpacing;
-
-  /**
-   * Define what HTML element should be used. Defaults to `<section>`.
-   */
-  element?: string;
-  inner_ref?: React.RefObject<any>;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: SectionSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: SectionTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: SectionRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: SectionBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: SectionLeft;
-  class?: string;
-  className?: string;
-  children?: SectionChildren;
-}
-export default class Section extends React.Component<SectionProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
diff --git a/packages/dnb-eufemia/src/components/section/Section.js b/packages/dnb-eufemia/src/components/section/Section.js
deleted file mode 100644
index e5a5a1febd0..00000000000
--- a/packages/dnb-eufemia/src/components/section/Section.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Web Section Component
- *
- */
-
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Context from '../../shared/Context'
-import {
-  isTrue,
-  registerElement,
-  validateDOMAttributes,
-  processChildren,
-  extendPropsWithContext,
-} from '../../shared/component-helper'
-import {
-  spacingPropTypes,
-  createSpacingClasses,
-} from '../space/SpacingHelper'
-
-export default class Section extends React.PureComponent {
-  static tagName = 'dnb-section'
-  static contextType = Context
-
-  static propTypes = {
-    style_type: PropTypes.string,
-    spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    element: PropTypes.string,
-    inner_ref: PropTypes.object,
-
-    ...spacingPropTypes,
-
-    class: PropTypes.string,
-    className: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.func,
-      PropTypes.node,
-    ]),
-  }
-
-  static defaultProps = {
-    style_type: null,
-    spacing: null,
-    element: 'section',
-    inner_ref: null,
-    class: null,
-
-    className: null,
-    children: null,
-  }
-
-  static enableWebComponent() {
-    registerElement(Section?.tagName, Section, Section.defaultProps)
-  }
-
-  static getContent(props) {
-    if (props.text) return props.text
-    return processChildren(props)
-  }
-
-  constructor(props) {
-    super(props)
-    this._ref = props.inner_ref || React.createRef()
-  }
-
-  render() {
-    // use only the props from context, who are available here anyway
-    const props = extendPropsWithContext(
-      this.props,
-      Section.defaultProps,
-      this.context.FormRow,
-      this.context.Section
-    )
-
-    const {
-      element,
-      style_type,
-      spacing,
-      className,
-      class: _className,
-
-      ...attributes
-    } = props
-
-    const content = Section.getContent(this.props)
-
-    const params = {
-      className: classnames(
-        'dnb-section',
-        `dnb-section--${style_type || 'mint-green-12'}`,
-        (isTrue(spacing) || spacing) &&
-          `dnb-section--spacing${
-            !/true|false/.test(String(spacing)) ? '-' + spacing : ''
-          }`,
-        createSpacingClasses(props),
-        className,
-        _className
-      ),
-      ...attributes,
-    }
-
-    // also used for code markup simulation
-    validateDOMAttributes(this.props, params)
-
-    const Element = element || 'section'
-
-    return (
-      <Element {...params} ref={this._ref}>
-        {content}
-      </Element>
-    )
-  }
-}
diff --git a/packages/dnb-eufemia/src/components/section/Section.tsx b/packages/dnb-eufemia/src/components/section/Section.tsx
new file mode 100644
index 00000000000..bb8aaf4d456
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/section/Section.tsx
@@ -0,0 +1,114 @@
+/**
+ * Web Section Component
+ *
+ */
+
+import React from 'react'
+import classnames from 'classnames'
+import Context from '../../shared/Context'
+import {
+  isTrue,
+  validateDOMAttributes,
+  extendPropsWithContext,
+} from '../../shared/component-helper'
+import { createSpacingClasses } from '../space/SpacingHelper'
+import { DynamicElement, ISpacingProps } from '../../shared/interfaces'
+
+export type SectionStyleTypes =
+  | 'divider'
+  | 'white'
+  | 'transparent'
+  | 'lavender'
+  | 'pistachio'
+  | 'emerald-green'
+  | 'sea-green'
+  | 'fire-red'
+  | 'fire-red-8'
+  | 'sand-yellow'
+  | 'black-3'
+  | 'mint-green'
+  | 'mint-green-12'
+
+export type SectionSpacing =
+  | boolean
+  | 'x-small'
+  | 'small'
+  | 'medium'
+  | 'large'
+
+export type SectionProps = {
+  /**
+   * To define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`.
+   */
+  style_type?: SectionStyleTypes
+
+  /**
+   * Will add the default spacing around the wrapped content. Use `large`, `medium` or `small`. Defaults to `false`. If `true`, then `large` is used. Se the <a href="/uilib/usage/layout/spacing#spacing-helpers">available sizes</a>.
+   */
+  spacing?: SectionSpacing
+
+  /**
+   * Define what HTML element should be used. Defaults to `<section>`.
+   */
+  element?: DynamicElement
+
+  inner_ref?: React.RefObject<HTMLElement>
+  className?: string
+  children?: React.ReactNode
+} & ISpacingProps &
+  React.HTMLProps<HTMLElement>
+
+const defaultProps = {
+  element: 'section',
+  style_type: null,
+  spacing: null,
+  inner_ref: null,
+  className: null,
+  children: null,
+}
+
+export default function Section(localProps: SectionProps) {
+  const context = React.useContext(Context)
+
+  // use only the props from context, who are available here anyway
+  const props = extendPropsWithContext(
+    localProps,
+    defaultProps,
+    context.FormRow,
+    context.Section
+  )
+
+  const {
+    element,
+    style_type,
+    spacing,
+    inner_ref,
+
+    className,
+    children,
+
+    ...attributes
+  } = props
+
+  const params = {
+    className: classnames(
+      'dnb-section',
+      `dnb-section--${style_type || 'mint-green-12'}`,
+      spacing &&
+        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,
+      createSpacingClasses(props),
+      className
+    ),
+    ...(attributes as Record<string, unknown>),
+  }
+
+  const internalRef = React.useRef<HTMLElement>()
+  const elementRef = inner_ref || internalRef
+  params['ref'] = elementRef
+
+  validateDOMAttributes(props, params)
+
+  const Element = element || 'section'
+
+  return <Element {...params}>{children}</Element>
+}
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.js b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.js
deleted file mode 100644
index af2beee0f23..00000000000
--- a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/**
- * Component Test
- *
- */
-
-import React from 'react'
-import {
-  mount,
-  fakeProps,
-  axeComponent,
-  toJson,
-  loadScss,
-} from '../../../core/jest/jestSetup'
-import Component from '../Section'
-
-const props = fakeProps(require.resolve('../Section'), {
-  optional: true,
-})
-props.style = null
-props.element = null
-props.inner_ref = null
-props.style_type = 'mint-green-12'
-
-describe('Section component', () => {
-  const Comp = mount(<Component {...props} />)
-
-  it('have to match snapshot', () => {
-    expect(toJson(Comp)).toMatchSnapshot()
-  })
-
-  it('should have correct styles', () => {
-    const Comp = mount(<Component {...props} style_type="divider" />)
-    expect(
-      Comp.find('section.dnb-section')
-        .first()
-        .hasClass('dnb-section--divider')
-    ).toBe(true)
-  })
-
-  it('should have correct spacing', () => {
-    const Comp = mount(<Component {...props} spacing="large" />)
-    expect(
-      Comp.find('section.dnb-section')
-        .first()
-        .hasClass('dnb-section--spacing-large')
-    ).toBe(true)
-  })
-
-  it('should have a div as the element tag', () => {
-    const Comp = mount(<Component {...props} element="div" />)
-    expect(Comp.find('div.dnb-section').exists()).toBe(true)
-  })
-
-  it('should validate with ARIA rules', async () => {
-    expect(await axeComponent(Comp)).toHaveNoViolations()
-  })
-})
-
-describe('Section scss', () => {
-  it('have to match snapshot', () => {
-    const scss = loadScss(require.resolve('../style/dnb-section.scss'))
-    expect(scss).toMatchSnapshot()
-  })
-  it('have to match default theme snapshot', () => {
-    const scss = loadScss(
-      require.resolve('../style/themes/dnb-section-theme-ui.scss')
-    )
-    expect(scss).toMatchSnapshot()
-  })
-})
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
new file mode 100644
index 00000000000..695f070a7c6
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/section/__tests__/Section.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * Component Test
+ *
+ */
+
+import React from 'react'
+import { render } from '@testing-library/react'
+import {
+  mount,
+  fakeProps,
+  axeComponent,
+  toJson,
+  loadScss,
+} from '../../../core/jest/jestSetup'
+import Section from '../Section'
+
+const props = fakeProps(require.resolve('../Section'), {
+  all: true,
+})
+props.style = null
+props.element = null
+props.inner_ref = null
+props.style_type = 'mint-green-12'
+
+describe('Section component', () => {
+  it('have to match snapshot', () => {
+    const Comp = mount(<Section {...props} />)
+    expect(toJson(Comp)).toMatchSnapshot()
+  })
+
+  it('should have correct styles', () => {
+    render(<Section style_type="divider" />)
+    expect(
+      document
+        .querySelector('section.dnb-section')
+        .classList.contains('dnb-section--divider')
+    ).toBe(true)
+  })
+
+  it('should have correct spacing', () => {
+    const hasSpacing = () =>
+      Array.from(document.querySelector('section.dnb-section').classList)
+        .filter((className) => className.includes('dnb-section--spacing'))
+        .join('')
+
+    const { rerender } = render(<Section />)
+    expect(hasSpacing()).toBe('')
+
+    rerender(<Section spacing="large" />)
+    expect(hasSpacing()).toBe('dnb-section--spacing-large')
+
+    rerender(<Section spacing="medium" />)
+    expect(hasSpacing()).toBe('dnb-section--spacing-medium')
+
+    rerender(<Section spacing="small" />)
+    expect(hasSpacing()).toBe('dnb-section--spacing-small')
+
+    rerender(<Section spacing />)
+    expect(hasSpacing()).toBe('dnb-section--spacing-large')
+  })
+
+  it('should have a div as the element tag', () => {
+    render(<Section element="div" />)
+    expect(document.querySelector('div.dnb-section')).toBeTruthy()
+  })
+
+  it('should validate with ARIA rules', async () => {
+    const Component = render(<Section {...props} />)
+    expect(await axeComponent(Component)).toHaveNoViolations()
+  })
+})
+
+describe('Section scss', () => {
+  it('have to match snapshot', () => {
+    const scss = loadScss(require.resolve('../style/dnb-section.scss'))
+    expect(scss).toMatchSnapshot()
+  })
+  it('have to match default theme snapshot', () => {
+    const scss = loadScss(
+      require.resolve('../style/themes/dnb-section-theme-ui.scss')
+    )
+    expect(scss).toMatchSnapshot()
+  })
+})
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap
similarity index 92%
rename from packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap
rename to packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap
index cd9dd8f5194..c1a34472d9d 100644
--- a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.js.snap
+++ b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap
@@ -2,19 +2,20 @@
 
 exports[`Section component have to match snapshot 1`] = `
 <Section
-  class="class"
-  className="className"
+  0={
+    Object {
+      "displayName": "Section",
+      "props": Object {},
+    }
+  }
   element={null}
   inner_ref={null}
-  spacing="spacing"
   style={null}
   style_type="mint-green-12"
 >
   <section
-    className="dnb-section dnb-section--mint-green-12 dnb-section--spacing-spacing className class"
-  >
-    children
-  </section>
+    className="dnb-section dnb-section--mint-green-12"
+  />
 </Section>
 `;
 
@@ -270,20 +271,13 @@ exports[`Section scss have to match snapshot 1`] = `
     z-index: -8; }
   .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section .dnb-section::after {
     z-index: -7; }
+  .dnb-section--spacing-x-small {
+    padding: var(--spacing-x-small) 0; }
   .dnb-section--spacing-small {
-    padding-top: var(--spacing-small);
-    padding-bottom: var(--spacing-small); }
+    padding: var(--spacing-small) 0; }
   .dnb-section--spacing-medium {
-    padding-top: var(--spacing-medium);
-    padding-bottom: var(--spacing-medium); }
-  .dnb-section--spacing, .dnb-section--spacing-default, .dnb-section--spacing-large {
-    padding-top: var(--spacing-large);
-    padding-bottom: var(--spacing-large); }
-  .dnb-section--spacing-x-large {
-    padding-top: var(--spacing-x-large);
-    padding-bottom: var(--spacing-xx-large); }
-  .dnb-section--spacing-xx-large {
-    padding-top: var(--spacing-xx-large);
-    padding-bottom: calc(var(--spacing-xx-large) + var(--spacing-small)); }
+    padding: var(--spacing-medium) 0; }
+  .dnb-section--spacing, .dnb-section--spacing-large {
+    padding: var(--spacing-large) 0; }
 "
 `;
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-default-section-1-b7c64.snap.png b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-default-section-1-b7c64.snap.png
index c148cefd612..5c8806d1275 100644
Binary files a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-default-section-1-b7c64.snap.png and b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-default-section-1-b7c64.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-divider-section-1-09379.snap.png b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-divider-section-1-09379.snap.png
index bda14298eb4..63a59c0e42b 100644
Binary files a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-divider-section-1-09379.snap.png and b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-divider-section-1-09379.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-emerald-green-section-1-a7bec.snap.png b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-emerald-green-section-1-a7bec.snap.png
index f7a2b29fddc..8c1aa454d34 100644
Binary files a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-emerald-green-section-1-a7bec.snap.png and b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-emerald-green-section-1-a7bec.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-lavender-section-1-bcea6.snap.png b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-lavender-section-1-bcea6.snap.png
index ae7b7c52774..5038e77e23e 100644
Binary files a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-lavender-section-1-bcea6.snap.png and b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-lavender-section-1-bcea6.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-mint-green-section-1-e9553.snap.png b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-mint-green-section-1-e9553.snap.png
index a51e50c84bd..d70cfb29da9 100644
Binary files a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-mint-green-section-1-e9553.snap.png and b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/section-screenshot-test-js-section-screenshot-have-to-match-mint-green-section-1-e9553.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/section/style/_section.scss b/packages/dnb-eufemia/src/components/section/style/_section.scss
index 7c4f0673bcc..dc45ce7d2a3 100644
--- a/packages/dnb-eufemia/src/components/section/style/_section.scss
+++ b/packages/dnb-eufemia/src/components/section/style/_section.scss
@@ -3,7 +3,7 @@
  *
  */
 
-@mixin SectionStyle() {
+.dnb-section {
   position: relative;
 
   // flow-root allows content to have margin top and bottom
@@ -51,37 +51,20 @@
     z-index: -7;
   }
 
+  &--spacing-x-small {
+    padding: var(--spacing-x-small) 0;
+  }
+
   &--spacing-small {
-    padding-top: var(--spacing-small);
-    padding-bottom: var(--spacing-small);
+    padding: var(--spacing-small) 0;
   }
 
   &--spacing-medium {
-    padding-top: var(--spacing-medium);
-    padding-bottom: var(--spacing-medium);
+    padding: var(--spacing-medium) 0;
   }
 
-  // spacing-default
   &--spacing,
-  &--spacing-default,
   &--spacing-large {
-    padding-top: var(--spacing-large);
-    padding-bottom: var(--spacing-large);
-  }
-
-  &--spacing-x-large {
-    padding-top: var(--spacing-x-large);
-    // larger than top
-    padding-bottom: var(--spacing-xx-large);
+    padding: var(--spacing-large) 0;
   }
-
-  &--spacing-xx-large {
-    padding-top: var(--spacing-xx-large);
-    // larger than top
-    padding-bottom: calc(var(--spacing-xx-large) + var(--spacing-small));
-  }
-}
-
-.dnb-section {
-  @include SectionStyle();
 }
diff --git a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
index 97fa379d367..9ccec7b3d6d 100644
--- a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss
@@ -5,7 +5,7 @@
 
 @import '../../../../style/elements/_anchor-mixins.scss';
 
-@mixin SectionTheme() {
+.dnb-section {
   &--divider {
     color: var(--color-black-80);
     &::after {
@@ -136,7 +136,3 @@
     }
   }
 }
-
-.dnb-section {
-  @include SectionTheme();
-}
diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
index b183a09bc0d..b894e7b23f2 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -560,235 +560,308 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
         <fieldset
           className="dnb-form-row__fieldset"
         >
-          <div
+          <Section
             className="dnb-form-row"
+            element="div"
+            spacing={null}
+            style_type="transparent"
           >
-            <AlignmentHelper
-              className={null}
-            >
-              <span
-                aria-hidden={true}
-                className="dnb-alignment-helper"
-              />
-            </AlignmentHelper>
-            <FormLabel
-              class={null}
-              className="dnb-form-row__label"
-              disabled={null}
-              element="legend"
-              for_id={null}
-              id="group-label"
-              label_direction={null}
-              skeleton={null}
-              sr_only={null}
-              text="Label"
-              title={null}
-              vertical={null}
-            >
-              <legend
-                className="dnb-form-label dnb-form-row__label"
-                disabled={false}
-                id="group-label"
-              >
-                Label
-              </legend>
-            </FormLabel>
             <div
-              className="dnb-form-row__content dnb-form-row__content--default"
+              className="dnb-section dnb-section--transparent dnb-form-row"
             >
-              <span
-                aria-labelledby="group-label"
-                className="dnb-toggle-button-group__shell"
-                id="group"
-                role="group"
+              <AlignmentHelper
+                className={null}
               >
-                <FormStatus
-                  attributes={null}
-                  class={null}
-                  className={null}
-                  global_status_id={null}
-                  icon="error"
-                  icon_size="medium"
-                  id="group-form-status"
-                  label="Label"
-                  no_animation={null}
-                  role={null}
-                  show={null}
-                  size="default"
-                  skeleton={null}
-                  state="error"
-                  status="error"
-                  stretch={null}
-                  text={null}
-                  text_id="group-status"
-                  title={null}
-                  variant={null}
-                  width_element={null}
-                  width_selector={null}
+                <span
+                  aria-hidden={true}
+                  className="dnb-alignment-helper"
                 />
+              </AlignmentHelper>
+              <FormLabel
+                class={null}
+                className="dnb-form-row__label"
+                disabled={null}
+                element="legend"
+                for_id={null}
+                id="group-label"
+                label_direction={null}
+                skeleton={null}
+                sr_only={null}
+                text="Label"
+                title={null}
+                vertical={null}
+              >
+                <legend
+                  className="dnb-form-label dnb-form-row__label"
+                  disabled={false}
+                  id="group-label"
+                >
+                  Label
+                </legend>
+              </FormLabel>
+              <div
+                className="dnb-form-row__content dnb-form-row__content--default"
+              >
                 <span
-                  className="dnb-toggle-button-group__children"
+                  aria-labelledby="group-label"
+                  className="dnb-toggle-button-group__shell"
+                  id="group"
+                  role="group"
                 >
-                  <ToggleButton
+                  <FormStatus
                     attributes={null}
                     class={null}
                     className={null}
-                    custom_element={null}
-                    custom_method={null}
-                    disabled={null}
                     global_status_id={null}
-                    icon={null}
-                    icon_position="right"
-                    icon_size={null}
-                    id="toggle-button-1"
-                    label={null}
-                    label_direction={null}
-                    label_sr_only={null}
-                    left_component={null}
-                    on_change={null}
-                    on_state_update={null}
-                    readOnly={false}
+                    icon="error"
+                    icon_size="medium"
+                    id="group-form-status"
+                    label="Label"
+                    no_animation={null}
+                    role={null}
+                    show={null}
+                    size="default"
                     skeleton={null}
-                    status={null}
-                    status_no_animation={null}
-                    status_props={null}
-                    status_state="error"
-                    suffix={null}
-                    text="ToggleButton 1"
+                    state="error"
+                    status="error"
+                    stretch={null}
+                    text={null}
+                    text_id="group-status"
                     title={null}
-                    value=""
-                    variant="radio"
+                    variant={null}
+                    width_element={null}
+                    width_selector={null}
+                  />
+                  <span
+                    className="dnb-toggle-button-group__children"
                   >
-                    <span
-                      className="dnb-toggle-button dnb-toggle-button--checked"
+                    <ToggleButton
+                      attributes={null}
+                      class={null}
+                      className={null}
+                      custom_element={null}
+                      custom_method={null}
+                      disabled={null}
+                      global_status_id={null}
+                      icon={null}
+                      icon_position="right"
+                      icon_size={null}
+                      id="toggle-button-1"
+                      label={null}
+                      label_direction={null}
+                      label_sr_only={null}
+                      left_component={null}
+                      on_change={null}
+                      on_state_update={null}
+                      readOnly={false}
+                      skeleton={null}
+                      status={null}
+                      status_no_animation={null}
+                      status_props={null}
+                      status_state="error"
+                      suffix={null}
+                      text="ToggleButton 1"
+                      title={null}
+                      value=""
+                      variant="radio"
                     >
                       <span
-                        className="dnb-toggle-button__inner"
+                        className="dnb-toggle-button dnb-toggle-button--checked"
                       >
-                        <FormStatus
-                          attributes={null}
-                          class={null}
-                          className={null}
-                          global_status_id={null}
-                          icon="error"
-                          icon_size="medium"
-                          id="toggle-button-1-form-status"
-                          label={null}
-                          no_animation={null}
-                          role={null}
-                          show={null}
-                          size="default"
-                          skeleton={null}
-                          state="error"
-                          status="error"
-                          stretch={null}
-                          text={null}
-                          text_id="toggle-button-1-status"
-                          title={null}
-                          variant={null}
-                          width_element={null}
-                          width_selector={null}
-                        />
                         <span
-                          className="dnb-toggle-button__shell"
+                          className="dnb-toggle-button__inner"
                         >
-                          <AlignmentHelper
+                          <FormStatus
+                            attributes={null}
+                            class={null}
                             className={null}
+                            global_status_id={null}
+                            icon="error"
+                            icon_size="medium"
+                            id="toggle-button-1-form-status"
+                            label={null}
+                            no_animation={null}
+                            role={null}
+                            show={null}
+                            size="default"
+                            skeleton={null}
+                            state="error"
+                            status="error"
+                            stretch={null}
+                            text={null}
+                            text_id="toggle-button-1-status"
+                            title={null}
+                            variant={null}
+                            width_element={null}
+                            width_selector={null}
+                          />
+                          <span
+                            className="dnb-toggle-button__shell"
                           >
-                            <span
-                              aria-hidden={true}
-                              className="dnb-alignment-helper"
-                            />
-                          </AlignmentHelper>
-                          <Button
-                            aria-pressed="true"
-                            bounding={null}
-                            class={null}
-                            className="dnb-toggle-button__button"
-                            custom_content={
+                            <AlignmentHelper
+                              className={null}
+                            >
                               <span
-                                className="dnb-toggle-button__component"
+                                aria-hidden={true}
+                                className="dnb-alignment-helper"
+                              />
+                            </AlignmentHelper>
+                            <Button
+                              aria-pressed="true"
+                              bounding={null}
+                              class={null}
+                              className="dnb-toggle-button__button"
+                              custom_content={
+                                <span
+                                  className="dnb-toggle-button__component"
+                                >
+                                  <Radio
+                                    attributes={null}
+                                    checked={true}
+                                    class={null}
+                                    className={null}
+                                    custom_element={null}
+                                    custom_method={null}
+                                    data-checked="true"
+                                    disabled={null}
+                                    element="span"
+                                    global_status_id={null}
+                                    group={null}
+                                    id="toggle-button-1-radio"
+                                    label={null}
+                                    label_position={null}
+                                    label_sr_only={null}
+                                    name={null}
+                                    on_change={null}
+                                    on_state_update={null}
+                                    readOnly={false}
+                                    size={null}
+                                    skeleton={null}
+                                    status={null}
+                                    status_no_animation={null}
+                                    status_props={null}
+                                    status_state="error"
+                                    suffix={null}
+                                    title={null}
+                                    value=""
+                                  />
+                                </span>
+                              }
+                              custom_element={null}
+                              custom_method={null}
+                              disabled={null}
+                              element={null}
+                              global_status_id={null}
+                              href={null}
+                              icon={null}
+                              icon_position="right"
+                              icon_size={null}
+                              id="toggle-button-1"
+                              innerRef={null}
+                              inner_ref={null}
+                              onClick={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              on_click={null}
+                              size={null}
+                              skeleton={null}
+                              status={null}
+                              status_no_animation={null}
+                              status_props={null}
+                              status_state="error"
+                              stretch={null}
+                              text="ToggleButton 1"
+                              title={null}
+                              to={null}
+                              tooltip={null}
+                              type={null}
+                              variant="secondary"
+                              wrap={null}
+                            >
+                              <button
+                                aria-pressed="true"
+                                className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
+                                disabled={false}
+                                id="toggle-button-1"
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                type="button"
                               >
-                                <Radio
-                                  attributes={null}
-                                  checked={true}
+                                <Content
+                                  aria-pressed="true"
+                                  bounding={null}
                                   class={null}
-                                  className={null}
+                                  className="dnb-toggle-button__button"
+                                  content="ToggleButton 1"
+                                  custom_content={
+                                    <span
+                                      className="dnb-toggle-button__component"
+                                    >
+                                      <Radio
+                                        attributes={null}
+                                        checked={true}
+                                        class={null}
+                                        className={null}
+                                        custom_element={null}
+                                        custom_method={null}
+                                        data-checked="true"
+                                        disabled={null}
+                                        element="span"
+                                        global_status_id={null}
+                                        group={null}
+                                        id="toggle-button-1-radio"
+                                        label={null}
+                                        label_position={null}
+                                        label_sr_only={null}
+                                        name={null}
+                                        on_change={null}
+                                        on_state_update={null}
+                                        readOnly={false}
+                                        size={null}
+                                        skeleton={null}
+                                        status={null}
+                                        status_no_animation={null}
+                                        status_props={null}
+                                        status_state="error"
+                                        suffix={null}
+                                        title={null}
+                                        value=""
+                                      />
+                                    </span>
+                                  }
                                   custom_element={null}
                                   custom_method={null}
-                                  data-checked="true"
                                   disabled={null}
-                                  element="span"
+                                  element={null}
                                   global_status_id={null}
-                                  group={null}
-                                  id="toggle-button-1-radio"
-                                  label={null}
-                                  label_position={null}
-                                  label_sr_only={null}
-                                  name={null}
-                                  on_change={null}
-                                  on_state_update={null}
-                                  readOnly={false}
+                                  href={null}
+                                  icon={null}
+                                  icon_position="right"
+                                  icon_size={null}
+                                  id="toggle-button-1"
+                                  innerRef={null}
+                                  inner_ref={null}
+                                  isIconOnly={false}
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  on_click={null}
                                   size={null}
-                                  skeleton={null}
+                                  skeleton={false}
                                   status={null}
                                   status_no_animation={null}
                                   status_props={null}
                                   status_state="error"
-                                  suffix={null}
+                                  stretch={null}
+                                  text="ToggleButton 1"
                                   title={null}
-                                  value=""
-                                />
-                              </span>
-                            }
-                            custom_element={null}
-                            custom_method={null}
-                            disabled={null}
-                            element={null}
-                            global_status_id={null}
-                            href={null}
-                            icon={null}
-                            icon_position="right"
-                            icon_size={null}
-                            id="toggle-button-1"
-                            innerRef={null}
-                            inner_ref={null}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            on_click={null}
-                            size={null}
-                            skeleton={null}
-                            status={null}
-                            status_no_animation={null}
-                            status_props={null}
-                            status_state="error"
-                            stretch={null}
-                            text="ToggleButton 1"
-                            title={null}
-                            to={null}
-                            tooltip={null}
-                            type={null}
-                            variant="secondary"
-                            wrap={null}
-                          >
-                            <button
-                              aria-pressed="true"
-                              className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
-                              disabled={false}
-                              id="toggle-button-1"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              onKeyUp={[Function]}
-                              type="button"
-                            >
-                              <Content
-                                aria-pressed="true"
-                                bounding={null}
-                                class={null}
-                                className="dnb-toggle-button__button"
-                                content="ToggleButton 1"
-                                custom_content={
+                                  to={null}
+                                  tooltip={null}
+                                  type={null}
+                                  variant="secondary"
+                                  wrap={null}
+                                >
                                   <span
                                     className="dnb-toggle-button__component"
                                   >
@@ -821,41 +894,207 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                                       suffix={null}
                                       title={null}
                                       value=""
-                                    />
+                                    >
+                                      <span
+                                        className="dnb-radio"
+                                      >
+                                        <span
+                                          className="dnb-radio__order"
+                                        >
+                                          <span
+                                            className="dnb-radio__inner"
+                                          >
+                                            <AlignmentHelper
+                                              className={null}
+                                            >
+                                              <span
+                                                aria-hidden={true}
+                                                className="dnb-alignment-helper"
+                                              />
+                                            </AlignmentHelper>
+                                            <FormStatus
+                                              attributes={null}
+                                              class={null}
+                                              className={null}
+                                              global_status_id={null}
+                                              icon="error"
+                                              icon_size="medium"
+                                              id="toggle-button-1-radio-form-status"
+                                              label={null}
+                                              no_animation={null}
+                                              role={null}
+                                              show={null}
+                                              size="default"
+                                              skeleton={null}
+                                              state="error"
+                                              status="error"
+                                              stretch={null}
+                                              text={null}
+                                              text_id="toggle-button-1-radio-status"
+                                              title={null}
+                                              variant={null}
+                                              width_element={null}
+                                              width_selector="toggle-button-1-radio, toggle-button-1-radio-label"
+                                            />
+                                            <span
+                                              className="dnb-radio__row"
+                                            >
+                                              <span
+                                                className="dnb-radio__shell"
+                                              >
+                                                <span
+                                                  checked={true}
+                                                  className="dnb-radio__input"
+                                                  data-checked="true"
+                                                  disabled={false}
+                                                  id="toggle-button-1-radio"
+                                                  name={null}
+                                                  onChange={[Function]}
+                                                  onClick={[Function]}
+                                                  onKeyDown={[Function]}
+                                                  value=""
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__button"
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__focus"
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__dot"
+                                                />
+                                              </span>
+                                            </span>
+                                          </span>
+                                        </span>
+                                      </span>
+                                    </Radio>
+                                  </span>
+                                  <span
+                                    aria-hidden={true}
+                                    className="dnb-button__alignment"
+                                    key="button-alignment"
+                                  >
+                                    ‌
                                   </span>
-                                }
-                                custom_element={null}
-                                custom_method={null}
-                                disabled={null}
-                                element={null}
+                                  <span
+                                    className="dnb-button__text dnb-skeleton--show-font"
+                                    key="button-text"
+                                  >
+                                    ToggleButton 1
+                                  </span>
+                                </Content>
+                              </button>
+                              <FormStatus
+                                attributes={null}
+                                class={null}
+                                className={null}
                                 global_status_id={null}
-                                href={null}
-                                icon={null}
-                                icon_position="right"
-                                icon_size={null}
-                                id="toggle-button-1"
-                                innerRef={null}
-                                inner_ref={null}
-                                isIconOnly={false}
-                                onClick={[Function]}
-                                onKeyDown={[Function]}
-                                onKeyUp={[Function]}
-                                on_click={null}
-                                size={null}
-                                skeleton={false}
-                                status={null}
-                                status_no_animation={null}
-                                status_props={null}
-                                status_state="error"
+                                icon="error"
+                                icon_size="medium"
+                                id="toggle-button-1-form-status"
+                                label="ToggleButton 1"
+                                no_animation={null}
+                                role={null}
+                                show={null}
+                                size="default"
+                                skeleton={null}
+                                state="error"
+                                status="error"
                                 stretch={null}
-                                text="ToggleButton 1"
+                                text={null}
+                                text_id="toggle-button-1-status"
                                 title={null}
-                                to={null}
-                                tooltip={null}
-                                type={null}
-                                variant="secondary"
-                                wrap={null}
-                              >
+                                variant={null}
+                                width_element={null}
+                                width_selector={null}
+                              />
+                            </Button>
+                          </span>
+                        </span>
+                      </span>
+                    </ToggleButton>
+                    <ToggleButton
+                      attributes={null}
+                      checked={true}
+                      class={null}
+                      className={null}
+                      custom_element={null}
+                      custom_method={null}
+                      disabled={null}
+                      global_status_id={null}
+                      icon={null}
+                      icon_position="right"
+                      icon_size={null}
+                      id="toggle-button-2"
+                      label={null}
+                      label_direction={null}
+                      label_sr_only={null}
+                      left_component={null}
+                      on_change={null}
+                      on_state_update={null}
+                      readOnly={false}
+                      skeleton={null}
+                      status={null}
+                      status_no_animation={null}
+                      status_props={null}
+                      status_state="error"
+                      suffix={null}
+                      text="ToggleButton 2"
+                      title={null}
+                      value=""
+                      variant="radio"
+                    >
+                      <span
+                        className="dnb-toggle-button dnb-toggle-button--checked"
+                      >
+                        <span
+                          className="dnb-toggle-button__inner"
+                        >
+                          <FormStatus
+                            attributes={null}
+                            class={null}
+                            className={null}
+                            global_status_id={null}
+                            icon="error"
+                            icon_size="medium"
+                            id="toggle-button-2-form-status"
+                            label={null}
+                            no_animation={null}
+                            role={null}
+                            show={null}
+                            size="default"
+                            skeleton={null}
+                            state="error"
+                            status="error"
+                            stretch={null}
+                            text={null}
+                            text_id="toggle-button-2-status"
+                            title={null}
+                            variant={null}
+                            width_element={null}
+                            width_selector={null}
+                          />
+                          <span
+                            className="dnb-toggle-button__shell"
+                          >
+                            <AlignmentHelper
+                              className={null}
+                            >
+                              <span
+                                aria-hidden={true}
+                                className="dnb-alignment-helper"
+                              />
+                            </AlignmentHelper>
+                            <Button
+                              aria-pressed="true"
+                              bounding={null}
+                              class={null}
+                              className="dnb-toggle-button__button"
+                              custom_content={
                                 <span
                                   className="dnb-toggle-button__component"
                                 >
@@ -871,7 +1110,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                                     element="span"
                                     global_status_id={null}
                                     group={null}
-                                    id="toggle-button-1-radio"
+                                    id="toggle-button-2-radio"
                                     label={null}
                                     label_position={null}
                                     label_sr_only={null}
@@ -888,290 +1127,124 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                                     suffix={null}
                                     title={null}
                                     value=""
-                                  >
-                                    <span
-                                      className="dnb-radio"
-                                    >
-                                      <span
-                                        className="dnb-radio__order"
-                                      >
-                                        <span
-                                          className="dnb-radio__inner"
-                                        >
-                                          <AlignmentHelper
-                                            className={null}
-                                          >
-                                            <span
-                                              aria-hidden={true}
-                                              className="dnb-alignment-helper"
-                                            />
-                                          </AlignmentHelper>
-                                          <FormStatus
-                                            attributes={null}
-                                            class={null}
-                                            className={null}
-                                            global_status_id={null}
-                                            icon="error"
-                                            icon_size="medium"
-                                            id="toggle-button-1-radio-form-status"
-                                            label={null}
-                                            no_animation={null}
-                                            role={null}
-                                            show={null}
-                                            size="default"
-                                            skeleton={null}
-                                            state="error"
-                                            status="error"
-                                            stretch={null}
-                                            text={null}
-                                            text_id="toggle-button-1-radio-status"
-                                            title={null}
-                                            variant={null}
-                                            width_element={null}
-                                            width_selector="toggle-button-1-radio, toggle-button-1-radio-label"
-                                          />
-                                          <span
-                                            className="dnb-radio__row"
-                                          >
-                                            <span
-                                              className="dnb-radio__shell"
-                                            >
-                                              <span
-                                                checked={true}
-                                                className="dnb-radio__input"
-                                                data-checked="true"
-                                                disabled={false}
-                                                id="toggle-button-1-radio"
-                                                name={null}
-                                                onChange={[Function]}
-                                                onClick={[Function]}
-                                                onKeyDown={[Function]}
-                                                value=""
-                                              />
-                                              <span
-                                                aria-hidden={true}
-                                                className="dnb-radio__button"
-                                              />
-                                              <span
-                                                aria-hidden={true}
-                                                className="dnb-radio__focus"
-                                              />
-                                              <span
-                                                aria-hidden={true}
-                                                className="dnb-radio__dot"
-                                              />
-                                            </span>
-                                          </span>
-                                        </span>
-                                      </span>
-                                    </span>
-                                  </Radio>
-                                </span>
-                                <span
-                                  aria-hidden={true}
-                                  className="dnb-button__alignment"
-                                  key="button-alignment"
-                                >
-                                  ‌
-                                </span>
-                                <span
-                                  className="dnb-button__text dnb-skeleton--show-font"
-                                  key="button-text"
-                                >
-                                  ToggleButton 1
+                                  />
                                 </span>
-                              </Content>
-                            </button>
-                            <FormStatus
-                              attributes={null}
-                              class={null}
-                              className={null}
+                              }
+                              custom_element={null}
+                              custom_method={null}
+                              disabled={null}
+                              element={null}
                               global_status_id={null}
-                              icon="error"
-                              icon_size="medium"
-                              id="toggle-button-1-form-status"
-                              label="ToggleButton 1"
-                              no_animation={null}
-                              role={null}
-                              show={null}
-                              size="default"
+                              href={null}
+                              icon={null}
+                              icon_position="right"
+                              icon_size={null}
+                              id="toggle-button-2"
+                              innerRef={null}
+                              inner_ref={null}
+                              onClick={[Function]}
+                              onKeyDown={[Function]}
+                              onKeyUp={[Function]}
+                              on_click={null}
+                              size={null}
                               skeleton={null}
-                              state="error"
-                              status="error"
+                              status={null}
+                              status_no_animation={null}
+                              status_props={null}
+                              status_state="error"
                               stretch={null}
-                              text={null}
-                              text_id="toggle-button-1-status"
+                              text="ToggleButton 2"
                               title={null}
-                              variant={null}
-                              width_element={null}
-                              width_selector={null}
-                            />
-                          </Button>
-                        </span>
-                      </span>
-                    </span>
-                  </ToggleButton>
-                  <ToggleButton
-                    attributes={null}
-                    checked={true}
-                    class={null}
-                    className={null}
-                    custom_element={null}
-                    custom_method={null}
-                    disabled={null}
-                    global_status_id={null}
-                    icon={null}
-                    icon_position="right"
-                    icon_size={null}
-                    id="toggle-button-2"
-                    label={null}
-                    label_direction={null}
-                    label_sr_only={null}
-                    left_component={null}
-                    on_change={null}
-                    on_state_update={null}
-                    readOnly={false}
-                    skeleton={null}
-                    status={null}
-                    status_no_animation={null}
-                    status_props={null}
-                    status_state="error"
-                    suffix={null}
-                    text="ToggleButton 2"
-                    title={null}
-                    value=""
-                    variant="radio"
-                  >
-                    <span
-                      className="dnb-toggle-button dnb-toggle-button--checked"
-                    >
-                      <span
-                        className="dnb-toggle-button__inner"
-                      >
-                        <FormStatus
-                          attributes={null}
-                          class={null}
-                          className={null}
-                          global_status_id={null}
-                          icon="error"
-                          icon_size="medium"
-                          id="toggle-button-2-form-status"
-                          label={null}
-                          no_animation={null}
-                          role={null}
-                          show={null}
-                          size="default"
-                          skeleton={null}
-                          state="error"
-                          status="error"
-                          stretch={null}
-                          text={null}
-                          text_id="toggle-button-2-status"
-                          title={null}
-                          variant={null}
-                          width_element={null}
-                          width_selector={null}
-                        />
-                        <span
-                          className="dnb-toggle-button__shell"
-                        >
-                          <AlignmentHelper
-                            className={null}
-                          >
-                            <span
-                              aria-hidden={true}
-                              className="dnb-alignment-helper"
-                            />
-                          </AlignmentHelper>
-                          <Button
-                            aria-pressed="true"
-                            bounding={null}
-                            class={null}
-                            className="dnb-toggle-button__button"
-                            custom_content={
-                              <span
-                                className="dnb-toggle-button__component"
+                              to={null}
+                              tooltip={null}
+                              type={null}
+                              variant="secondary"
+                              wrap={null}
+                            >
+                              <button
+                                aria-pressed="true"
+                                className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
+                                disabled={false}
+                                id="toggle-button-2"
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                type="button"
                               >
-                                <Radio
-                                  attributes={null}
-                                  checked={true}
+                                <Content
+                                  aria-pressed="true"
+                                  bounding={null}
                                   class={null}
-                                  className={null}
+                                  className="dnb-toggle-button__button"
+                                  content="ToggleButton 2"
+                                  custom_content={
+                                    <span
+                                      className="dnb-toggle-button__component"
+                                    >
+                                      <Radio
+                                        attributes={null}
+                                        checked={true}
+                                        class={null}
+                                        className={null}
+                                        custom_element={null}
+                                        custom_method={null}
+                                        data-checked="true"
+                                        disabled={null}
+                                        element="span"
+                                        global_status_id={null}
+                                        group={null}
+                                        id="toggle-button-2-radio"
+                                        label={null}
+                                        label_position={null}
+                                        label_sr_only={null}
+                                        name={null}
+                                        on_change={null}
+                                        on_state_update={null}
+                                        readOnly={false}
+                                        size={null}
+                                        skeleton={null}
+                                        status={null}
+                                        status_no_animation={null}
+                                        status_props={null}
+                                        status_state="error"
+                                        suffix={null}
+                                        title={null}
+                                        value=""
+                                      />
+                                    </span>
+                                  }
                                   custom_element={null}
                                   custom_method={null}
-                                  data-checked="true"
                                   disabled={null}
-                                  element="span"
+                                  element={null}
                                   global_status_id={null}
-                                  group={null}
-                                  id="toggle-button-2-radio"
-                                  label={null}
-                                  label_position={null}
-                                  label_sr_only={null}
-                                  name={null}
-                                  on_change={null}
-                                  on_state_update={null}
-                                  readOnly={false}
+                                  href={null}
+                                  icon={null}
+                                  icon_position="right"
+                                  icon_size={null}
+                                  id="toggle-button-2"
+                                  innerRef={null}
+                                  inner_ref={null}
+                                  isIconOnly={false}
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  on_click={null}
                                   size={null}
-                                  skeleton={null}
+                                  skeleton={false}
                                   status={null}
                                   status_no_animation={null}
                                   status_props={null}
                                   status_state="error"
-                                  suffix={null}
+                                  stretch={null}
+                                  text="ToggleButton 2"
                                   title={null}
-                                  value=""
-                                />
-                              </span>
-                            }
-                            custom_element={null}
-                            custom_method={null}
-                            disabled={null}
-                            element={null}
-                            global_status_id={null}
-                            href={null}
-                            icon={null}
-                            icon_position="right"
-                            icon_size={null}
-                            id="toggle-button-2"
-                            innerRef={null}
-                            inner_ref={null}
-                            onClick={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            on_click={null}
-                            size={null}
-                            skeleton={null}
-                            status={null}
-                            status_no_animation={null}
-                            status_props={null}
-                            status_state="error"
-                            stretch={null}
-                            text="ToggleButton 2"
-                            title={null}
-                            to={null}
-                            tooltip={null}
-                            type={null}
-                            variant="secondary"
-                            wrap={null}
-                          >
-                            <button
-                              aria-pressed="true"
-                              className="dnb-button dnb-button--secondary dnb-button--has-text dnb-toggle-button__button"
-                              disabled={false}
-                              id="toggle-button-2"
-                              onClick={[Function]}
-                              onKeyDown={[Function]}
-                              onKeyUp={[Function]}
-                              type="button"
-                            >
-                              <Content
-                                aria-pressed="true"
-                                bounding={null}
-                                class={null}
-                                className="dnb-toggle-button__button"
-                                content="ToggleButton 2"
-                                custom_content={
+                                  to={null}
+                                  tooltip={null}
+                                  type={null}
+                                  variant="secondary"
+                                  wrap={null}
+                                >
                                   <span
                                     className="dnb-toggle-button__component"
                                   >
@@ -1204,200 +1277,134 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                                       suffix={null}
                                       title={null}
                                       value=""
-                                    />
-                                  </span>
-                                }
-                                custom_element={null}
-                                custom_method={null}
-                                disabled={null}
-                                element={null}
-                                global_status_id={null}
-                                href={null}
-                                icon={null}
-                                icon_position="right"
-                                icon_size={null}
-                                id="toggle-button-2"
-                                innerRef={null}
-                                inner_ref={null}
-                                isIconOnly={false}
-                                onClick={[Function]}
-                                onKeyDown={[Function]}
-                                onKeyUp={[Function]}
-                                on_click={null}
-                                size={null}
-                                skeleton={false}
-                                status={null}
-                                status_no_animation={null}
-                                status_props={null}
-                                status_state="error"
-                                stretch={null}
-                                text="ToggleButton 2"
-                                title={null}
-                                to={null}
-                                tooltip={null}
-                                type={null}
-                                variant="secondary"
-                                wrap={null}
-                              >
-                                <span
-                                  className="dnb-toggle-button__component"
-                                >
-                                  <Radio
-                                    attributes={null}
-                                    checked={true}
-                                    class={null}
-                                    className={null}
-                                    custom_element={null}
-                                    custom_method={null}
-                                    data-checked="true"
-                                    disabled={null}
-                                    element="span"
-                                    global_status_id={null}
-                                    group={null}
-                                    id="toggle-button-2-radio"
-                                    label={null}
-                                    label_position={null}
-                                    label_sr_only={null}
-                                    name={null}
-                                    on_change={null}
-                                    on_state_update={null}
-                                    readOnly={false}
-                                    size={null}
-                                    skeleton={null}
-                                    status={null}
-                                    status_no_animation={null}
-                                    status_props={null}
-                                    status_state="error"
-                                    suffix={null}
-                                    title={null}
-                                    value=""
-                                  >
-                                    <span
-                                      className="dnb-radio"
                                     >
                                       <span
-                                        className="dnb-radio__order"
+                                        className="dnb-radio"
                                       >
                                         <span
-                                          className="dnb-radio__inner"
+                                          className="dnb-radio__order"
                                         >
-                                          <AlignmentHelper
-                                            className={null}
-                                          >
-                                            <span
-                                              aria-hidden={true}
-                                              className="dnb-alignment-helper"
-                                            />
-                                          </AlignmentHelper>
-                                          <FormStatus
-                                            attributes={null}
-                                            class={null}
-                                            className={null}
-                                            global_status_id={null}
-                                            icon="error"
-                                            icon_size="medium"
-                                            id="toggle-button-2-radio-form-status"
-                                            label={null}
-                                            no_animation={null}
-                                            role={null}
-                                            show={null}
-                                            size="default"
-                                            skeleton={null}
-                                            state="error"
-                                            status="error"
-                                            stretch={null}
-                                            text={null}
-                                            text_id="toggle-button-2-radio-status"
-                                            title={null}
-                                            variant={null}
-                                            width_element={null}
-                                            width_selector="toggle-button-2-radio, toggle-button-2-radio-label"
-                                          />
                                           <span
-                                            className="dnb-radio__row"
+                                            className="dnb-radio__inner"
                                           >
-                                            <span
-                                              className="dnb-radio__shell"
+                                            <AlignmentHelper
+                                              className={null}
                                             >
-                                              <span
-                                                checked={true}
-                                                className="dnb-radio__input"
-                                                data-checked="true"
-                                                disabled={false}
-                                                id="toggle-button-2-radio"
-                                                name={null}
-                                                onChange={[Function]}
-                                                onClick={[Function]}
-                                                onKeyDown={[Function]}
-                                                value=""
-                                              />
-                                              <span
-                                                aria-hidden={true}
-                                                className="dnb-radio__button"
-                                              />
                                               <span
                                                 aria-hidden={true}
-                                                className="dnb-radio__focus"
+                                                className="dnb-alignment-helper"
                                               />
+                                            </AlignmentHelper>
+                                            <FormStatus
+                                              attributes={null}
+                                              class={null}
+                                              className={null}
+                                              global_status_id={null}
+                                              icon="error"
+                                              icon_size="medium"
+                                              id="toggle-button-2-radio-form-status"
+                                              label={null}
+                                              no_animation={null}
+                                              role={null}
+                                              show={null}
+                                              size="default"
+                                              skeleton={null}
+                                              state="error"
+                                              status="error"
+                                              stretch={null}
+                                              text={null}
+                                              text_id="toggle-button-2-radio-status"
+                                              title={null}
+                                              variant={null}
+                                              width_element={null}
+                                              width_selector="toggle-button-2-radio, toggle-button-2-radio-label"
+                                            />
+                                            <span
+                                              className="dnb-radio__row"
+                                            >
                                               <span
-                                                aria-hidden={true}
-                                                className="dnb-radio__dot"
-                                              />
+                                                className="dnb-radio__shell"
+                                              >
+                                                <span
+                                                  checked={true}
+                                                  className="dnb-radio__input"
+                                                  data-checked="true"
+                                                  disabled={false}
+                                                  id="toggle-button-2-radio"
+                                                  name={null}
+                                                  onChange={[Function]}
+                                                  onClick={[Function]}
+                                                  onKeyDown={[Function]}
+                                                  value=""
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__button"
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__focus"
+                                                />
+                                                <span
+                                                  aria-hidden={true}
+                                                  className="dnb-radio__dot"
+                                                />
+                                              </span>
                                             </span>
                                           </span>
                                         </span>
                                       </span>
-                                    </span>
-                                  </Radio>
-                                </span>
-                                <span
-                                  aria-hidden={true}
-                                  className="dnb-button__alignment"
-                                  key="button-alignment"
-                                >
-                                  ‌
-                                </span>
-                                <span
-                                  className="dnb-button__text dnb-skeleton--show-font"
-                                  key="button-text"
-                                >
-                                  ToggleButton 2
-                                </span>
-                              </Content>
-                            </button>
-                            <FormStatus
-                              attributes={null}
-                              class={null}
-                              className={null}
-                              global_status_id={null}
-                              icon="error"
-                              icon_size="medium"
-                              id="toggle-button-2-form-status"
-                              label="ToggleButton 2"
-                              no_animation={null}
-                              role={null}
-                              show={null}
-                              size="default"
-                              skeleton={null}
-                              state="error"
-                              status="error"
-                              stretch={null}
-                              text={null}
-                              text_id="toggle-button-2-status"
-                              title={null}
-                              variant={null}
-                              width_element={null}
-                              width_selector={null}
-                            />
-                          </Button>
+                                    </Radio>
+                                  </span>
+                                  <span
+                                    aria-hidden={true}
+                                    className="dnb-button__alignment"
+                                    key="button-alignment"
+                                  >
+                                    ‌
+                                  </span>
+                                  <span
+                                    className="dnb-button__text dnb-skeleton--show-font"
+                                    key="button-text"
+                                  >
+                                    ToggleButton 2
+                                  </span>
+                                </Content>
+                              </button>
+                              <FormStatus
+                                attributes={null}
+                                class={null}
+                                className={null}
+                                global_status_id={null}
+                                icon="error"
+                                icon_size="medium"
+                                id="toggle-button-2-form-status"
+                                label="ToggleButton 2"
+                                no_animation={null}
+                                role={null}
+                                show={null}
+                                size="default"
+                                skeleton={null}
+                                state="error"
+                                status="error"
+                                stretch={null}
+                                text={null}
+                                text_id="toggle-button-2-status"
+                                title={null}
+                                variant={null}
+                                width_element={null}
+                                width_selector={null}
+                              />
+                            </Button>
+                          </span>
                         </span>
                       </span>
-                    </span>
-                  </ToggleButton>
+                    </ToggleButton>
+                  </span>
                 </span>
-              </span>
+              </div>
             </div>
-          </div>
+          </Section>
         </fieldset>
       </Fieldset>
     </FormRow>
diff --git a/packages/dnb-eufemia/src/shared/Context.tsx b/packages/dnb-eufemia/src/shared/Context.tsx
index 8f877fce90a..f549ed4c13f 100644
--- a/packages/dnb-eufemia/src/shared/Context.tsx
+++ b/packages/dnb-eufemia/src/shared/Context.tsx
@@ -25,6 +25,7 @@ import type { VisuallyHiddenProps } from '../components/visually-hidden/Visually
 import type { DrawerProps } from '../components/drawer/types'
 import type { DialogProps } from '../components/dialog/types'
 import type { TooltipProps } from '../components/tooltip/types'
+import type { SectionProps } from '../components/section/Section'
 
 // All TypeScript based Eufemia elements
 import type { AnchorProps } from '../elements/Anchor'
@@ -50,6 +51,7 @@ export type ContextProps = {
   Drawer?: Partial<DrawerProps>
   Dialog?: Partial<DialogProps>
   Tooltip?: Partial<TooltipProps>
+  Section?: Partial<SectionProps>
   ScrollView?: Partial<ScrollViewProps>
 
   // -- TODO: Not converted yet --