diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
index e6fddeb0594..568b1856cb6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Isolation/Examples.tsx
@@ -1,6 +1,7 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
-import { Flex } from '@dnb/eufemia/src'
-import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
+import { Card, Flex, Section } from '@dnb/eufemia/src'
+import { Field, Form, Iterate } from '@dnb/eufemia/src/extensions/forms'
+import React from 'react'
 
 export const UsingCommitButton = () => {
   return (
@@ -39,3 +40,105 @@ export const UsingCommitButton = () => {
     </ComponentBox>
   )
 }
+
+export const CommitHandleRef = () => {
+  return (
+    <ComponentBox>
+      {() => {
+        const MyForm = () => {
+          const commitHandleRef = React.useRef(null)
+
+          return (
+            <Form.Handler data={{ foo: 'bar' }}>
+              <Card stack>
+                <Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
+                <Form.Isolation commitHandleRef={commitHandleRef}>
+                  <Flex.Stack>
+                    <Form.Section path="/newPerson">
+                      <Field.Name.First required path="/title" />
+                    </Form.Section>
+                    <button
+                      onClick={() => {
+                        commitHandleRef.current()
+                      }}
+                    >
+                      Legg til
+                    </button>
+                  </Flex.Stack>
+                </Form.Isolation>
+                <Log />
+              </Card>
+            </Form.Handler>
+          )
+        }
+
+        const Log = () => {
+          const { data } = Form.useData()
+          return (
+            <Section backgroundColor="sand-yellow" innerSpace>
+              <pre>{JSON.stringify(data)}</pre>
+            </Section>
+          )
+        }
+
+        return <MyForm />
+      }}
+    </ComponentBox>
+  )
+}
+
+export const TransformCommitData = () => {
+  return (
+    <ComponentBox scope={{ Iterate }}>
+      <Form.Handler
+        onChange={console.log}
+        defaultData={{
+          persons: [{ value: 'id-123', title: 'Hanne' }],
+        }}
+      >
+        <Card stack>
+          <Form.SubHeading>Legg til ny hovedkontaktperson</Form.SubHeading>
+          <Field.Selection required variant="radio" path="/person">
+            <Iterate.Array path="/persons">
+              <Field.Option itemPath="/" />
+            </Iterate.Array>
+
+            <Field.Option value="other-person">Annen person</Field.Option>
+          </Field.Selection>
+          <Form.Visibility
+            visibleWhen={{
+              path: '/person',
+              hasValue: 'other-person',
+            }}
+            animate
+          >
+            <Flex.Stack>
+              <Form.SubHeading>Ny hovedkontaktperson</Form.SubHeading>
+              <Form.Isolation
+                transformCommitData={(isolatedData, outerData) => {
+                  return {
+                    ...outerData,
+                    persons: [
+                      ...outerData.persons,
+                      isolatedData.newPerson,
+                    ],
+                  }
+                }}
+              >
+                <Flex.Stack>
+                  <Form.Section path="/newPerson">
+                    <Field.Name.First required path="/title" />
+                  </Form.Section>
+
+                  <Form.Isolation.CommitButton />
+                </Flex.Stack>
+              </Form.Isolation>
+            </Flex.Stack>
+          </Form.Visibility>
+
+          <Form.SubmitButton />
+        </Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}