diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx
index 7d4e405ba51..e906026a322 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/Examples.tsx
@@ -10,9 +10,9 @@ export const Default = () => {
   )
 }
 
-export const OverStack = () => {
+export const PrecedingFlexContainer = () => {
   return (
-    <ComponentBox data-visual-test="layout-main-heading-over-stack">
+    <ComponentBox data-visual-test="layout-main-heading-above-stack">
       <Form.MainHeading>This is a main heading</Form.MainHeading>
       <Flex.Stack>
         <P>Stack contents</P>
@@ -21,11 +21,29 @@ export const OverStack = () => {
   )
 }
 
-export const OverStackWithCard = () => {
+export const AboveCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-main-heading-over-card">
+    <ComponentBox data-visual-test="layout-main-heading-above-card">
       <Form.MainHeading>This is a main heading</Form.MainHeading>
+      <Card stack>
+        <P>Card contents</P>
+      </Card>
+    </ComponentBox>
+  )
+}
+
+export const WithHelpButton = () => {
+  return (
+    <ComponentBox data-visual-test="layout-main-heading-help-button">
       <Flex.Stack>
+        <Form.MainHeading
+          help={{
+            title: 'Title',
+            content: 'Content',
+          }}
+        >
+          This is a main heading
+        </Form.MainHeading>
         <Card stack>
           <P>Card contents</P>
         </Card>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx
index 01bef1cf209..d193006f0e3 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/MainHeading/demos.mdx
@@ -10,10 +10,18 @@ import * as Examples from './Examples'
 
 <Examples.Default />
 
-### Over Stack
+### Above a flex container
 
-<Examples.OverStack />
+<Examples.PrecedingFlexContainer />
 
-### Over Stack with Card
+### Above Card
 
-<Examples.OverStackWithCard />
+When placed above a [Card](/uilib/components/card/) component, the heading will be indented to align with the card content.
+
+On small screens, the indention will be removed.
+
+<Examples.AboveCard />
+
+### With HelpButton
+
+<Examples.WithHelpButton />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx
index a433c2e6a8d..a4a1d409121 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/Examples.tsx
@@ -19,7 +19,7 @@ export const BelowMainHeading = () => {
   )
 }
 
-export const OverStack = () => {
+export const PrecedingFlexContainer = () => {
   return (
     <ComponentBox>
       <Form.SubHeading>This is a sub heading</Form.SubHeading>
@@ -43,15 +43,13 @@ export const InsideCard = () => {
   )
 }
 
-export const OverStackWithCard = () => {
+export const AboveCard = () => {
   return (
-    <ComponentBox data-visual-test="layout-sub-heading-over-card">
+    <ComponentBox data-visual-test="layout-sub-heading-above-card">
       <Form.SubHeading>This is a sub heading</Form.SubHeading>
-      <Flex.Stack>
-        <Card stack>
-          <P>Card contents</P>
-        </Card>
-      </Flex.Stack>
+      <Card stack>
+        <P>Card contents</P>
+      </Card>
     </ComponentBox>
   )
 }
@@ -65,3 +63,23 @@ export const TwoSubHeadings = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelpButton = () => {
+  return (
+    <ComponentBox data-visual-test="layout-sub-heading-help-button">
+      <Flex.Stack>
+        <Form.SubHeading
+          help={{
+            title: 'Title',
+            content: 'Content',
+          }}
+        >
+          This is a sub heading
+        </Form.SubHeading>
+        <Card stack>
+          <P>Card contents</P>
+        </Card>
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx
index 6b9cf3638e0..2d02eed90d1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/SubHeading/demos.mdx
@@ -14,18 +14,26 @@ import * as Examples from './Examples'
 
 <Examples.BelowMainHeading />
 
-### Over Stack
+### Above a flex container
 
-<Examples.OverStack />
+<Examples.PrecedingFlexContainer />
 
 ### Inside Card
 
 <Examples.InsideCard />
 
-### Over Stack with Card
+### Above Card
 
-<Examples.OverStackWithCard />
+When placed above a [Card](/uilib/components/card/) component, the heading will be indented to align with the card content.
+
+On small screens, the indention will be removed.
+
+<Examples.AboveCard />
 
 ### Two sub headings
 
 <Examples.TwoSubHeadings />
+
+### With HelpButton
+
+<Examples.WithHelpButton />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
index 98a06785a81..acdfe6e543d 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/ArraySelection/info.mdx
@@ -8,8 +8,11 @@ showTabs: true
 
 There is a corresponding [Value.ArraySelection](/uilib/extensions/forms/Value/ArraySelection) component.
 
+The [Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
+
 ```jsx
 import { Field } from '@dnb/eufemia/extensions/forms'
+
 render(
   <Field.ArraySelection>
     <Field.Option />
@@ -17,3 +20,22 @@ render(
   </Field.ArraySelection>,
 )
 ```
+
+You can also use the `dataPath` property to provide the data to the component:
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler
+    data={{
+      myDataPath: [
+        { title: 'Foo!', value: 'foo' },
+        { title: 'Bar!', value: 'bar' },
+      ],
+    }}
+  >
+    <Field.ArraySelection dataPath="/myDataPath" />
+  </Form.Handler>,
+)
+```
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx
index e27c7165bb8..a62307ab097 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Composition/Examples.tsx
@@ -17,7 +17,10 @@ export const CompositionError = () => (
       width="large"
     >
       <Field.String label="Field A" width="stretch" />
-      <Field.String label="Field B with a long label" width="medium" />
+      <Field.String
+        label="Field B with a long label that wraps"
+        width="medium"
+      />
     </Field.Composition>
   </ComponentBox>
 )
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx
index 22938272571..f32b1919b91 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Option/properties.mdx
@@ -2,11 +2,9 @@
 showTabs: true
 ---
 
+import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
+import { OptionProperties } from '@dnb/eufemia/src/extensions/forms/Field/Option/OptionDocs'
+
 ## Properties
 
-| Property   | Type                 | Description                                   |
-| ---------- | -------------------- | --------------------------------------------- |
-| `value`    | `string` or `number` | _(optional)_ Value for this option.           |
-| `title`    | `string`             | _(optional)_ Text title for the option.       |
-| `text`     | `string`             | _(optional)_ Secondary text.                  |
-| `children` | `React.Node`         | _(optional)_ Optional way to provide `title`. |
+<PropertiesTable props={OptionProperties} />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
index dfc8467efd5..67d12b390b8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Selection/info.mdx
@@ -6,12 +6,13 @@ showTabs: true
 
 `Field.Selection` is a component for selecting between options using a dropdown or similar user experiences.
 
-[Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
-
 There is a corresponding [Value.Selection](/uilib/extensions/forms/Value/Selection) component.
 
+The [Field.Option](/uilib/extensions/forms/base-fields/Option/) is a related component.
+
 ```tsx
 import { Field } from '@dnb/eufemia/extensions/forms'
+
 render(
   <Field.Selection placeholder="Select something...">
     <Field.Option value="foo" title="Foo!" />
@@ -20,6 +21,25 @@ render(
 )
 ```
 
+You can also use the `dataPath` property to provide the data to the component:
+
+```jsx
+import { Field } from '@dnb/eufemia/extensions/forms'
+
+render(
+  <Form.Handler
+    data={{
+      myDataPath: [
+        { title: 'Foo!', value: 'foo' },
+        { title: 'Bar!', value: 'bar' },
+      ],
+    }}
+  >
+    <Field.Selection dataPath="/myDataPath" />
+  </Form.Handler>,
+)
+```
+
 ## About the Autocomplete variant
 
 The autocomplete variant (`variant="autocomplete"`) is a special easy drop-in version – basically as an replacement for the Dropdown variant, but with a search capability.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
index efb82f739dc..8e88a94beef 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/Examples.tsx
@@ -5,7 +5,7 @@ import {
   TestElement,
   Form,
 } from '@dnb/eufemia/src/extensions/forms'
-import { Flex, Slider } from '@dnb/eufemia/src'
+import { Anchor, Card, Flex, Slider } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -227,3 +227,212 @@ export const CombineErrorMessages = () => {
     </ComponentBox>
   )
 }
+
+export const InlineHelpButtonVerticalLabel = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-vertical-label">
+      <Flex.Stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: (
+              <>
+                Dette er hvor mye du har tenkt å låne{' '}
+                <Anchor href="#test">totalt</Anchor>.
+              </>
+            ),
+          }}
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          multiline
+          rows={3}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
+
+export const InlineHelpButtonLabelDescription = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-label-description">
+      <Flex.Stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription="Description Nisi ad ullamco ut anim proident sint eiusmod."
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription="Description"
+          multiline
+          rows={3}
+          help={{
+            open: true,
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
+
+export const InlineHelpButtonHTML = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-html">
+      <Flex.Stack>
+        <Field.String
+          label={<strong>Ønsket lånebeløp</strong>}
+          labelDescription={
+            <span>
+              <br />
+              Label description with a <Anchor>Anchor</Anchor>
+            </span>
+          }
+          help={{
+            open: true,
+            title: <strong>Help title</strong>,
+            content: (
+              <>
+                Help content with a <Anchor>Anchor</Anchor>.
+              </>
+            ),
+          }}
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
+
+export const InlineHelpButtonVerticalLabelDescription = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-vertical-label-description">
+      <Card stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription={'\\nDescription'}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription={'\\nDescription'}
+          multiline
+          rows={3}
+          help={{
+            open: true,
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Card>
+    </ComponentBox>
+  )
+}
+
+export const InlineHelpButtonHorizontalLabel = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-horizontal-label">
+      <Card stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          help={{
+            open: true,
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          layoutOptions={{ width: '8rem' }}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          layoutOptions={{ width: '8rem' }}
+          multiline
+          rows={3}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+        />
+      </Card>
+    </ComponentBox>
+  )
+}
+
+export const InlineHelpButtonCompositionFields = () => {
+  return (
+    <ComponentBox data-visual-test="forms-field-block-help-button-composition-fields">
+      <Card stack>
+        <Field.Composition label="Field.Composition" width="large">
+          <Field.String
+            width="medium"
+            label="Label"
+            help={{
+              title: 'Hva betyr lånebeløp? ',
+              content: 'Dette er hvor mye du har tenkt å låne totalt.',
+            }}
+          />
+          <Field.String
+            width="stretch"
+            label="Label"
+            help={{
+              title: 'Hva betyr lånebeløp? ',
+              content: 'Dette er hvor mye du har tenkt å låne totalt.',
+            }}
+          />
+        </Field.Composition>
+        <Field.PostalCodeAndCity
+          help={{
+            title: 'Hva betyr lånebeløp? ',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+        <Field.PhoneNumber
+          help={{
+            open: true,
+            title: 'Hva betyr lånebeløp? ',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Card>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx
index b097fcc8fc6..eac89f63974 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/FieldBlock/demos.mdx
@@ -34,12 +34,36 @@ import * as Examples from './Examples'
 
 <Examples.HorizontalAutoSize />
 
-### Widths
-
-<Examples.Widths />
-
 ### Combine error messages
 
 Error messages from all fields inside the FieldBlock are combined as one message below the whole block
 
 <Examples.CombineErrorMessages />
+
+### Inline help button (vertical only)
+
+<Examples.InlineHelpButtonVerticalLabel />
+
+### Inline help button (with label description)
+
+<Examples.InlineHelpButtonLabelDescription />
+
+### Inline help button (vertical label description)
+
+<Examples.InlineHelpButtonVerticalLabelDescription />
+
+### Inline help button (horizontal label)
+
+<Examples.InlineHelpButtonHorizontalLabel />
+
+### Inline help button (composition fields)
+
+<Examples.InlineHelpButtonCompositionFields />
+
+### Inline help button with HTML
+
+<Examples.InlineHelpButtonHTML />
+
+### Widths
+
+<Examples.Widths />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx
index 2f6f1b63ac4..c139c48cca1 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/PostalCodeAndCity/properties.mdx
@@ -15,7 +15,10 @@ import { PostalCodeAndCityProperties } from '@dnb/eufemia/src/extensions/forms/F
 
 ### General properties
 
-<PropertiesTable props={FieldBlockProperties} omit={['value']} />
+<PropertiesTable
+  props={FieldBlockProperties}
+  omit={['value', 'layout', 'layoutOptions', 'label', 'labelDescription']}
+/>
 
 ## Translations
 
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/Examples.tsx
index 7a2e5ff4600..a2e996a85ec 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/Examples.tsx
@@ -145,3 +145,25 @@ export const PathValues = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        defaultData={{
+          myValue: 50,
+        }}
+      >
+        <Field.Slider
+          label="Slider"
+          help={{
+            title: 'Help is available',
+            content:
+              'Take the time to help other people without expecting a reward or gratitude is definitely important in living an optimistic life.',
+          }}
+          path="/myValue"
+        />
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/demos.mdx
index 9d0d7c498a6..69f2a8e43c8 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/more-fields/Slider/demos.mdx
@@ -25,3 +25,7 @@ import * as Examples from './Examples'
 ### Path usage for min, max and step
 
 <Examples.PathValues />
+
+### With help
+
+<Examples.WithHelp />
diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
index 0d1fe94fd10..44536daf93e 100644
--- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -567,6 +567,8 @@ exports[`Button scss has to match theme css for sbanken 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -574,6 +576,8 @@ exports[`Button scss has to match theme css for sbanken 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -999,6 +1003,8 @@ exports[`Button scss has to match theme css for ui 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -1006,6 +1012,8 @@ exports[`Button scss has to match theme css for ui 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
diff --git a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
index fa4b8953f2a..e82ff9445b3 100644
--- a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
+++ b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss
@@ -1,3 +1,5 @@
+@import '../../../../style/core/utilities.scss';
+
 /*
 * Button mixins
 *
diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-section.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-section.snap.png
index 976f9b612f7..789c8900a05 100644
Binary files a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-section.snap.png and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-for-ui-have-to-match-nested-section.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-section.snap.png b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-section.snap.png
index 20d28de0a95..4ace84d0cb3 100644
Binary files a/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-section.snap.png and b/packages/dnb-eufemia/src/components/card/__tests__/__image_snapshots__/card-small-screen-for-ui-have-to-match-nested-section.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
index 49d9720e8f0..5627d916408 100644
--- a/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
+++ b/packages/dnb-eufemia/src/components/card/style/dnb-card.scss
@@ -119,3 +119,20 @@
     --outline-width: 0.125rem;
   }
 }
+
+.dnb-card--auto-indent:has(
+  + .dnb-card,
+  + * + .dnb-card,/* e.g. one paragraph */
+  + * + * + .dnb-card,/* e.g. two paragraphs */
+  + .dnb-help-button__content + .dnb-section + .dnb-card
+) {
+  &:not([class*='space__left']) {
+    @include allAbove(small) {
+      margin-left: var(--spacing-medium);
+    }
+  }
+
+  &:not([class*='space__bottom']) {
+    margin-bottom: var(--spacing-small);
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss b/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss
index c8905d31d58..91d22efaced 100644
--- a/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/card/style/themes/dnb-card-theme-ui.scss
@@ -1,8 +1,10 @@
-.dnb-card {
+:root {
   --card-outline-color: var(--border-color, var(--color-lavender));
   --card-outline-width: 0.25rem;
   --card-background-color: var(--color-white);
+}
 
+.dnb-card {
   // Nested Cards
   & .dnb-card {
     --card-outline-color: var(--color-black-8);
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 0cda407e68f..7bd9ba47689 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
@@ -581,9 +581,112 @@ button.dnb-button::-moz-focus-inner {
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }
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 b4ea4a99c8d..6f087ae70f5 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
@@ -582,9 +582,112 @@ button.dnb-button::-moz-focus-inner {
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }
diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
index 8fd81fb3626..e614807d107 100644
--- a/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
+++ b/packages/dnb-eufemia/src/components/flex/__tests__/Container.test.tsx
@@ -819,7 +819,7 @@ describe('Flex.Container', () => {
           class="dnb-space dnb-flex-container dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-flex-start dnb-flex-container--spacing-small dnb-flex-container--wrap dnb-flex-container--divider-space"
         >
           <h3
-            class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-space__top--zero dnb-space__bottom--zero"
+            class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-card--auto-indent dnb-space__top--zero dnb-space__bottom--zero"
           >
             Heading
           </h3>
@@ -886,7 +886,7 @@ describe('Flex.Container', () => {
           class="dnb-space dnb-flex-container dnb-flex-container--direction-vertical dnb-flex-container--justify-flex-start dnb-flex-container--align-flex-start dnb-flex-container--spacing-small dnb-flex-container--wrap dnb-flex-container--divider-space"
         >
           <h3
-            class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-space__top--zero dnb-space__bottom--zero"
+            class="dnb-heading dnb-h--medium dnb-forms-sub-heading dnb-card--auto-indent dnb-space__top--zero dnb-space__bottom--zero"
           >
             Heading
           </h3>
diff --git a/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexstack-have-to-match-flex-stack-card-two-headings.snap.png b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexstack-have-to-match-flex-stack-card-two-headings.snap.png
index 721dff5afa1..d22d4c28744 100644
Binary files a/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexstack-have-to-match-flex-stack-card-two-headings.snap.png and b/packages/dnb-eufemia/src/components/flex/__tests__/__image_snapshots__/flexstack-have-to-match-flex-stack-card-two-headings.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
index 763589e6224..9b8374598c0 100644
--- a/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
+++ b/packages/dnb-eufemia/src/components/form-label/FormLabel.tsx
@@ -140,16 +140,46 @@ export default function FormLabel(localProps: FormLabelAllProps) {
       forElem?.closest('.dnb-input__border')
 
     if (target) {
-      const enter = () => target.classList.add('hover')
-      const leave = () => target.classList.remove('hover')
-
       const elem = ref.current
+
+      const buttonEnter = () => {
+        target.classList.add('no-hover')
+        leave()
+      }
+      const buttonLeave = () => {
+        target.classList.remove('no-hover')
+        enter()
+      }
+
+      const enter = () => {
+        target.classList.add('hover')
+
+        // Remove the style from interactive elements (e.g. HelpButton)
+        const button = elem.querySelector('button')
+        button?.addEventListener?.('mouseenter', buttonEnter, {
+          once: true,
+        })
+        button?.addEventListener?.('mouseleave', buttonLeave, {
+          once: true,
+        })
+      }
+      const leave = () => {
+        target.classList.remove('hover')
+
+        elem
+          .querySelector('button')
+          ?.removeEventListener?.('mouseenter', buttonEnter)
+      }
+
       elem?.addEventListener?.('mouseenter', enter)
       elem?.addEventListener?.('mouseleave', leave)
 
       return () => {
         elem?.removeEventListener?.('mouseenter', enter)
         elem?.removeEventListener?.('mouseleave', leave)
+        elem
+          .querySelector('button')
+          ?.removeEventListener?.('mouseleave', buttonLeave)
       }
     }
   }, [forId, ref])
diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
index 451793043bc..9aa0c5ade92 100644
--- a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
+++ b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.test.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react'
 import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 import FormLabel from '../FormLabel'
 import Input from '../../input/Input'
 import { Provider } from '../../../shared'
@@ -306,6 +306,101 @@ describe('FormLabel component', () => {
     )
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
+
+  describe('hover handling', () => {
+    it('should set hover class when hovered', () => {
+      render(
+        <>
+          <FormLabel forId="input" />
+          <input type="text" id="input" className="dnb-input__border" />
+        </>
+      )
+
+      const label = document.querySelector('label')
+      const input = document.querySelector('input')
+      expect(input).not.toHaveClass('hover')
+
+      fireEvent.mouseEnter(label)
+      expect(input).toHaveClass('hover')
+
+      fireEvent.mouseLeave(label)
+      expect(input).not.toHaveClass('hover')
+    })
+
+    it('should not set hover class when "dnb-input__border" is not present', () => {
+      render(
+        <>
+          <FormLabel forId="input" />
+          <input type="text" id="input" />
+        </>
+      )
+
+      const label = document.querySelector('label')
+      const input = document.querySelector('input')
+      expect(input).not.toHaveClass('hover')
+
+      fireEvent.mouseEnter(label)
+      expect(input).not.toHaveClass('hover')
+    })
+
+    it('should remove hover class when hovering on a button inside the label', () => {
+      render(
+        <>
+          <FormLabel forId="input">
+            <button>Button</button>
+          </FormLabel>
+          <input type="text" id="input" className="dnb-input__border" />
+        </>
+      )
+
+      const label = document.querySelector('label')
+      const input = document.querySelector('input')
+      const button = document.querySelector('button')
+      expect(input).not.toHaveClass('hover')
+
+      fireEvent.mouseEnter(label)
+      expect(input).toHaveClass('hover')
+
+      fireEvent.mouseEnter(button)
+      expect(input).not.toHaveClass('hover')
+
+      fireEvent.mouseLeave(button)
+      expect(input).toHaveClass('hover')
+
+      fireEvent.mouseLeave(label)
+      expect(input).not.toHaveClass('hover')
+    })
+
+    it('should remove events from label and button when unmounting', () => {
+      const { unmount } = render(
+        <>
+          <FormLabel forId="input">
+            <button>Button</button>
+          </FormLabel>
+          <input type="text" id="input" className="dnb-input__border" />
+        </>
+      )
+
+      const label = document.querySelector('label')
+      const input = document.querySelector('input')
+      const button = document.querySelector('button')
+      expect(input).not.toHaveClass('hover')
+
+      fireEvent.mouseEnter(label)
+      expect(input).toHaveClass('hover')
+
+      fireEvent.mouseEnter(button)
+      expect(input).not.toHaveClass('hover')
+
+      unmount()
+
+      // When emitting these events, "hover" would normally be set.
+      fireEvent.mouseEnter(label)
+      expect(input).not.toHaveClass('hover')
+      fireEvent.mouseLeave(button)
+      expect(input).not.toHaveClass('hover')
+    })
+  })
 })
 
 describe('FormLabel scss', () => {
diff --git a/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
new file mode 100644
index 00000000000..cfdebcdcd73
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/HelpButtonInline.tsx
@@ -0,0 +1,225 @@
+import React, { useCallback, useContext, useEffect, useRef } from 'react'
+import classnames from 'classnames'
+import { HelpButtonProps } from './HelpButton'
+import HelpButtonInstance from './HelpButtonInstance'
+import HeightAnimation from '../HeightAnimation'
+import { useSharedState } from '../../shared/helpers/useSharedState'
+import { convertJsxToString } from '../../shared/component-helper'
+import useId from '../../shared/helpers/useId'
+import Section from '../Section'
+import { P } from '../../elements'
+import Flex from '../Flex'
+import CardContext from '../card/CardContext'
+import { SpacingProps } from '../space/types'
+import Dialog from '../Dialog'
+import { question as QuestionIcon, close as CloseIcon } from '../../icons'
+
+export type HelpProps = {
+  title?: React.ReactNode
+  content?: React.ReactNode
+  renderAs?: 'inline' | 'dialog'
+  /** Only for the "inline" variant */
+  open?: boolean
+  /** Only for the "inline" variant */
+  breakout?: boolean
+}
+
+export type HelpButtonInlineProps = HelpButtonProps & {
+  contentId?: string
+  help?: HelpProps
+}
+
+export type HelpButtonInlineSharedStateDataProps = {
+  isOpen: boolean
+  isUserIntent?: boolean
+  buttonRef?: React.RefObject<HTMLButtonElement>
+}
+
+export default function HelpButtonInline(props: HelpButtonInlineProps) {
+  const { contentId, size, help, className, children, ...rest } = props
+  const controlId = useId(contentId)
+
+  const { data, update } =
+    useSharedState<HelpButtonInlineSharedStateDataProps>(controlId, {
+      isOpen: help?.open ?? false,
+    })
+  const { isOpen, isUserIntent } = data || {}
+  const wasOpenRef = useRef(undefined)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+
+  const onClickHandler = useCallback(
+    ({ event }: { event: React.MouseEvent<HTMLButtonElement> }) => {
+      event.preventDefault() // Because when used inside a FormLabel
+      update({ isOpen: !isOpen, isUserIntent: !isOpen, buttonRef })
+      wasOpenRef.current = !isOpen
+    },
+    [isOpen, update]
+  )
+
+  return (
+    <>
+      <HelpButtonInstance
+        bounding
+        size={size ?? 'small'}
+        icon={HelpButtonIcon}
+        title={
+          !isOpen && !wasOpenRef.current
+            ? convertJsxToString(help?.title)
+            : undefined
+        }
+        {...rest}
+        id={controlId}
+        className={classnames(
+          'dnb-help-button__inline',
+          isOpen && 'dnb-help-button__inline--open',
+          isUserIntent && 'dnb-help-button__inline--user-intent',
+          typeof wasOpenRef.current === 'boolean' &&
+            'dnb-help-button__inline--was-open',
+          className
+        )}
+        aria-controls={`${controlId}-content`}
+        on_click={onClickHandler}
+        innerRef={buttonRef}
+      />
+
+      {!contentId && (
+        <HelpButtonInlineContent contentId={controlId} help={help}>
+          {children}
+        </HelpButtonInlineContent>
+      )}
+    </>
+  )
+}
+
+export type HelpButtonInlineContentProps = SpacingProps & {
+  contentId: string
+  className?: string
+  children?: React.ReactNode
+  help?: HelpProps
+  breakout?: boolean
+}
+
+export function HelpButtonInlineContent(
+  props: HelpButtonInlineContentProps
+) {
+  const {
+    contentId,
+    className,
+    children,
+    help: helpProp,
+    breakout = true,
+    ...rest
+  } = props
+  const { data, update } =
+    useSharedState<HelpButtonInlineSharedStateDataProps>(contentId)
+  const { isOpen, isUserIntent, buttonRef } = data || {}
+  const {
+    open,
+    title,
+    content,
+    renderAs,
+    breakout: breakoutProp = true,
+  } = helpProp || {}
+
+  const innerRef = useRef<HTMLDivElement>(null)
+  const cardContext = useContext(CardContext)
+  const breakoutFromLayout =
+    Boolean(cardContext) && breakout && breakoutProp
+
+  useEffect(() => {
+    if (isOpen && isUserIntent) {
+      window.requestAnimationFrame(() => {
+        innerRef.current?.focus({ preventScroll: true })
+      })
+    }
+  }, [isOpen, isUserIntent])
+
+  const onClose = useCallback(() => {
+    update({ isOpen: false, isUserIntent: false })
+  }, [update])
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (event.currentTarget === event.target) {
+        // Firefox returns a whitespace (" ") on event.key when pressing space,
+        // therefore using .trim() can help normalize this.
+        // While userEvent.keyboard('{Space}') might return 'Unknown' on event.code,
+        // making a direct comparison less reliable across all platforms.
+        switch (event.key.trim() || event.code) {
+          case 'Enter':
+          case 'Space':
+          case 'Escape':
+            event.preventDefault()
+            window.requestAnimationFrame(() => {
+              onClose()
+              buttonRef.current?.focus()
+            })
+            break
+        }
+      }
+    },
+    [buttonRef, onClose]
+  )
+
+  if (renderAs === 'dialog') {
+    return (
+      <Dialog
+        title={title}
+        omitTriggerButton
+        openState={isOpen ?? open}
+        onClose={onClose}
+      >
+        {content}
+        {children}
+      </Dialog>
+    )
+  }
+
+  return (
+    <HeightAnimation
+      className={classnames('dnb-help-button__content', className)}
+      open={isOpen ?? open ?? false}
+    >
+      <Section
+        id={`${contentId}-content`}
+        aria-label={convertJsxToString(title)}
+        className="dnb-no-focus"
+        tabIndex={-1}
+        innerRef={innerRef}
+        onKeyDown={onKeyDown}
+        breakout={breakoutFromLayout}
+        roundedCorner={!breakoutFromLayout}
+        innerSpace={
+          breakoutFromLayout
+            ? { top: 'small', bottom: 'medium' }
+            : {
+                top: 'small',
+                bottom: 'medium',
+                left: 'medium',
+                right: 'x-small',
+              }
+        }
+        backgroundColor="lavender"
+        {...rest}
+      >
+        <Flex.Vertical gap="x-small">
+          {title && <P medium>{title}</P>}
+          {content && <P>{content}</P>}
+        </Flex.Vertical>
+        {children}
+      </Section>
+    </HeightAnimation>
+  )
+}
+
+function HelpButtonIcon() {
+  return (
+    <>
+      <QuestionIcon />
+      <CloseIcon />
+    </>
+  )
+}
+
+HelpButtonInline._supportsSpacingProps = true
+HelpButtonInlineContent._supportsSpacingProps = true
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButtonInline.test.tsx b/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButtonInline.test.tsx
new file mode 100644
index 00000000000..f94dcb1bb09
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/HelpButtonInline.test.tsx
@@ -0,0 +1,305 @@
+import React from 'react'
+import { render, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+} from '../HelpButtonInline'
+
+describe('HelpButtonInline', () => {
+  it('should render without title and content', () => {
+    render(<HelpButtonInline help={{ open: true }} />)
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).toBeInTheDocument()
+  })
+
+  it('should toggle open state when clicked', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    const button = document.querySelector('button')
+
+    await userEvent.click(button)
+    expect(button).toHaveClass('dnb-help-button__inline--open')
+
+    await userEvent.click(button)
+    expect(button).not.toHaveClass('dnb-help-button__inline--open')
+  })
+
+  it('should toggle open state when Space key gets pressed', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.tab()
+    expect(document.querySelector('button')).toHaveFocus()
+
+    await userEvent.type(document.querySelector('button'), '{Space}')
+    await waitFor(() => {
+      expect(document.querySelector('section')).toHaveFocus()
+    })
+
+    await userEvent.keyboard('{Space}')
+    await waitFor(() => {
+      expect(document.querySelector('button')).toHaveFocus()
+    })
+  })
+
+  it('should toggle open state when Enter key gets pressed', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.tab()
+    expect(document.querySelector('button')).toHaveFocus()
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => {
+      expect(document.querySelector('section')).toHaveFocus()
+    })
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => {
+      expect(document.querySelector('button')).toHaveFocus()
+    })
+  })
+
+  it('should set focus on the button when closing with Escape key', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.tab()
+    expect(document.querySelector('button')).toHaveFocus()
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => {
+      expect(document.querySelector('section')).toHaveFocus()
+    })
+
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => {
+      expect(document.querySelector('button')).toHaveFocus()
+    })
+  })
+
+  it('should close when Escape key on the button gets pressed', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    const button = document.querySelector('button')
+
+    await userEvent.type(button, '{Space}')
+    expect(button).toHaveClass('dnb-help-button__inline--open')
+
+    await userEvent.type(button, '{Escape}')
+    expect(button).not.toHaveClass('dnb-help-button__inline--open')
+  })
+
+  it('should display title when open', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    const button = document.querySelector('button')
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).not.toBeInTheDocument()
+
+    await userEvent.click(button)
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).toHaveTextContent('Help title')
+  })
+
+  it('should respect size props', () => {
+    render(<HelpButtonInline size="large" />)
+
+    const button = document.querySelector('button')
+    expect(button).toHaveClass('dnb-button--icon-size-medium')
+  })
+
+  it('should not render content when contentId was given', () => {
+    render(
+      <HelpButtonInline
+        contentId="unique"
+        help={{ open: true, title: 'Help title' }}
+      />
+    )
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+    ).not.toBeInTheDocument()
+  })
+
+  it('should have aria-controls attribute', () => {
+    render(
+      <>
+        <HelpButtonInline
+          contentId="unique"
+          help={{ open: true, title: 'Help title' }}
+        />
+        <HelpButtonInlineContent contentId="unique" />
+      </>
+    )
+
+    const button = document.querySelector('button')
+    expect(button).toHaveAttribute('aria-controls', 'unique-content')
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+    ).toHaveAttribute('id', 'unique-content')
+  })
+
+  it('should have aria-label attribute', () => {
+    render(<HelpButtonInline help={{ open: true, title: 'Help title' }} />)
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+    ).toHaveAttribute('aria-label', 'Help title')
+  })
+
+  it('should have aria-label attribute when title is HTML', () => {
+    render(
+      <HelpButtonInline
+        help={{
+          open: true,
+          title: <span>Help title</span>,
+        }}
+      />
+    )
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+    ).toHaveAttribute('aria-label', 'Help title')
+  })
+
+  it('should support HTML as title and content', () => {
+    render(
+      <HelpButtonInline
+        help={{
+          open: true,
+          title: <span>Help title</span>,
+          content: <span>Some content</span>,
+        }}
+      />
+    )
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+        .innerHTML
+    ).toContain(`<span>Help title</span>`)
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+        .innerHTML
+    ).toContain(`<span>Some content</span>`)
+  })
+
+  it('should render dialog when renderAs is "dialog"', async () => {
+    render(
+      <HelpButtonInline
+        help={{ renderAs: 'dialog', title: 'Dialog Title' }}
+      />
+    )
+
+    await userEvent.click(document.querySelector('button'))
+    expect(document.querySelector('.dnb-dialog')).toBeInTheDocument()
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).not.toBeInTheDocument()
+  })
+
+  it('should set focus on the content when open', async () => {
+    render(<HelpButtonInline help={{ title: 'Help title' }} />)
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.click(document.querySelector('button'))
+    await waitFor(() => {
+      expect(
+        document.querySelector('.dnb-help-button__content .dnb-section')
+      ).toHaveFocus()
+    })
+
+    await userEvent.click(document.querySelector('button'))
+    expect(document.querySelector('button')).toHaveFocus()
+
+    await userEvent.click(document.querySelector('button'))
+    await waitFor(() => {
+      const section = document.querySelector(
+        '.dnb-help-button__content .dnb-section'
+      )
+      expect(section).toHaveFocus()
+      expect(section).toHaveClass('dnb-no-focus')
+    })
+  })
+
+  it('should not set focus on the content when open is true', async () => {
+    render(<HelpButtonInline help={{ open: true, title: 'Help title' }} />)
+
+    expect(document.body).toHaveFocus()
+
+    await userEvent.click(document.querySelector('button'))
+    expect(document.querySelector('button')).toHaveFocus()
+
+    await userEvent.click(document.querySelector('button'))
+    await waitFor(() => {
+      expect(
+        document.querySelector('.dnb-help-button__content .dnb-section')
+      ).toHaveFocus()
+    })
+  })
+})
+
+describe('HelpButtonInlineContent Component', () => {
+  it('should render content when open', () => {
+    render(
+      <HelpButtonInlineContent
+        contentId="test-content"
+        help={{
+          open: true,
+          content: 'Some content',
+        }}
+      />
+    )
+
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).toBeInTheDocument()
+  })
+
+  it('should have tabindex with -1', () => {
+    render(
+      <HelpButtonInlineContent
+        contentId="test-content"
+        help={{
+          open: true,
+          content: 'Some content',
+        }}
+      />
+    )
+
+    expect(
+      document.querySelector('.dnb-help-button__content .dnb-section')
+    ).toHaveAttribute('tabindex', '-1')
+  })
+
+  it('should not render content when closed', () => {
+    render(<HelpButtonInlineContent contentId="test-content" />)
+
+    expect(
+      document.querySelector('.dnb-help-button__content')
+    ).not.toBeInTheDocument()
+  })
+
+  it('should respect spacing props', () => {
+    render(
+      <HelpButtonInlineContent
+        contentId="test-content"
+        help={{ open: true }}
+        top="large"
+        bottom="small"
+      />
+    )
+
+    expect(document.querySelector('.dnb-section')).toHaveClass(
+      'dnb-space__top--large'
+    )
+  })
+})
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
index dc31ef8413c..787af0cfc6e 100644
--- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
@@ -567,9 +567,112 @@ button.dnb-button::-moz-focus-inner {
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }"
@@ -577,7 +680,10 @@ button.dnb-button::-moz-focus-inner {
 
 exports[`HelpButton scss have to match default theme snapshot 1`] = `
 "/*
- * Np theme is provided
+ * Help button theme for UI
  *
- */"
+ */
+.dnb-help-button__content {
+  --help-button-content-background: var(--color-lavender);
+}"
 `;
diff --git a/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button-inline.scss b/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button-inline.scss
new file mode 100644
index 00000000000..89353661fc5
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button-inline.scss
@@ -0,0 +1,128 @@
+/*
+ * HelpButton component
+ *
+ */
+
+@import '../../button/style/themes/button-mixins.scss';
+
+.dnb-help-button {
+  &.dnb-help-button__inline {
+    &--open {
+      @include buttonHoverStyle(null, null, var(--color-emerald-green));
+    }
+  }
+}
+
+.dnb-help-button__inline {
+  svg {
+    // To avoid the animations from jumping in Safari
+    will-change: transform;
+  }
+
+  svg:nth-of-type(2) {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    opacity: 0;
+  }
+
+  &--open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-in 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--open)#{&}--was-open {
+    svg:nth-of-type(1) {
+      opacity: 0;
+      animation: animate-question 400ms var(--easing-default) 200ms
+        forwards;
+    }
+    svg:nth-of-type(2) {
+      animation: rotate-icon-out 400ms var(--easing-default) forwards;
+    }
+  }
+
+  &:not(#{&}--user-intent),
+  html[data-visual-test] & {
+    svg {
+      animation-duration: 0ms;
+    }
+  }
+
+  @keyframes rotate-icon-in {
+    from {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+  }
+
+  @keyframes rotate-icon-out {
+    0% {
+      opacity: 1;
+      transform: rotate(90deg);
+    }
+    30% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animate-question {
+    from {
+      opacity: 0;
+      transform: rotate(10deg);
+    }
+    to {
+      opacity: 1;
+      transform: rotate(0deg);
+    }
+  }
+}
+
+.dnb-help-button__content {
+  .dnb-section {
+    --background-color: var(--help-button-content-background);
+
+    // Because we don't use/need an outline, we need to add to get a wider corner radius.
+    --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+
+    .dnb-p {
+      max-width: 60ch; // to enhance readability;
+
+      transition: transform 400ms var(--easing-default) 40ms;
+      transform: translate3d(0, -0.5rem, 0);
+    }
+  }
+
+  // Defines the negative margin (extra border) to align on UX design.
+  --help-button-indent-width: var(--card-outline-width);
+
+  :not(.dnb-card) & .dnb-section {
+    // Because no outline, we need to stretch the content to the left and right,
+    // so it is aligned on how the Card is displayed.
+    margin-left: calc(var(--help-button-indent-width) * -1);
+    margin-right: calc(var(--help-button-indent-width) * -1);
+
+    // Use a border instead of the original outline,
+    // because is has no animation artifacts.
+    border: var(--help-button-indent-width) solid
+      var(--help-button-content-background);
+    border-top: none;
+    border-bottom: none;
+  }
+
+  &.dnb-height-animation--parallax .dnb-section .dnb-p {
+    transform: translate3d(0, 0, 0);
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button.scss b/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button.scss
index ebb469e2b44..11037d95618 100644
--- a/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button.scss
+++ b/packages/dnb-eufemia/src/components/help-button/style/dnb-help-button.scss
@@ -1,10 +1,11 @@
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
- *
  */
 
+@import '../../button/style/themes/button-mixins.scss';
+@import './dnb-help-button-inline.scss';
+
 .dnb-help-button {
   & .dnb-button__bounding {
     transform: scale(1.5);
diff --git a/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-sbanken.scss
new file mode 100644
index 00000000000..9276a91d99b
--- /dev/null
+++ b/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-sbanken.scss
@@ -0,0 +1,10 @@
+/*
+ * Help button theme for Sbanken
+ *
+ */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--sb-color-green);
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-ui.scss b/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-ui.scss
index 923c1e6d8c9..d65f67aed7d 100644
--- a/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/help-button/style/themes/dnb-help-button-theme-ui.scss
@@ -1,4 +1,10 @@
 /*
- * Np theme is provided
+ * Help button theme for UI
  *
  */
+
+.dnb-help-button {
+  &__content {
+    --help-button-content-background: var(--color-lavender);
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png
index ae065a6bce4..dbda5c6fa88 100644
Binary files a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png and b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png
index 7a94769c14f..72a32389e08 100644
Binary files a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png and b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-for-ui-have-to-match-stretched-input-with-status.snap.png differ
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 bf0217c5469..3472c02b451 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
@@ -574,9 +574,112 @@ button.dnb-button::-moz-focus-inner {
 /*
  * HelpButton component
  *
- * TODO: Set spacing in the theme file, as theme comes later in the stack
+ */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+/*
+ * HelpButton component
  *
  */
+/*
+ * Utilities
+ */ /*
+* Button mixins
+*
+*/
+.dnb-help-button.dnb-help-button__inline--open {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+
+.dnb-help-button__inline svg {
+  will-change: transform;
+}
+.dnb-help-button__inline svg:nth-of-type(2) {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(1) {
+  opacity: 0;
+}
+.dnb-help-button__inline--open svg:nth-of-type(2) {
+  animation: rotate-icon-in 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(1) {
+  opacity: 0;
+  animation: animate-question 400ms var(--easing-default) 200ms forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--open).dnb-help-button__inline--was-open svg:nth-of-type(2) {
+  animation: rotate-icon-out 400ms var(--easing-default) forwards;
+}
+.dnb-help-button__inline:not(.dnb-help-button__inline--user-intent) svg, html[data-visual-test] .dnb-help-button__inline svg {
+  animation-duration: 0ms;
+}
+@keyframes rotate-icon-in {
+  from {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+}
+@keyframes rotate-icon-out {
+  0% {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+}
+@keyframes animate-question {
+  from {
+    opacity: 0;
+    transform: rotate(10deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
+}
+
+.dnb-help-button__content {
+  --help-button-indent-width: var(--card-outline-width);
+}
+.dnb-help-button__content .dnb-section {
+  --background-color: var(--help-button-content-background);
+  --rounded-corner--value: calc(var(--card-outline-width) + 0.5rem);
+}
+.dnb-help-button__content .dnb-section .dnb-p {
+  max-width: 60ch;
+  transition: transform 400ms var(--easing-default) 40ms;
+  transform: translate3d(0, -0.5rem, 0);
+}
+:not(.dnb-card) .dnb-help-button__content .dnb-section {
+  margin-left: calc(var(--help-button-indent-width) * -1);
+  margin-right: calc(var(--help-button-indent-width) * -1);
+  border: var(--help-button-indent-width) solid var(--help-button-content-background);
+  border-top: none;
+  border-bottom: none;
+}
+.dnb-help-button__content.dnb-height-animation--parallax .dnb-section .dnb-p {
+  transform: translate3d(0, 0, 0);
+}
+
 .dnb-help-button .dnb-button__bounding {
   transform: scale(1.5);
 }
diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
index 39491f7462b..4b8f5219b7a 100644
--- a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap
@@ -16,6 +16,8 @@ exports[`Table scss has to match style dependencies css 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -307,6 +309,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -329,6 +333,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -448,6 +454,8 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn
 *
 */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
index 9255f056b0c..bc3e69bc6a5 100644
--- a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
@@ -16,6 +16,8 @@ exports[`Tabs scss has to match style dependencies css 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
@@ -347,6 +349,8 @@ exports[`Tabs scss have to match default theme snapshot 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
index 9d685118493..42fafb0c614 100644
--- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
@@ -572,6 +572,8 @@ button.dnb-button::-moz-focus-inner {
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
diff --git a/packages/dnb-eufemia/src/components/textarea/Textarea.js b/packages/dnb-eufemia/src/components/textarea/Textarea.js
index eb4da6fb14d..6b2d4c8702b 100644
--- a/packages/dnb-eufemia/src/components/textarea/Textarea.js
+++ b/packages/dnb-eufemia/src/components/textarea/Textarea.js
@@ -436,7 +436,11 @@ export default class Textarea extends React.PureComponent {
       : {}
 
     const textareaParams = {
-      className: classnames('dnb-textarea__textarea', textarea_class),
+      className: classnames(
+        'dnb-textarea__textarea',
+        'dnb-input__border',
+        textarea_class
+      ),
       role: 'textbox',
       value: hasValue ? value : '',
       id,
diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
index a09776ead38..b813b4c496d 100644
--- a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -401,7 +401,7 @@ exports[`Textarea scss have to match default theme snapshot 1`] = `
   background-color: var(--color-mint-green);
   text-shadow: none;
 }
-.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):hover ~ .dnb-textarea__state {
+.dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):focus ~ .dnb-textarea__state, .dnb-textarea__textarea:not([disabled]):not(.dnb-textarea--disabled):not(.no-hover):hover ~ .dnb-textarea__state {
   --textarea-border-color: var(--textarea-border-color--hover);
   --textarea-border-width: var(--textarea-border-width--hover);
   --textarea-border-inset: ;
diff --git a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
index edc86d52b5b..06b189dff4e 100644
--- a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss
@@ -24,7 +24,8 @@
   }
 
   &__textarea:not([disabled]):not(#{&}--disabled):focus ~ &__state,
-  &__textarea:not([disabled]):not(#{&}--disabled):hover ~ &__state {
+  &__textarea:not([disabled]):not(#{&}--disabled):not(.no-hover):hover
+    ~ &__state {
     --textarea-border-color: var(--textarea-border-color--hover);
     --textarea-border-width: var(--textarea-border-width--hover);
     --textarea-border-inset: ;
diff --git a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index fabf5e4d60e..58b2fe0c4e6 100644
--- a/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -61,6 +61,8 @@ exports[`Timeline scss have to match default theme snapshot 1`] = `
  * Utilities
  */
 /*
+ * Utilities
+ */ /*
 * Button mixins
 *
 */
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
index d1d376589e0..077c4f8f28c 100644
--- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
@@ -744,6 +744,7 @@ button .dnb-form-status__text {
   --upload-background--active: lightgray;
   --upload-border: gray;
   --upload-border--active: black;
+  --upload-border-width: 2px;
   --upload-list-border: black;
   --upload-icon--default: black;
   --upload-icon--warning: red;
@@ -775,8 +776,8 @@ button .dnb-form-status__text {
 }
 .dnb-upload--active .dnb-upload__outline {
   inset: -1px;
-  width: calc(100% + 2px);
-  height: calc(100% + 2px);
+  width: calc(100% + var(--upload-border-width));
+  height: calc(100% + var(--upload-border-width));
   stroke: var(--upload-border--active);
 }
 .dnb-upload--active .dnb-upload__outline rect {
diff --git a/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss b/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss
index 53bf0314fa7..8f979a744fa 100644
--- a/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss
+++ b/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss
@@ -10,6 +10,7 @@
   --upload-background--active: lightgray;
   --upload-border: gray;
   --upload-border--active: black;
+  --upload-border-width: 2px;
   --upload-list-border: black;
   --upload-icon--default: black;
   --upload-icon--warning: red;
@@ -49,8 +50,8 @@
 
   &--active &__outline {
     inset: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
+    width: calc(100% + var(--upload-border-width));
+    height: calc(100% + var(--upload-border-width));
 
     stroke: var(--upload-border--active);
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
index 8a3f439c20c..eebcf937713 100644
--- a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
@@ -1736,7 +1736,7 @@ describe('DataContext.Provider', () => {
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
       // Use fireEvent over userEvent, because of its sync nature
@@ -1744,7 +1744,6 @@ describe('DataContext.Provider', () => {
         target: { value: '123' },
       })
 
-      expect(indicator).toHaveTextContent('My label...')
       expect(indicator).toHaveClass(
         'dnb-forms-submit-indicator--state-pending'
       )
@@ -1770,7 +1769,7 @@ describe('DataContext.Provider', () => {
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
       // Use fireEvent over userEvent, because of its sync nature
@@ -1778,7 +1777,6 @@ describe('DataContext.Provider', () => {
         target: { value: '123' },
       })
 
-      expect(indicator).toHaveTextContent('My label...')
       expect(indicator).toHaveClass(
         'dnb-forms-submit-indicator--state-pending'
       )
@@ -2059,15 +2057,15 @@ describe('DataContext.Provider', () => {
       const events = []
 
       const validator = debounceAsync(async () => {
-        await wait(1)
+        await wait(101)
         events.push('validator')
       })
       const onChangeForm: OnChange = async () => {
-        await wait(2)
+        await wait(102)
         events.push('onChangeForm')
       }
       const onChangeField: OnChangeValue = async () => {
-        await wait(3)
+        await wait(103)
         events.push('onChangeField')
       }
 
@@ -2079,26 +2077,15 @@ describe('DataContext.Provider', () => {
             onChange={onChangeField}
             validator={validator}
           />
-          <Form.SubmitButton />
         </DataContext.Provider>
       )
 
       const input = document.querySelector('input')
       const indicator = document.querySelector(
-        'label .dnb-forms-submit-indicator'
+        '.dnb-forms-submit-indicator'
       )
 
-      // Use fireEvent over userEvent, because of its sync nature
-      fireEvent.change(input, {
-        target: { value: '123' },
-      })
-
-      await waitFor(() => {
-        expect(indicator).toHaveTextContent('My label...')
-        expect(indicator).toHaveClass(
-          'dnb-forms-submit-indicator--state-pending'
-        )
-      })
+      await userEvent.type(input, '123')
 
       await waitFor(() => {
         expect(events).toEqual(['validator'])
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx
index 9905abaa1ac..0a2978b9c80 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx
@@ -1,19 +1,15 @@
 import React, { useCallback, useContext, useMemo } from 'react'
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components'
 import classnames from 'classnames'
+import { convertJsxToString } from '../../../../shared/component-helper'
+import { Checkbox, HelpButton, ToggleButton } from '../../../../components'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 import { useFieldProps } from '../../hooks'
 import { checkForError, ReturnAdditional } from '../../hooks/useFieldProps'
-import {
-  DefaultErrorMessages,
-  FieldHelpProps,
-  FieldProps,
-  Path,
-} from '../../types'
+import { DefaultErrorMessages, FieldProps, Path } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
-import { mapOptions, Data } from '../Selection'
-import { HelpButtonProps } from '../../../../components/HelpButton'
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline'
+import { mapOptions, Data } from '../Selection'
 import DataContext from '../../DataContext/Context'
 import useDataValue from '../../hooks/useDataValue'
 import { FormError } from '../../utils'
@@ -23,7 +19,7 @@ type OptionProps = React.ComponentProps<
     value: number | string
     error: Error | FormError | undefined
     title: React.ReactNode
-    help: HelpButtonProps
+    help: HelpProps
     className: string
     children: React.ReactNode
     handleSelect: () => void
@@ -32,28 +28,27 @@ type OptionProps = React.ComponentProps<
 
 type OptionValue = string | number
 
-export type Props = FieldHelpProps &
-  FieldProps<Array<OptionValue> | undefined> & {
-    children?: React.ReactNode
-    variant?: 'checkbox' | 'button' | 'checkbox-button'
-    optionsLayout?: 'horizontal' | 'vertical'
-    /**
-     * The path to the context data (Form.Handler).
-     * The context data object needs to have a `value` and a `title` property.
-     */
-    dataPath?: Path
+export type Props = FieldProps<Array<OptionValue> | undefined> & {
+  children?: React.ReactNode
+  variant?: 'checkbox' | 'button' | 'checkbox-button'
+  optionsLayout?: 'horizontal' | 'vertical'
+  /**
+   * The path to the context data (Form.Handler).
+   * The context data object needs to have a `value` and a `title` property.
+   */
+  dataPath?: Path
 
-    /**
-     * Data to be used for the component. The object needs to have a `value` and a `title` property.
-     * The generated options will be placed above given JSX based children.
-     */
-    data?: Data
+  /**
+   * Data to be used for the component. The object needs to have a `value` and a `title` property.
+   * The generated options will be placed above given JSX based children.
+   */
+  data?: Data
 
-    errorMessages?: DefaultErrorMessages & {
-      minItems?: string
-      maxItems?: string
-    }
+  errorMessages?: DefaultErrorMessages & {
+    minItems?: string
+    maxItems?: string
   }
+}
 
 function ArraySelection(props: Props) {
   const {
@@ -65,10 +60,8 @@ function ArraySelection(props: Props) {
     variant = 'checkbox',
     layout = 'vertical',
     optionsLayout = 'vertical',
-    labelDescription,
     value,
     hasError,
-    help,
     info,
     warning,
     disabled,
@@ -90,24 +83,11 @@ function ArraySelection(props: Props) {
         variant === 'checkbox' ? 'checkbox' : 'button'
       }`,
       `dnb-forms-field-array-selection--layout-${layout}`,
-      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,
+      `dnb-forms-field-array-selection--options-layout--${optionsLayout}`,
       className
     ),
     contentClassName: 'dnb-forms-field-array-selection__options',
-    labelDescription: (
-      <>
-        {labelDescription}
-        {help ? (
-          <HelpButton
-            size="small"
-            left={labelDescription ? 'x-small' : false}
-            title={help.title}
-          >
-            {help.content}
-          </HelpButton>
-        ) : undefined}
-      </>
-    ),
+    labelHeight: 'small',
     disableStatusSummary: true,
     ...pickSpacingProps(props),
   }
@@ -133,14 +113,10 @@ function ArraySelection(props: Props) {
 
   switch (variant) {
     case 'checkbox':
-      return (
-        <FieldBlock {...fieldBlockProps} labelHeight="small">
-          {options}
-        </FieldBlock>
-      )
+      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>
     default:
       return (
-        <FieldBlock {...fieldBlockProps} labelHeight="small">
+        <FieldBlock {...fieldBlockProps}>
           <ToggleButtonGroupContext.Provider
             value={{
               status: hasError ? 'error' : undefined,
@@ -210,7 +186,7 @@ export function useCheckboxOrToggleOptions({
 
       const label = title ?? children
       const suffix = help ? (
-        <HelpButton size="small" title={help.title}>
+        <HelpButton size="small" title={convertJsxToString(help.title)}>
           {help.content}
         </HelpButton>
       ) : undefined
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx
index 13a53f7aebb..4e2161383b1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/ArraySelection.test.tsx
@@ -131,7 +131,7 @@ describe('ArraySelection', () => {
         '.dnb-forms-field-array-selection'
       )
       expect(element).toHaveClass(
-        `dnb-forms-field-array-selection--options-layout-${optionsLayout}`
+        `dnb-forms-field-array-selection--options-layout--${optionsLayout}`
       )
     })
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-button-have-to-match-button-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-button-have-to-match-button-help.snap.png
index 659f9a86992..e60a28d0fc4 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-button-have-to-match-button-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-button-have-to-match-button-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-button-have-to-match-simple-checkbox-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-button-have-to-match-simple-checkbox-button.snap.png
index 11c2ae590e6..d6e8546dfcc 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-button-have-to-match-simple-checkbox-button.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-button-have-to-match-simple-checkbox-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-help.snap.png
index 59b6fa105cc..adc4a9c9f9b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-options-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-options-vertical.snap.png
index 71037f98c3c..3f17da9947a 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-options-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-sbanken-checkbox-have-to-match-checkbox-options-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-help.snap.png
index ac116ac22b4..016f0ce25f5 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-options-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-options-vertical.snap.png
index b2cfee0dcf5..02d011bac03 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-options-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-button-have-to-match-button-options-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-button-have-to-match-simple-checkbox-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-button-have-to-match-simple-checkbox-button.snap.png
index aabed7f2444..91c9ce5e76b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-button-have-to-match-simple-checkbox-button.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-button-have-to-match-simple-checkbox-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-help.snap.png
index 71e288a3e40..a550ce58207 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-options-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-options-vertical.snap.png
index 2b05aa40fa0..01c5da8fef9 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-options-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/__tests__/__image_snapshots__/arrayselection-field-for-ui-checkbox-have-to-match-checkbox-options-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/stories/ArraySelection.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/stories/ArraySelection.stories.tsx
index 5f9e5092117..f6f8ec241b9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/stories/ArraySelection.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/stories/ArraySelection.stories.tsx
@@ -16,7 +16,14 @@ export function NestingWithLogic() {
           path="/mySelection"
           // defaultValue={['showInput']}
         >
-          <Field.Option value="nothing" title="Nothing" />
+          <Field.Option
+            value="nothing"
+            title="Nothing"
+            help={{
+              title: 'Help title',
+              content: 'Help content',
+            }}
+          />
 
           <Field.Option value="showInput" title="Show an input" />
           <Form.Visibility
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss
index ab9c3f749d2..b2e6cc94f01 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss
@@ -6,23 +6,23 @@
     --row-gap: var(--spacing-small);
   }
 
-  &--options-layout-vertical &__options {
+  &--options-layout--vertical &__options {
     display: flex;
     flex-flow: column;
     row-gap: var(--row-gap);
   }
-  &--options-layout-vertical#{&}--layout-horizontal {
+  &--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       align-items: flex-start;
     }
   }
-  &--variant-button#{&}--options-layout-vertical#{&}--layout-horizontal {
+  &--variant-button#{&}--options-layout--vertical#{&}--layout-horizontal {
     .dnb-forms-field-block__label {
       line-height: 2.5rem;
     }
   }
 
-  &--options-layout-horizontal &__options {
+  &--options-layout--horizontal &__options {
     display: flex;
     flex-flow: row wrap;
     column-gap: var(--spacing-small);
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx
index 64dfe98420e..81aee7b1d9f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/BankAccountNumber/BankAccountNumberDocs.tsx
@@ -6,11 +6,6 @@ export const BankAccountNumberProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   onBlurValidator: {
     doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to bank account number validation, using `bankAccountNumberValidator`. Can be disabled using `false`.',
     type: 'function',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/Boolean.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/Boolean.tsx
index 47f3409a0e0..75074adc69f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/Boolean.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/Boolean.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import ToggleField, { Props as ToggleFieldProps } from '../Toggle'
 import useTranslation from '../../hooks/useTranslation'
-import { FieldHelpProps, FieldProps, Path } from '../../types'
+import { FieldProps, Path } from '../../types'
 
 type BooleanProps = {
   trueText?: string
@@ -20,7 +20,7 @@ type SharedFieldProps = Omit<
 export type IndeterminateProps = SharedFieldProps & {
   dependencePaths: Array<Path>
 } & NeverBooleanProps
-export type Props = FieldHelpProps & SharedFieldProps & BooleanProps
+export type Props = SharedFieldProps & BooleanProps
 
 function BooleanComponent(props: Props | IndeterminateProps) {
   const { trueText, falseText, ...restProps } = props
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
index 692206beadd..f094a905c35 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Boolean/__tests__/Boolean.test.tsx
@@ -34,7 +34,7 @@ describe('Field.Boolean', () => {
       )
       expect(
         document.querySelector('input').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-checkbox__suffix').id)
+      ).toBe(document.querySelector('.dnb-help-button').id)
       expect(
         document
           .querySelector('.dnb-help-button')
@@ -219,12 +219,14 @@ describe('Field.Boolean', () => {
         />
       )
       expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
-      expect(document.querySelector('button')).toHaveAttribute(
-        'aria-describedby'
-      )
       expect(
-        document.querySelector('button').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
+        document.querySelector('.dnb-toggle-button__button')
+      ).toHaveAttribute('aria-describedby')
+      expect(
+        document
+          .querySelector('.dnb-toggle-button__button')
+          .getAttribute('aria-describedby')
+      ).toBe(document.querySelector('.dnb-help-button').id)
       expect(
         document
           .querySelector('.dnb-help-button')
@@ -368,12 +370,14 @@ describe('Field.Boolean', () => {
         />
       )
       expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(1)
-      expect(document.querySelector('button')).toHaveAttribute(
-        'aria-describedby'
-      )
       expect(
-        document.querySelector('button').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
+        document.querySelector('.dnb-toggle-button__button')
+      ).toHaveAttribute('aria-describedby')
+      expect(
+        document
+          .querySelector('.dnb-toggle-button__button')
+          .getAttribute('aria-describedby')
+      ).toBe(document.querySelector('.dnb-help-button').id)
       expect(
         document
           .querySelector('.dnb-help-button')
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx
index ff65186e1c1..9856e8e38c8 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx
@@ -1,7 +1,22 @@
 import React from 'react'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 
-function CompositionField(props: FieldBlockProps) {
+function CompositionField(
+  props: Pick<
+    FieldBlockProps,
+    | 'label'
+    | 'labelDescription'
+    | 'labelSrOnly'
+    | 'width'
+    | 'align'
+    | 'contentWidth'
+    | 'disabled'
+    | 'error'
+    | 'warning'
+    | 'info'
+    | 'children'
+  >
+) {
   return <FieldBlock {...props} composition />
 }
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts
index e040f710c86..f786670af48 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/CompositionDocs.ts
@@ -2,12 +2,23 @@ import { PropertiesTableProps } from '../../../../shared/types'
 import { FieldBlockProperties } from '../../FieldBlock/FieldBlockDocs'
 
 export const CompositionProperties: PropertiesTableProps = {
-  ...FieldBlockProperties,
+  label: FieldBlockProperties.label,
+  labelDescription: FieldBlockProperties.labelDescription,
+  labelSrOnly: FieldBlockProperties.labelSrOnly,
+  width: FieldBlockProperties.width,
+  contentWidth: FieldBlockProperties.contentWidth,
+  disabled: FieldBlockProperties.disabled,
+  error: FieldBlockProperties.error,
+  warning: FieldBlockProperties.warning,
+  info: FieldBlockProperties.info,
   align: {
     doc: '`center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.',
     type: ['string', 'false'],
     status: 'optional',
   },
-  asFieldset: undefined,
-  composition: undefined,
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional',
+  },
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition-small-screen.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition-small-screen.snap.png
index 2918e99bb40..f69da1d2ab3 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition-small-screen.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition-small-screen.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition.snap.png
index a4686123eff..955311785bf 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-sbanken-have-to-match-composition.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-ui-have-to-match-composition-small-screen.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-ui-have-to-match-composition-small-screen.snap.png
index 6f2be1da741..0e19e131b04 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-ui-have-to-match-composition-small-screen.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/__tests__/__image_snapshots__/composition-for-ui-have-to-match-composition-small-screen.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts
index 74dea1e73b2..20779ff5422 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts
@@ -12,10 +12,5 @@ export const currencyProperties: PropertiesTableProps = {
     type: ['code', 'symbol', 'narrowSymbol', 'name'],
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   ...numberProperties,
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
index 76c8023304c..d06cf400841 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/Date.tsx
@@ -1,11 +1,7 @@
 import React, { useCallback, useContext, useMemo } from 'react'
-import { DatePicker, HelpButton } from '../../../../components'
+import { DatePicker } from '../../../../components'
 import { useFieldProps } from '../../hooks'
-import {
-  FieldProps,
-  FieldHelpProps,
-  AllJSONSchemaVersions,
-} from '../../types'
+import { FieldProps, AllJSONSchemaVersions } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import classnames from 'classnames'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
@@ -15,17 +11,16 @@ import useTranslation from '../../hooks/useTranslation'
 import { DatePickerEvent } from '../../../../components/DatePicker'
 import { formatDate } from '../../Value/Date'
 
-export type Props = FieldHelpProps &
-  FieldProps<string, undefined | string> & {
-    // Validation
-    pattern?: string
-    /**
-     * Defines if the Date field should support a value of two dates (starting and ending date).
-     * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.
-     * Defaults to `false`.
-     */
-    range?: boolean
-  }
+export type Props = FieldProps<string, undefined | string> & {
+  // Validation
+  pattern?: string
+  /**
+   * Defines if the Date field should support a value of two dates (starting and ending date).
+   * The value needs to be a string containing two dates, separated by a pipe character (`|`) i.e. (`01-09-2024|30-09-2024`) when this is set to `true`.
+   * Defaults to `false`.
+   */
+  range?: boolean
+}
 
 function DateComponent(props: Props) {
   const translations = useTranslation()
@@ -79,7 +74,6 @@ function DateComponent(props: Props) {
     className,
     label,
     value: valueProp,
-    help,
     hasError,
     disabled,
     htmlAttributes,
@@ -131,11 +125,6 @@ function DateComponent(props: Props) {
         start_date={startDate}
         end_date={endDate}
         status={hasError ? 'error' : undefined}
-        suffix={
-          help ? (
-            <HelpButton title={help.title}>{help.content}</HelpButton>
-          ) : undefined
-        }
         range={range}
         on_change={handleChange}
         on_reset={handleChange}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts
index 69bc83371bd..9b9e744fa77 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Date/DateDocs.ts
@@ -1,11 +1,6 @@
 import { PropertiesTableProps } from '../../../../shared/types'
 
 export const DateProperties: PropertiesTableProps = {
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   range: {
     doc:
       'Defines if the Date field should support a value of two dates (starting and ending date). ' +
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx
index 2cc7b9fe779..30d6f88230b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/Expiry.tsx
@@ -1,19 +1,17 @@
 import React, { useCallback, useMemo } from 'react'
-import { FieldHelpProps, FieldProps } from '../../types'
+import { FieldProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import { useFieldProps } from '../../hooks'
 import classnames from 'classnames'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 import { MultiInputMask } from '../../../../components/input-masked'
 import type { MultiInputMaskValue } from '../../../../components/input-masked'
-import { HelpButton } from '../../../../components'
 import { useTranslation as useSharedTranslation } from '../../../../shared'
 import useTranslation from '../../hooks/useTranslation'
 
 type ExpiryValue = MultiInputMaskValue<'month' | 'year'>
 
-export type ExpiryProps = FieldHelpProps &
-  FieldProps<string, undefined | ''>
+export type ExpiryProps = FieldProps<string, undefined | ''>
 
 function Expiry(props: ExpiryProps) {
   const {
@@ -59,7 +57,6 @@ function Expiry(props: ExpiryProps) {
     hasError,
     info,
     warning,
-    help,
     disabled,
     value = '',
     htmlAttributes,
@@ -130,11 +127,6 @@ function Expiry(props: ExpiryProps) {
             ...htmlAttributes,
           },
         ]}
-        suffix={
-          help ? (
-            <HelpButton title={help.title}>{help.content}</HelpButton>
-          ) : undefined
-        }
       />
     </FieldBlock>
   )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png
index bcfbe0fddfb..75f8e9177e7 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png
index e8a69bbe096..d82185a4131 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png
index 74ab8b7ab6b..8658eb61c33 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
index efaaab03614..a307e4a78a0 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png
index 446b83c0835..23edc7ba087 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png
index 44c5304e82c..c3bbae05647 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png
index 5acc71a8616..ce539d2b750 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png
index 23bc55e3993..7b264a57d93 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.tsx
index 809a0109cc4..65ab2b3140d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/NationalIdentityNumber/NationalIdentityNumberDocs.tsx
@@ -6,11 +6,6 @@ export const NationalIdentityNumberProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   onBlurValidator: {
     doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to validation of the identification number(national identity numbers and D numbers), using `dnrAndFnrValidator`. Can be disabled using `false`.',
     type: 'function',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
index 2408bbe5e82..a59b015083b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useRef,
 } from 'react'
-import { InputMasked, HelpButton, Button } from '../../../../components'
+import { InputMasked, Button } from '../../../../components'
 import { InputMaskedProps } from '../../../../components/InputMasked'
 import type {
   InputAlign,
@@ -20,44 +20,39 @@ import FieldBlock, {
   FieldBlockWidth,
 } from '../../FieldBlock'
 import { useFieldProps } from '../../hooks'
-import {
-  FieldProps,
-  FieldHelpProps,
-  AllJSONSchemaVersions,
-} from '../../types'
+import { FieldProps, AllJSONSchemaVersions } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import { ButtonProps, ButtonSize } from '../../../../components/Button'
 import { clamp } from '../../../../components/slider/SliderHelpers'
 import DataContext from '../../DataContext/Context'
 
-export type Props = FieldHelpProps &
-  FieldProps<number, undefined | number> & {
-    innerRef?: React.RefObject<HTMLInputElement>
-    inputClassName?: string
-    currency?: InputMaskedProps['as_currency']
-    currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'
-    percent?: InputMaskedProps['as_percent']
-    mask?: InputMaskedProps['mask']
-    step?: number
-    startWith?: number
-    // Formatting
-    decimalLimit?: number
-    allowNegative?: boolean
-    disallowLeadingZeroes?: boolean
-    prefix?: string | ((value: number) => string)
-    suffix?: string | ((value: number) => string)
-    // Validation
-    minimum?: number // aka greater than or equal to
-    maximum?: number // aka less than or equal to
-    exclusiveMinimum?: number // aka greater than
-    exclusiveMaximum?: number // aka less than
-    multipleOf?: number
-    // Styling
-    size?: InputSize
-    width?: FieldBlockWidth
-    align?: InputAlign
-    showStepControls?: boolean
-  }
+export type Props = FieldProps<number, undefined | number> & {
+  innerRef?: React.RefObject<HTMLInputElement>
+  inputClassName?: string
+  currency?: InputMaskedProps['as_currency']
+  currencyDisplay?: 'code' | 'symbol' | 'narrowSymbol' | 'name'
+  percent?: InputMaskedProps['as_percent']
+  mask?: InputMaskedProps['mask']
+  step?: number
+  startWith?: number
+  // Formatting
+  decimalLimit?: number
+  allowNegative?: boolean
+  disallowLeadingZeroes?: boolean
+  prefix?: string | ((value: number) => string)
+  suffix?: string | ((value: number) => string)
+  // Validation
+  minimum?: number // aka greater than or equal to
+  maximum?: number // aka less than or equal to
+  exclusiveMinimum?: number // aka greater than
+  exclusiveMaximum?: number // aka less than
+  multipleOf?: number
+  // Styling
+  size?: InputSize
+  width?: FieldBlockWidth
+  align?: InputAlign
+  showStepControls?: boolean
+}
 
 const defaultMinimum = Number.MIN_SAFE_INTEGER
 const defaultMaximum = Number.MAX_SAFE_INTEGER
@@ -145,7 +140,6 @@ function NumberComponent(props: Props) {
     disabled,
     htmlAttributes,
     hasError,
-    help,
     size,
     width,
     align,
@@ -357,10 +351,6 @@ function NumberComponent(props: Props) {
     ...htmlAttributes,
     status: hasError ? 'error' : undefined,
     stretch: Boolean(width),
-    suffix:
-      help && !showStepControls ? (
-        <HelpButton title={help.title}>{help.content}</HelpButton>
-      ) : undefined,
   }
   Object.assign(inputProps, ariaParams)
 
@@ -372,11 +362,6 @@ function NumberComponent(props: Props) {
           <InputMasked {...inputProps} />
           {<Button {...increaseProps} />}
         </span>
-        {help && (
-          <HelpButton left="x-small" title={help.title}>
-            {help.content}
-          </HelpButton>
-        )}
       </FieldBlock>
     )
   }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts
index 5e111694ee4..c365d5312e4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/NumberDocs.ts
@@ -63,11 +63,6 @@ export const numberProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   autoComplete: {
     doc: 'For HTML `autocomplete` attributes.',
     type: ['on', 'string'],
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
index 73971743467..4815ed4a3da 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -40,7 +40,7 @@ describe('Field.Number', () => {
       )
       expect(
         document.querySelector('input').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-input__suffix').id)
+      ).toBe(document.querySelector('.dnb-help-button').id)
       expect(
         document
           .querySelector('.dnb-help-button')
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png
index 67093d9967a..4ca1fab6769 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-with-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png
index 0828e1bb1a9..4ec404c2469 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-with-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
index 9cdcc8cd4a6..ed6093613b5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
@@ -137,4 +137,11 @@
       }
     }
   }
+
+  // Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
+  @include allBelow(xx-small) {
+    .dnb-input__shell {
+      width: 90%;
+    }
+  }
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
index 91dac9e199b..6ed84586d87 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Option/Option.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import classnames from 'classnames'
-import type { FieldHelpProps, FieldProps } from '../../types'
+import type { FieldProps } from '../../types'
 
-export type Props = FieldHelpProps &
-  FieldProps<number | string> & {
-    title?: React.ReactNode
-    text?: React.ReactNode
-    children?: React.ReactNode
-  }
+export type Props = FieldProps<number | string> & {
+  title?: React.ReactNode
+  text?: React.ReactNode
+  children?: React.ReactNode
+}
 
 export default function Option({
   className,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Option/OptionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Option/OptionDocs.ts
new file mode 100644
index 00000000000..2671ebd960c
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Option/OptionDocs.ts
@@ -0,0 +1,26 @@
+import { PropertiesTableProps } from '../../../../shared/types'
+import { FieldProperties } from '../FieldDocs'
+
+export const OptionProperties: PropertiesTableProps = {
+  value: {
+    doc: 'Value for this option.',
+    type: ['string', 'number'],
+    status: 'optional',
+  },
+  title: {
+    doc: 'Text title for the option.',
+    type: 'string',
+    status: 'optional',
+  },
+  text: {
+    doc: 'Secondary text.',
+    type: 'string',
+    status: 'optional',
+  },
+  help: FieldProperties.help,
+  children: {
+    doc: 'Optional way to provide `title`.',
+    type: 'React.Node',
+    status: 'optional',
+  },
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx
index ed70081ea06..55f1ee01dce 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumberDocs.tsx
@@ -6,11 +6,6 @@ export const OrganizationNumberProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   onBlurValidator: {
     doc: 'Custom validator function that is triggered when the user leaves a field (e.g., blurring a text input or closing a dropdown). The function can be either asynchronous or synchronous. The first parameter is the value, and the second parameter returns an object containing { errorMessages, connectWithPath, validators }. Defaults to organization number validation, using `organizationNumberValidator`. Can be disabled using `false`.',
     type: 'function',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx
index 3ca113bd1f3..16eb5211759 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx
@@ -207,6 +207,7 @@ describe('Password component', () => {
       'dnb-forms-field-block',
       'dnb-forms-field-string',
       'dnb-forms-field-password',
+      'dnb-forms-field-block--content-width-large',
     ])
   })
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
index 97fc6b9f94a..e44d9df3a7f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumber.tsx
@@ -16,7 +16,6 @@ import StringField, { Props as StringFieldProps } from '../String'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 import { useFieldProps } from '../../hooks'
 import {
-  FieldHelpProps,
   FieldPropsWithExtraValue,
   AllJSONSchemaVersions,
 } from '../../types'
@@ -30,43 +29,42 @@ import {
 import useTranslation from '../../hooks/useTranslation'
 import { DrawerListDataObject } from '../../../../fragments/DrawerList'
 
-export type Props = FieldHelpProps &
-  Omit<
-    FieldPropsWithExtraValue<
-      string,
-      { country: string; phone: string },
-      undefined | string
-    >,
-    'layout' | 'layoutOptions'
-  > & {
-    countryCodeFieldClassName?: string
-    numberFieldClassName?: string
-    countryCodePlaceholder?: string
-    countryCodeLabel?: string
-    numberMask?: InputMaskedProps['mask']
-    pattern?: StringFieldProps['pattern']
-    width?: 'large' | 'stretch'
-    inputRef?: React.RefObject<HTMLInputElement>
-    omitCountryCodeField?: boolean
-    onCountryCodeChange?: (value: string | undefined) => void
-    onNumberChange?: (value: string | undefined) => void
-
-    /**
-     * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.
-     * Defaults to `Prioritized`.
-     */
-    countries?: CountryFilterSet
-
-    /**
-     * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.
-     */
-    filterCountries?: (country: CountryType) => boolean
-
-    /**
-     * For internal testing purposes
-     */
-    noAnimation?: boolean
-  }
+export type Props = Omit<
+  FieldPropsWithExtraValue<
+    string,
+    { country: string; phone: string },
+    undefined | string
+  >,
+  'layout' | 'layoutOptions'
+> & {
+  countryCodeFieldClassName?: string
+  numberFieldClassName?: string
+  countryCodePlaceholder?: string
+  countryCodeLabel?: string
+  numberMask?: InputMaskedProps['mask']
+  pattern?: StringFieldProps['pattern']
+  width?: 'large' | 'stretch'
+  inputRef?: React.RefObject<HTMLInputElement>
+  omitCountryCodeField?: boolean
+  onCountryCodeChange?: (value: string | undefined) => void
+  onNumberChange?: (value: string | undefined) => void
+
+  /**
+   * Defines the countries to filter. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.
+   * Defaults to `Prioritized`.
+   */
+  countries?: CountryFilterSet
+
+  /**
+   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.
+   */
+  filterCountries?: (country: CountryType) => boolean
+
+  /**
+   * For internal testing purposes
+   */
+  noAnimation?: boolean
+}
 
 // Important for the default value to be defined here, and not after the useFieldProps call, to avoid the UI jumping
 // back to +47 once the user empty the field so handleChange send out undefined.
@@ -373,6 +371,7 @@ function PhoneNumber(props: Props) {
     className: classnames('dnb-forms-field-phone-number', className),
     width: omitCountryCodeField || props.width ? undefined : width,
     label: undefined,
+    help: undefined,
     ...pickSpacingProps(props),
   }
 
@@ -434,7 +433,7 @@ function PhoneNumber(props: Props) {
           width={
             omitCountryCodeField ? 'medium' : props.width ?? 'stretch'
           }
-          help={help}
+          help={{ ...help, breakout: false }}
           required={required}
           errorMessages={errorMessages}
           validateInitially={validateInitially}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs.ts
index 06fbcd9b925..832c400ec4d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/PhoneNumberDocs.ts
@@ -17,11 +17,6 @@ export const PhoneNumberProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   omitCountryCodeField: {
     doc: 'If `true` is given, then everything related to country code is removed.',
     type: 'boolean',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-long-label.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-long-label.snap.png
index 678c4e9dd09..6eff2c9447a 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-long-label.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/__image_snapshots__/phonenumber-have-to-match-long-label.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx
index 6d3d41dd2db..217ec00b36c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx
@@ -3,13 +3,16 @@ import classnames from 'classnames'
 import { Props as FieldBlockProps } from '../../FieldBlock'
 import StringField, { Props as StringFieldProps } from '../String'
 import CompositionField from '../Composition'
-import { FieldHelpProps, Path } from '../../types'
+import { Path } from '../../types'
 import useTranslation from '../../hooks/useTranslation'
 import useDataValue from '../../hooks/useDataValue'
 import { COUNTRY as defaultCountry } from '../../../../shared/defaults'
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline'
 
-export type Props = FieldHelpProps &
-  Omit<FieldBlockProps, 'children'> &
+export type Props = Pick<
+  FieldBlockProps,
+  'error' | 'warning' | 'info' | 'width' | 'className'
+> &
   Partial<Record<'postalCode' | 'city', StringFieldProps>> & {
     /**
      * Defines which country the postal code and city is for.
@@ -17,8 +20,8 @@ export type Props = FieldHelpProps &
      * You can also use the value of another field to define the country, by using a path value i.e. `/myCountryPath`.
      * Default: `NO`
      */
-    // Add type for all country codes?
     country?: Path | string
+    help?: HelpProps
   }
 
 function PostalCodeAndCity(props: Props) {
@@ -111,6 +114,7 @@ function PostalCodeAndCity(props: Props) {
       />
 
       <StringField
+        help={help}
         {...city}
         className={classnames(
           'dnb-forms-field-postal-code-and-city__city',
@@ -126,7 +130,6 @@ function PostalCodeAndCity(props: Props) {
         trim
         width={cityWidth ?? 'stretch'}
         autoComplete="address-level2"
-        help={help}
       />
     </CompositionField>
   )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts
index 8d6e64f855c..1c00e62b0fb 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCityDocs.ts
@@ -1,4 +1,5 @@
 import { PropertiesTableProps } from '../../../../shared/types'
+import { FieldProperties } from '../FieldDocs'
 
 export const PostalCodeAndCityProperties: PropertiesTableProps = {
   country: {
@@ -20,9 +21,5 @@ export const PostalCodeAndCityProperties: PropertiesTableProps = {
     type: 'object',
     status: 'required',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
+  help: FieldProperties.help,
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-long-label.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-long-label.snap.png
index 77c2b013dd3..92752a8b927 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-long-label.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/__tests__/__image_snapshots__/postalcodeandcity-have-to-match-long-label.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/stories/PostalCodeAndCity.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/stories/PostalCodeAndCity.stories.tsx
index cc4452bb867..4c12c6267bd 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/stories/PostalCodeAndCity.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/stories/PostalCodeAndCity.stories.tsx
@@ -20,6 +20,11 @@ export const PostalCodeAndCity = () => {
           'Flere feil (test) som går over flere linjer og som aldrig slutter'
         )
       }
+      help={{
+        title: 'Help is available',
+        content:
+          'Somewhere along the way, we must learn that there is nothing greater than to do something for others.',
+      }}
     />
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx
index 1db7bd742aa..3386daa24c1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import SharedContext from '../../../../shared/Context'
 import FieldBlockContext from '../../FieldBlock/FieldBlockContext'
 import { LOCALE } from '../../../../shared/defaults'
-import { Autocomplete, HelpButton } from '../../../../components'
+import { Autocomplete } from '../../../../components'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import countries, {
   prioritizedCountries,
@@ -11,7 +11,7 @@ import countries, {
   type CountryLang,
 } from '../../constants/countries'
 import { useFieldProps } from '../../hooks'
-import { FieldHelpProps, FieldPropsWithExtraValue } from '../../types'
+import { FieldPropsWithExtraValue } from '../../types'
 import FieldBlock, {
   Props as FieldBlockProps,
   FieldBlockWidth,
@@ -24,29 +24,32 @@ export type CountryFilterSet =
   | 'Europe'
   | 'Prioritized'
 
-export type Props = FieldHelpProps &
-  FieldPropsWithExtraValue<string, CountryType, undefined | string> & {
-    /**
-     * Lists only the countries you want to show. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.
-     * Defaults to `Prioritized`.
-     */
-    countries?: CountryFilterSet
-
-    /**
-     * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.
-     */
-    filterCountries?: (country: CountryType) => boolean
-
-    /**
-     * For internal testing purposes
-     */
-    noAnimation?: boolean
-
-    /**
-     * The width of the component.
-     */
-    width?: FieldBlockWidth
-  }
+export type Props = FieldPropsWithExtraValue<
+  string,
+  CountryType,
+  undefined | string
+> & {
+  /**
+   * Lists only the countries you want to show. Can be `Scandinavia`, `Nordic`, `Europe` or `Prioritized`.
+   * Defaults to `Prioritized`.
+   */
+  countries?: CountryFilterSet
+
+  /**
+   * Use this prop to filter out certain countries. The function receives the country object and should return a boolean. Returning `false` will omit the country.
+   */
+  filterCountries?: (country: CountryType) => boolean
+
+  /**
+   * For internal testing purposes
+   */
+  noAnimation?: boolean
+
+  /**
+   * The width of the component.
+   */
+  width?: FieldBlockWidth
+}
 
 function SelectCountry(props: Props) {
   const sharedContext = useContext(SharedContext)
@@ -108,7 +111,6 @@ function SelectCountry(props: Props) {
     disabled,
     value,
     width,
-    help,
     htmlAttributes,
     handleFocus,
     handleBlur,
@@ -247,11 +249,6 @@ function SelectCountry(props: Props) {
         status={hasError ? 'error' : undefined}
         show_submit_button
         keep_selection
-        suffix={
-          help ? (
-            <HelpButton title={help.title}>{help.content}</HelpButton>
-          ) : undefined
-        }
         autoComplete="country-name"
         no_animation={props.noAnimation}
         {...htmlAttributes}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
index 08d685de006..ab6e73776b3 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx
@@ -1,12 +1,15 @@
 import React, { useMemo, useCallback } from 'react'
 import classnames from 'classnames'
-import { makeUniqueId } from '../../../../shared/component-helper'
+import {
+  convertJsxToString,
+  makeUniqueId,
+} from '../../../../shared/component-helper'
 import {
   ToggleButton,
   Dropdown,
   Radio,
-  HelpButton,
   Autocomplete,
+  HelpButton,
 } from '../../../../components'
 import OptionField, { Props as OptionFieldProps } from '../Option'
 import { useFieldProps } from '../../hooks'
@@ -16,11 +19,11 @@ import FieldBlock, {
   Props as FieldBlockProps,
   FieldBlockWidth,
 } from '../../FieldBlock'
-import { FieldProps, FieldHelpProps, Path } from '../../types'
+import { FieldProps, Path } from '../../types'
 import type { FormStatusText } from '../../../../components/FormStatus'
 import type { AutocompleteAllProps } from '../../../../components/Autocomplete'
 import type { DropdownAllProps } from '../../../../components/Dropdown'
-import { HelpButtonProps } from '../../../../components/HelpButton'
+import { HelpProps } from '../../../../components/help-button/HelpButtonInline'
 import { DrawerListProps } from '../../../../fragments/DrawerList'
 import {
   convertCamelCaseProps,
@@ -40,52 +43,51 @@ export type Data = Array<{
   text?: React.ReactNode
 }>
 
-export type Props = FieldHelpProps &
-  FieldProps<IOption['value']> & {
-    /**
-     * Defines the variant of the component.
-     * Default: dropdown
-     */
-    variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'
-
-    /**
-     * The width of the component.
-     * Default: large
-     */
-    width?: FieldBlockWidth
-
-    /**
-     * Defines the layout of the options for radio and button variants.
-     */
-    optionsLayout?: 'horizontal' | 'vertical'
-
-    /**
-     * The path to the context data (Form.Handler).
-     * The context data object needs to have a `value` and a `title` property.
-     */
-    dataPath?: Path
-
-    /**
-     * Data to be used for the component. The object needs to have a `value` and a `title` property.
-     * The generated options will be placed above given JSX based children.
-     */
-    data?: Data
-
-    /**
-     * Autocomplete specific props
-     */
-    autocompleteProps?: ToCamelCase<AutocompleteAllProps>
-
-    /**
-     * Dropdown specific props
-     */
-    dropdownProps?: ToCamelCase<DropdownAllProps>
-
-    /**
-     * The content of the component.
-     */
-    children?: React.ReactNode
-  }
+export type Props = FieldProps<IOption['value']> & {
+  /**
+   * Defines the variant of the component.
+   * Default: dropdown
+   */
+  variant?: 'dropdown' | 'autocomplete' | 'radio' | 'button'
+
+  /**
+   * The width of the component.
+   * Default: large
+   */
+  width?: FieldBlockWidth
+
+  /**
+   * Defines the layout of the options for radio and button variants.
+   */
+  optionsLayout?: 'horizontal' | 'vertical'
+
+  /**
+   * The path to the context data (Form.Handler).
+   * The context data object needs to have a `value` and a `title` property.
+   */
+  dataPath?: Path
+
+  /**
+   * Data to be used for the component. The object needs to have a `value` and a `title` property.
+   * The generated options will be placed above given JSX based children.
+   */
+  data?: Data
+
+  /**
+   * Autocomplete specific props
+   */
+  autocompleteProps?: ToCamelCase<AutocompleteAllProps>
+
+  /**
+   * Dropdown specific props
+   */
+  dropdownProps?: ToCamelCase<DropdownAllProps>
+
+  /**
+   * The content of the component.
+   */
+  children?: React.ReactNode
+}
 
 function Selection(props: Props) {
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])
@@ -94,6 +96,7 @@ function Selection(props: Props) {
     id,
     className,
     variant = 'dropdown',
+    layout = 'vertical',
     optionsLayout = 'vertical',
     placeholder,
     path,
@@ -103,7 +106,6 @@ function Selection(props: Props) {
     error,
     hasError,
     disabled,
-    help,
     emptyValue,
     width = 'large',
     htmlAttributes,
@@ -164,7 +166,8 @@ function Selection(props: Props) {
   const cn = classnames(
     'dnb-forms-field-selection',
     `dnb-forms-field-selection__variant--${variant}`,
-    `dnb-forms-field-selection__options-layout--${optionsLayout}`,
+    `dnb-forms-field-selection--layout-${layout}`,
+    `dnb-forms-field-selection--options-layout--${optionsLayout}`,
     className
   )
 
@@ -240,17 +243,22 @@ function Selection(props: Props) {
         disabled,
         ...htmlAttributes,
         data,
-        suffix: help ? (
-          <HelpButton title={help.title}>{help.content}</HelpButton>
-        ) : undefined,
         on_change: handleDropdownChange,
         on_show: handleShow,
         on_hide: handleHide,
         stretch: true,
       }
 
+      const specificFieldBlockProps: FieldBlockProps = {
+        width,
+      }
+      if (layout === 'horizontal') {
+        specificFieldBlockProps.width = undefined
+        specificFieldBlockProps.contentWidth = width
+      }
+
       return (
-        <FieldBlock {...fieldBlockProps} width={width}>
+        <FieldBlock {...fieldBlockProps} {...specificFieldBlockProps}>
           {variant === 'autocomplete' ? (
             <Autocomplete
               {...sharedProps}
@@ -278,11 +286,11 @@ function Selection(props: Props) {
 
 type OptionProps = React.ComponentProps<
   React.FC<{
-    value?: Props['value']
-    error?: Error | FormError | undefined
+    value: Props['value']
+    error: Error | FormError | undefined
+    help: HelpProps
     title: React.ReactNode
-    help?: HelpButtonProps
-    children?: React.ReactNode
+    children: React.ReactNode
   }>
 >
 
@@ -320,7 +328,7 @@ function renderRadioItems({
 
     const label = title ?? children
     const suffix = help ? (
-      <HelpButton size="small" title={help.title}>
+      <HelpButton size="small" title={convertJsxToString(help.title)}>
         {help.content}
       </HelpButton>
     ) : undefined
@@ -350,7 +358,7 @@ function renderRadioItems({
 
   return [
     ...(dataList || []).map((props, i) => {
-      return createOption(props, i)
+      return createOption(props as OptionProps, i)
     }),
     ...(mapOptions(children, { createOption }) || []),
   ].filter(Boolean)
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts
index 152830591fe..fa0f5f987b1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/SelectionDocs.ts
@@ -21,11 +21,6 @@ export const SelectionProperties: PropertiesTableProps = {
     type: ['string', 'false'],
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
   data: {
     doc: 'Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.',
     type: 'array',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-options-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-options-vertical.snap.png
index c7c43fd9d43..8ceba75ce33 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-options-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-options-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-vertical.snap.png
index 46e59b310f6..827795410d8 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-button-have-to-match-button-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-help.snap.png
index 71c5495139b..f203c867677 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-horizontal.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-horizontal.snap.png
index f56410b150b..63fd6432c8d 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-horizontal.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-dropdown-have-to-match-dropdown-horizontal.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-options-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-options-vertical.snap.png
index 91413e83358..28c9f077892 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-options-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-options-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-vertical.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-vertical.snap.png
index 13669de1896..59da03ade54 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-vertical.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/__image_snapshots__/selection-radio-have-to-match-radio-vertical.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss
index 341033d81b7..2128b9fb1aa 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Selection/style/dnb-selection.scss
@@ -14,6 +14,11 @@
       }
     }
   }
+  &--options-layout--vertical#{&}--layout-horizontal {
+    .dnb-forms-field-block__label {
+      align-items: flex-start;
+    }
+  }
   &__variant--button {
     .dnb-forms-field-block {
       &--layout-horizontal .dnb-form-label {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Slider/Slider.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Slider/Slider.tsx
index cde4e5d07e4..1d39e17602c 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Slider/Slider.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Slider/Slider.tsx
@@ -4,11 +4,10 @@ import FieldBlock, {
   FieldBlockWidth,
 } from '../../FieldBlock'
 import { useFieldProps } from '../../hooks'
-import { FieldHelpProps, FieldProps, Path } from '../../types'
+import { FieldProps, Path } from '../../types'
 import { getFormattedNumber } from '../../../../components/slider/SliderHelpers'
 import Slider, { SliderProps } from '../../../../components/Slider'
 import { pickSpacingProps } from '../../../../components/flex/utils'
-import { HelpButton } from '../../../../components'
 import DataContext, { ContextState } from '../../DataContext/Context'
 import useDataValue from '../../hooks/useDataValue'
 
@@ -17,30 +16,29 @@ export type SliderVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {
 }
 
 export type SliderValue = number | Array<number>
-export type Props = FieldHelpProps &
-  FieldProps<SliderValue> & {
-    /**
-     * Define an array with JSON Pointers for multiple thumb buttons.
-     */
-    paths?: Array<Path>
-    step?: SliderProps['step'] | Path
-    min?: SliderProps['min'] | Path
-    max?: SliderProps['max'] | Path
-    vertical?: SliderProps['vertical']
-    reverse?: SliderProps['reverse']
-    hideButtons?: SliderProps['hideButtons']
-    multiThumbBehavior?: SliderProps['multiThumbBehavior']
-    thumbTitle?: SliderProps['thumbTitle']
-    subtractTitle?: SliderProps['subtractTitle']
-    addTitle?: SliderProps['addTitle']
-    numberFormat?: SliderProps['numberFormat']
-    tooltip?: SliderProps['tooltip']
-    alwaysShowTooltip?: SliderProps['alwaysShowTooltip']
-    extensions?: SliderProps['extensions']
-
-    /** Styling */
-    width?: FieldBlockWidth
-  }
+export type Props = FieldProps<SliderValue> & {
+  /**
+   * Define an array with JSON Pointers for multiple thumb buttons.
+   */
+  paths?: Array<Path>
+  step?: SliderProps['step'] | Path
+  min?: SliderProps['min'] | Path
+  max?: SliderProps['max'] | Path
+  vertical?: SliderProps['vertical']
+  reverse?: SliderProps['reverse']
+  hideButtons?: SliderProps['hideButtons']
+  multiThumbBehavior?: SliderProps['multiThumbBehavior']
+  thumbTitle?: SliderProps['thumbTitle']
+  subtractTitle?: SliderProps['subtractTitle']
+  addTitle?: SliderProps['addTitle']
+  numberFormat?: SliderProps['numberFormat']
+  tooltip?: SliderProps['tooltip']
+  alwaysShowTooltip?: SliderProps['alwaysShowTooltip']
+  extensions?: SliderProps['extensions']
+
+  /** Styling */
+  width?: FieldBlockWidth
+}
 
 function SliderComponent(props: Props) {
   const dataContextRef = useRef<ContextState>()
@@ -73,7 +71,6 @@ function SliderComponent(props: Props) {
     min = 0,
     max = 100,
     width = 'stretch',
-    help,
     hasError,
     disabled,
     vertical,
@@ -128,9 +125,6 @@ function SliderComponent(props: Props) {
     max,
     disabled,
     status: hasError ? 'error' : undefined,
-    suffix: help ? (
-      <HelpButton title={help.title}>{help.content}</HelpButton>
-    ) : undefined,
     on_change: handleLocalChange,
     on_drag_start: handleFocus,
     on_drag_end: handleBlur,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx
index 7ca601c3284..5d8c780a4ed 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
 } from 'react'
 import classnames from 'classnames'
-import { HelpButton, Input, Textarea } from '../../../../components'
+import { Input, Textarea } from '../../../../components'
 import { InputProps } from '../../../../components/input/Input'
 import InputMasked, {
   InputMaskedProps,
@@ -22,56 +22,51 @@ import { useFieldProps } from '../../hooks'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import { toCapitalized } from '../../../../shared/component-helper'
 import type { TextCounterProps } from '../../../../fragments/TextCounter'
-import type {
-  FieldProps,
-  FieldHelpProps,
-  AllJSONSchemaVersions,
-} from '../../types'
+import type { FieldProps, AllJSONSchemaVersions } from '../../types'
 
-export type Props = FieldHelpProps &
-  FieldProps<string, undefined | string> & {
-    // - Shared props
-    multiline?: boolean
-    inputClassName?: string
-    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
-    width?: FieldBlockWidth
-    size?: InputProps['size'] | TextareaProps['size']
-    keepPlaceholder?: InputProps['keep_placeholder']
+export type Props = FieldProps<string, undefined | string> & {
+  // - Shared props
+  multiline?: boolean
+  inputClassName?: string
+  innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
+  width?: FieldBlockWidth
+  size?: InputProps['size'] | TextareaProps['size']
+  keepPlaceholder?: InputProps['keep_placeholder']
 
-    // - Validation
-    minLength?: number
-    maxLength?: number
-    pattern?: string
+  // - Validation
+  minLength?: number
+  maxLength?: number
+  pattern?: string
 
-    // - Input props
-    type?: InputProps['type']
-    align?: InputProps['align']
-    selectall?: InputProps['selectall']
-    clear?: boolean
-    mask?: InputMaskedProps['mask']
-    leftIcon?: string
-    rightIcon?: string
-    submitElement?: InputProps['submit_element']
-    capitalize?: boolean
-    trim?: boolean
+  // - Input props
+  type?: InputProps['type']
+  align?: InputProps['align']
+  selectall?: InputProps['selectall']
+  clear?: boolean
+  mask?: InputMaskedProps['mask']
+  leftIcon?: string
+  rightIcon?: string
+  submitElement?: InputProps['submit_element']
+  capitalize?: boolean
+  trim?: boolean
 
-    // - Textarea props
-    rows?: TextareaProps['rows']
-    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']
-    autoresize?: TextareaProps['autoresize']
-    characterCounter?: Omit<TextCounterProps, 'text'> | number
+  // - Textarea props
+  rows?: TextareaProps['rows']
+  autoresizeMaxRows?: TextareaProps['autoresize_max_rows']
+  autoresize?: TextareaProps['autoresize']
+  characterCounter?: Omit<TextCounterProps, 'text'> | number
 
-    // - Html props
-    autoComplete?: HTMLInputElement['autocomplete']
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']
-    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']
-    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']
-    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']
-    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']
+  // - Html props
+  autoComplete?: HTMLInputElement['autocomplete']
+  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']
+  autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']
+  spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']
+  autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']
+  autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']
 
-    // - Events
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
-  }
+  // - Events
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>
+}
 
 function StringComponent(props: Props) {
   const dataContext = useContext(DataContext)
@@ -151,7 +146,6 @@ function StringComponent(props: Props) {
     value,
     hasError,
     disabled,
-    help,
     multiline,
     mask,
     leftIcon,
@@ -229,9 +223,6 @@ function StringComponent(props: Props) {
     inputMode,
     className: cn,
     placeholder,
-    suffix: help ? (
-      <HelpButton title={help.title}>{help.content}</HelpButton>
-    ) : undefined,
     on_focus: handleFocus,
     on_blur: handleBlur,
     on_change: handleChange,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts
index 7b45403fe2a..ffcc2c0f28f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/StringDocs.ts
@@ -57,11 +57,6 @@ export const stringProperties: PropertiesTableProps = {
     type: ['string', 'false'],
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of title and content.',
-    type: 'object',
-    status: 'optional',
-  },
 
   // - Input props
   size: inputProperties.size,
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx
index 027eba8e53f..fd73076f7bf 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx
@@ -64,7 +64,7 @@ describe('Field.String', () => {
       )
       expect(
         document.querySelector('input').getAttribute('aria-describedby')
-      ).toBe(document.querySelector('.dnb-input__suffix').id)
+      ).toBe(document.querySelector('.dnb-help-button').id)
       expect(
         document
           .querySelector('.dnb-help-button')
@@ -692,6 +692,34 @@ describe('Field.String', () => {
       expect(onBlur).toHaveBeenCalledTimes(2)
       expect(onBlur).toHaveBeenNthCalledWith(2, 'song2345')
     })
+
+    it('should show submit indicator on async onChange', async () => {
+      const onChange = jest.fn(async () => {
+        await wait(30)
+      })
+
+      render(<Field.String label="Label" onChange={onChange} />)
+
+      const input = document.querySelector('input')
+      const indicator = document.querySelector(
+        '.dnb-forms-submit-indicator'
+      )
+
+      await userEvent.type(input, 'foo')
+
+      await waitFor(() => {
+        expect(input).not.toBeDisabled()
+        expect(indicator).toHaveClass(
+          'dnb-forms-submit-indicator--state-pending'
+        )
+      })
+      await waitFor(() => {
+        expect(input).not.toBeDisabled()
+        expect(indicator).toHaveClass(
+          'dnb-forms-submit-indicator--state-complete'
+        )
+      })
+    })
   })
 
   describe('error handling', () => {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx
index 32bff109f36..97f01bb2125 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/stories/String.stories.tsx
@@ -44,7 +44,7 @@ export const Transform = () => {
   return (
     <Form.Handler onChange={console.log}>
       <Field.String
-        label="Label"
+        label="Ønsket lånebeløp"
         path="/myField"
         transformIn={transformIn}
         transformOut={transformOut}
@@ -67,7 +67,7 @@ export const TransformInOnFormHandler = () => {
         myPath: '',
       }}
     >
-      <Field.String label="Label" path="/myPath" />
+      <Field.String label="Ønsket lånebeløp" path="/myPath" />
       <Tools.Log />
     </Form.Handler>
   )
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/style/dnb-string.scss b/packages/dnb-eufemia/src/extensions/forms/Field/String/style/dnb-string.scss
new file mode 100644
index 00000000000..f6ac898604c
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/style/dnb-string.scss
@@ -0,0 +1,17 @@
+@import '../../../../../style/core/utilities.scss';
+
+.dnb-forms-field-string {
+  .dnb-forms-field-block--layout-horizontal {
+    .dnb-forms-field-block__label.dnb-form-label {
+      // Multiline label placement
+      align-items: baseline;
+    }
+  }
+
+  // Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
+  @include allBelow(xx-small) {
+    .dnb-input__shell {
+      width: 90%;
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
index 6c94854e4aa..9ebfc692ea6 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/Toggle.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useMemo } from 'react'
 import classnames from 'classnames'
-import { Checkbox, HelpButton, ToggleButton } from '../../../../components'
+import { Checkbox, ToggleButton } from '../../../../components'
 import ButtonRow from '../../Form/ButtonRow'
 import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'
 import { useFieldProps } from '../../hooks'
-import { FieldHelpProps, FieldProps } from '../../types'
+import { FieldProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
 import ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'
 import useTranslation from '../../hooks/useTranslation'
@@ -17,8 +17,7 @@ export type ToggleProps = {
   textOff?: string
 }
 
-export type Props = FieldHelpProps &
-  Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &
+export type Props = Omit<FieldProps<unknown>, 'layout' | 'layoutOptions'> &
   ToggleProps
 
 function Toggle(props: Props) {
@@ -37,11 +36,9 @@ function Toggle(props: Props) {
     variant,
     disabled,
     label,
-    labelDescription,
     textOn,
     textOff,
     value,
-    help,
     hasError,
     htmlAttributes,
     handleChange,
@@ -70,10 +67,6 @@ function Toggle(props: Props) {
     ...pickSpacingProps(props),
   }
 
-  const suffix = help ? (
-    <HelpButton title={help.title}>{help.content}</HelpButton>
-  ) : undefined
-
   const isOn = value === valueOn
   const isOff = value === valueOff
 
@@ -101,7 +94,6 @@ function Toggle(props: Props) {
             checked={isOn}
             disabled={disabled}
             status={hasError ? 'error' : undefined}
-            suffix={suffix}
             onChange={handleCheckboxChange}
             {...htmlAttributes}
           />
@@ -120,7 +112,6 @@ function Toggle(props: Props) {
             checked={isOn}
             disabled={disabled}
             status={hasError ? 'error' : undefined}
-            suffix={suffix}
             value={value ? 'true' : 'false'}
             on_change={handleCheckboxChange}
             {...htmlAttributes}
@@ -129,24 +120,7 @@ function Toggle(props: Props) {
       )
     case 'buttons':
       return (
-        <FieldBlock
-          {...fieldBlockProps}
-          asFieldset
-          labelDescription={
-            <>
-              {labelDescription}
-              {help ? (
-                <HelpButton
-                  size="small"
-                  left={labelDescription ? 'x-small' : false}
-                  title={help.title}
-                >
-                  {help.content}
-                </HelpButton>
-              ) : undefined}
-            </>
-          }
-        >
+        <FieldBlock {...fieldBlockProps} asFieldset>
           <ButtonRow bottom="x-small">
             <ToggleButtonGroupContext.Provider
               value={{
@@ -184,7 +158,6 @@ function Toggle(props: Props) {
             checked={isOn}
             disabled={disabled}
             status={hasError ? 'error' : undefined}
-            suffix={suffix}
             value={value ? 'true' : 'false'}
             on_change={handleCheckboxChange}
             {...htmlAttributes}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx
index 0c0e3694d88..9b2f5c933ab 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/ToggleDocs.tsx
@@ -26,9 +26,4 @@ export const ToggleProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
-  help: {
-    doc: 'Provide a help button. Object consisting of `title` and `content`.',
-    type: 'object',
-    status: 'optional',
-  },
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx
index 181a5ce24d4..09db0bd65b9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/Toggle.test.tsx
@@ -64,12 +64,14 @@ describe('Field.Toggle', () => {
         expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
           1
         )
-        expect(document.querySelector('button')).toHaveAttribute(
-          'aria-describedby'
-        )
         expect(
-          document.querySelector('button').getAttribute('aria-describedby')
-        ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
+          document.querySelector('.dnb-toggle-button__button')
+        ).toHaveAttribute('aria-describedby')
+        expect(
+          document
+            .querySelector('.dnb-toggle-button__button')
+            .getAttribute('aria-describedby')
+        ).toBe(document.querySelector('.dnb-help-button').id)
         expect(
           document
             .querySelector('.dnb-help-button')
@@ -265,9 +267,9 @@ describe('Field.Toggle', () => {
         expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
           1
         )
-        expect(document.querySelector('button')).toHaveAttribute(
-          'aria-describedby'
-        )
+        expect(
+          document.querySelector('.dnb-toggle-button__button')
+        ).toHaveAttribute('aria-describedby')
         expect(
           document
             .querySelector('.dnb-help-button')
@@ -474,12 +476,14 @@ describe('Field.Toggle', () => {
         expect(document.querySelectorAll('.dnb-help-button')).toHaveLength(
           1
         )
-        expect(document.querySelector('button')).toHaveAttribute(
-          'aria-describedby'
-        )
         expect(
-          document.querySelector('button').getAttribute('aria-describedby')
-        ).toBe(document.querySelector('.dnb-toggle-button__suffix').id)
+          document.querySelector('.dnb-toggle-button__button')
+        ).toHaveAttribute('aria-describedby')
+        expect(
+          document
+            .querySelector('.dnb-toggle-button__button')
+            .getAttribute('aria-describedby')
+        ).toBe(document.querySelector('.dnb-help-button').id)
         expect(
           document
             .querySelector('.dnb-help-button')
@@ -647,7 +651,7 @@ describe('Field.Toggle', () => {
         )
         expect(
           document.querySelector('input').getAttribute('aria-describedby')
-        ).toBe(document.querySelector('.dnb-checkbox__suffix').id)
+        ).toBe(document.querySelector('.dnb-help-button').id)
         expect(
           document
             .querySelector('.dnb-help-button')
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png
index 3f61bbdd6d7..d987c0ae813 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-with-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-without-label.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-without-label.snap.png
index b71de230a95..17704f81638 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-without-label.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Toggle/__tests__/__image_snapshots__/fieldtoggle-have-to-match-buttons-variant-without-label.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
index f6447fb4be1..ce1e4d7f0eb 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from 'react'
+import classnames from 'classnames'
 import FieldBlock, {
   Props as FieldBlockProps,
   FieldBlockWidth,
@@ -7,7 +8,7 @@ import {
   useFieldProps,
   useTranslation as useFormsTranslation,
 } from '../../hooks'
-import { FieldHelpProps, FieldProps } from '../../types'
+import { FieldProps } from '../../types'
 import Upload, {
   UploadFile,
   UploadFileNative,
@@ -15,14 +16,18 @@ import Upload, {
 } from '../../../../components/Upload'
 import useUpload from '../../../../components/upload/useUpload'
 import { pickSpacingProps } from '../../../../components/flex/utils'
-import { HelpButton } from '../../../../components'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+} from '../../../../components/help-button/HelpButtonInline'
 import { useTranslation as useSharedTranslation } from '../../../../shared'
 import { SpacingProps } from '../../../../shared/types'
 import { FormError } from '../../utils'
 
 export type UploadValue = Array<UploadFile | UploadFileNative>
-export type Props = FieldHelpProps &
-  Omit<FieldProps<UploadValue, UploadValue | undefined>, 'name'> &
+export type Props = Omit<
+  FieldProps<UploadValue, UploadValue | undefined>,
+  'name'
+> &
   SpacingProps & {
     width?: Omit<FieldBlockWidth, 'medium' | 'small'>
   } & Pick<
@@ -119,8 +124,9 @@ function UploadComponent(props: Props) {
     id,
     forId: `${id}-input`,
     labelSrOnly: true,
-    className,
+    className: classnames('dnb-forms-field-upload', className),
     width,
+    help: undefined,
     ...pickSpacingProps(props),
   }
 
@@ -139,19 +145,22 @@ function UploadComponent(props: Props) {
           help ? (
             <>
               {labelDescription ?? text}
-              <HelpButton
+              <HelpButtonInline
+                contentId={`${id}-help`}
                 left={text ? 'x-small' : false}
-                title={help.title}
-              >
-                {help.content}
-              </HelpButton>
+                help={help}
+              />
             </>
           ) : (
             labelDescription ?? text
           )
         }
         {...htmlAttributes}
-      />
+      >
+        {help && (
+          <HelpButtonInlineContent contentId={`${id}-help`} help={help} />
+        )}
+      </Upload>
     </FieldBlock>
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/__image_snapshots__/upload-have-to-match-upload-field-customized.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/__image_snapshots__/upload-have-to-match-upload-field-customized.snap.png
index 17717ed844f..0908ae6926a 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/__image_snapshots__/upload-have-to-match-upload-field-customized.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/__tests__/__image_snapshots__/upload-have-to-match-upload-field-customized.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/stories/Upload.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/stories/Upload.stories.tsx
index 72902c637b2..fc72908ae49 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/stories/Upload.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/stories/Upload.stories.tsx
@@ -36,6 +36,10 @@ export function Upload() {
           onChange={(e) => {
             console.log('local onChange', e)
           }}
+          help={{
+            title: 'Help title',
+            content: 'Help content',
+          }}
         />
 
         <Form.SubmitButton />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Upload/style/dnb-upload.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/style/dnb-upload.scss
new file mode 100644
index 00000000000..525b92134c2
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Upload/style/dnb-upload.scss
@@ -0,0 +1,8 @@
+.dnb-forms-field-upload {
+  .dnb-help-button__content {
+    .dnb-section {
+      margin-left: var(--upload-border-width);
+      margin-right: var(--upload-border-width);
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index effd8442709..ac4064c73b5 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -26,7 +26,6 @@ import { Ul, Li } from '../../../elements'
 import {
   convertJsxToString,
   findElementInChildren,
-  warn,
 } from '../../../shared/component-helper'
 import useId from '../../../shared/helpers/useId'
 import {
@@ -36,6 +35,10 @@ import {
   Identifier,
 } from '../types'
 import type { FormLabelAllProps } from '../../../components/FormLabel'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+  HelpProps,
+} from '../../../components/help-button/HelpButtonInline'
 import SubmitIndicator from '../Form/SubmitIndicator/SubmitIndicator'
 import { createSharedState } from '../../../shared/helpers/useSharedState'
 import useTranslation from '../hooks/useTranslation'
@@ -96,6 +99,10 @@ export type SharedFieldBlockProps = {
    * Width of contents block, while label etc can be wider if space is available
    */
   contentWidth?: FieldBlockWidth
+  /**
+   * Provide help content for the field.
+   */
+  help?: HelpProps
 }
 
 export type Props = SharedFieldBlockProps &
@@ -135,9 +142,8 @@ function FieldBlock(props: Props) {
     ? fieldBlockContext
     : null
 
-  const sharedData = createSharedState<Props>(
-    'field-block-props-' + (props.id ?? props.forId)
-  )
+  const id = useId(props.id ?? props.forId)
+  const sharedData = createSharedState<Props>('field-block-props-' + id)
   const {
     className,
     forId,
@@ -148,6 +154,7 @@ function FieldBlock(props: Props) {
     labelDescription,
     labelSuffix,
     labelSrOnly,
+    help,
     asFieldset,
     required,
     info,
@@ -453,6 +460,10 @@ function FieldBlock(props: Props) {
     'dnb-forms-field-block',
     width &&
       `dnb-forms-field-block--width-${hasCustomWidth ? 'custom' : width}`,
+    contentWidth &&
+      `dnb-forms-field-block--content-width-${
+        hasCustomContentWidth ? 'custom' : contentWidth
+      }`,
     labelHeight && `dnb-forms-field-block--label-height-${labelHeight}`,
     className
   )
@@ -470,6 +481,7 @@ function FieldBlock(props: Props) {
   })
 
   const labelProps: FormLabelAllProps = {
+    className: 'dnb-forms-field-block__label',
     element: enableFieldset ? 'legend' : 'label',
     forId: enableFieldset ? undefined : forId,
     srOnly: labelSrOnly,
@@ -513,16 +525,11 @@ function FieldBlock(props: Props) {
     return null
   }
 
-  if (fieldState && typeof label === 'undefined') {
-    warn(
-      'Provide a label when using an async validator or onChange event.'
-    )
-  }
-
   const hasLabelDescription = isFragment(labelDescription)
     ? fragmentHasChildren(labelDescription) &&
       !fragmentHasOnlyUndefinedChildren(labelDescription)
     : labelDescription
+  const hasHelp = help?.title || help?.content
 
   return (
     <FieldBlockContext.Provider
@@ -543,20 +550,39 @@ function FieldBlock(props: Props) {
         {...rest}
       >
         <div className={gridClasses}>
-          <LabelDescription labelDescription={labelDescription}>
-            {(label || labelDescription) && (
-              <FormLabel {...labelProps}>
-                <SubmitIndicator state={fieldState}>
-                  {label}
-                  {hasLabelDescription && (
-                    <span className="dnb-forms-field-block__label-description">
-                      {labelDescription}
-                    </span>
-                  )}
-                </SubmitIndicator>
-              </FormLabel>
-            )}
-          </LabelDescription>
+          {(label || labelDescription || hasHelp) && (
+            <FormLabel {...labelProps}>
+              <span>
+                {label && (
+                  <span className="dnb-forms-field-block__label__content">
+                    {label}
+                  </span>
+                )}
+
+                {hasLabelDescription && (
+                  <span className="dnb-forms-field-block__label__description">
+                    {labelDescription}
+                  </span>
+                )}
+
+                {hasHelp && (
+                  <HelpButtonInline contentId={`${id}-help`} help={help} />
+                )}
+              </span>
+            </FormLabel>
+          )}
+
+          {hasHelp && (
+            <HelpButtonInlineContent
+              contentId={`${id}-help`}
+              className="dnb-forms-field-block__help"
+              help={help}
+              breakout={
+                layout === 'vertical' &&
+                !nestedFieldBlockContext?.composition
+              }
+            />
+          )}
 
           <div
             className={classnames(
@@ -595,6 +621,11 @@ function FieldBlock(props: Props) {
           >
             {children}
           </div>
+
+          <SubmitIndicator
+            state={fieldState}
+            className="dnb-forms-field-block__indicator dnb-forms-submit-indicator--inline-wrap"
+          />
         </div>
       </Space>
     </FieldBlockContext.Provider>
@@ -661,13 +692,6 @@ function CombineMessages({
   )
 }
 
-function LabelDescription({ labelDescription, children }) {
-  if (!labelDescription) {
-    return children ?? null
-  }
-  return <div className="dnb-forms-field-block__label">{children}</div>
-}
-
 export function getMessagesFromError(
   item: Partial<StateWithMessage>
 ): Array<StateMessage> {
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts
index 9832c1b02b7..9ac591f0f88 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlockDocs.ts
@@ -16,6 +16,11 @@ export const FieldBlockSharedProperties: PropertiesTableProps = {
     type: 'boolean',
     status: 'optional',
   },
+  help: {
+    doc: 'Provide help content for the field using `title` and `content` as a string or React.Node. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).',
+    type: 'object',
+    status: 'optional',
+  },
   layout: {
     doc: 'Layout for the label and input. Can be `horizontal` or `vertical`.',
     type: 'string',
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
index 29062c0097b..19eb80eeb45 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.screenshot.test.ts
@@ -43,4 +43,51 @@ describe.each(['ui', 'sbanken'])('FieldBlock for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match vertical help-button', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-vertical-label"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match horizontal help-button', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-horizontal-label"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match help-button in composition fields', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-composition-fields"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match label description help-button', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-label-description"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match description help-button', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-field-block-help-button-vertical-label-description"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match help-button with HTML', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="forms-field-block-help-button-html"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
index aa707ef0534..86e7c6cd457 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { fireEvent, render, waitFor } from '@testing-library/react'
 import { Input } from '../../../../components'
 import FieldBlock from '../FieldBlock'
 import userEvent from '@testing-library/user-event'
@@ -181,7 +181,9 @@ describe('FieldBlock', () => {
       render(<FieldBlock labelDescription={<></>}>content</FieldBlock>)
 
       expect(
-        document.querySelector('.dnb-forms-field-block__label-description')
+        document.querySelector(
+          '.dnb-forms-field-block__label__description'
+        )
       ).toBeNull()
 
       const labelElement = document.querySelector('label')
@@ -880,49 +882,6 @@ describe('FieldBlock', () => {
     })
   })
 
-  it('should warn when formStatus is given, but no label', async () => {
-    const log = jest.spyOn(console, 'log').mockImplementation()
-
-    const asyncValidator = async () => {
-      return null
-    }
-
-    const { rerender } = render(
-      <Form.Handler>
-        <Field.String
-          label="Has a label"
-          value="bar"
-          path="/foo"
-          validator={asyncValidator}
-        />
-        <Form.SubmitButton />
-      </Form.Handler>
-    )
-
-    const buttonElement = document.querySelector('button')
-
-    await userEvent.click(buttonElement)
-
-    expect(log).toHaveBeenCalledTimes(0)
-
-    rerender(
-      <Form.Handler>
-        <Field.String value="bar" path="/foo" validator={asyncValidator} />
-        <Form.SubmitButton />
-      </Form.Handler>
-    )
-
-    await userEvent.click(buttonElement)
-
-    expect(log).toHaveBeenLastCalledWith(
-      expect.any(String),
-      expect.any(String),
-      'Provide a label when using an async validator or onChange event.'
-    )
-
-    log.mockRestore()
-  })
-
   it('should summarize errors in one FormStatus components', () => {
     const MockComponent = () => {
       useFieldProps({
@@ -997,6 +956,193 @@ describe('FieldBlock', () => {
       document.querySelectorAll('.dnb-form-status')[1].textContent
     ).toBe('Nested')
   })
+
+  describe('help', () => {
+    it('should render content when open is true', async () => {
+      render(
+        <FieldBlock
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      const element = document.querySelector('.dnb-help-button__content')
+      expect(element).toBeInTheDocument()
+      expect(element.textContent).toBe('Help title\nHelp content')
+    })
+
+    it('should open on click', async () => {
+      render(
+        <FieldBlock
+          label="Label"
+          help={{
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      fireEvent.click(document.querySelector('button'))
+
+      const element = document.querySelector('.dnb-help-button__content')
+      expect(element).toBeInTheDocument()
+      expect(
+        document.querySelector('.dnb-help-button__content')
+      ).toHaveTextContent('Help title Help content')
+    })
+
+    it('should close on click', async () => {
+      render(
+        <FieldBlock
+          label="Label"
+          help={{
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      fireEvent.click(document.querySelector('button'))
+
+      {
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(
+          document.querySelector('.dnb-help-button__content')
+        ).toHaveTextContent('Help title Help content')
+      }
+
+      fireEvent.click(document.querySelector('button'))
+
+      const element = document.querySelector('.dnb-help-button__content')
+      expect(element).not.toBeInTheDocument()
+    })
+
+    it('should have correct id', async () => {
+      render(
+        <FieldBlock
+          id="unique"
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      {
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(document.querySelector('button').getAttribute('id')).toBe(
+          'unique-help'
+        )
+      }
+      {
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(
+          document.querySelector('.dnb-section').getAttribute('id')
+        ).toBe('unique-help-content')
+      }
+    })
+
+    it('should have aria-controls', async () => {
+      render(
+        <FieldBlock
+          id="unique"
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          <MockComponent />
+        </FieldBlock>
+      )
+
+      const element = document.querySelector('.dnb-help-button__content')
+      expect(element).toBeInTheDocument()
+      expect(
+        document.querySelector('button').getAttribute('aria-controls')
+      ).toBe('unique-help-content')
+    })
+
+    describe('title', () => {
+      it('should render correctly', async () => {
+        render(
+          <FieldBlock
+            label="Label"
+            help={{
+              title: 'Help title',
+            }}
+          >
+            <MockComponent />
+          </FieldBlock>
+        )
+
+        await userEvent.click(document.querySelector('button'))
+
+        const element = document.querySelector('.dnb-section')
+        expect(element).toBeInTheDocument()
+        expect(element.textContent).toBe('Help title')
+      })
+
+      it('should render correctly with content', async () => {
+        render(
+          <FieldBlock
+            label="Label"
+            help={{
+              title: 'Help title',
+              content: '\nHelp content',
+            }}
+          >
+            <MockComponent />
+          </FieldBlock>
+        )
+
+        await userEvent.click(document.querySelector('button'))
+
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(element.textContent).toBe('Help title\nHelp content')
+      })
+    })
+
+    describe('content', () => {
+      it('should render correctly', async () => {
+        render(
+          <FieldBlock
+            label="Label"
+            help={{
+              content: 'Help content',
+            }}
+          >
+            <MockComponent />
+          </FieldBlock>
+        )
+
+        await userEvent.click(document.querySelector('button'))
+
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(element.textContent).toBe('Help content')
+      })
+    })
+  })
 })
 
 function MockComponent({ label = null, id = null }) {
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-description-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-description-help-button.snap.png
new file mode 100644
index 00000000000..1a9b8f426a9
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-description-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png
new file mode 100644
index 00000000000..8cba97a3d09
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-in-composition-fields.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-with-html.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-with-html.snap.png
new file mode 100644
index 00000000000..11b1045f35a
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-help-button-with-html.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-horizontal-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-horizontal-help-button.snap.png
new file mode 100644
index 00000000000..4de790eb8f0
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-horizontal-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description-help-button.snap.png
new file mode 100644
index 00000000000..8c432197f82
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png
index 73633068c89..cdad1784fdf 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png
index c6fdbc835be..7d667322fdd 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-label-size.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-vertical-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-vertical-help-button.snap.png
new file mode 100644
index 00000000000..d0918c797f5
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-vertical-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png
index 4d44aaa1a0b..5046786f8b3 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-sbanken-have-to-match-widths.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-description-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-description-help-button.snap.png
new file mode 100644
index 00000000000..d80a941b6ac
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-description-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png
new file mode 100644
index 00000000000..bbf1087b1c4
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-in-composition-fields.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-with-html.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-with-html.snap.png
new file mode 100644
index 00000000000..c72ff21cfde
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-help-button-with-html.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-horizontal-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-horizontal-help-button.snap.png
new file mode 100644
index 00000000000..3effda3686a
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-horizontal-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description-help-button.snap.png
new file mode 100644
index 00000000000..bc989a0c5a0
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png
index 509b829c62d..f625b800ddc 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-description.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png
index ba2db13f162..fa2a66527f6 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-label-size.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-vertical-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-vertical-help-button.snap.png
new file mode 100644
index 00000000000..ad500bdb5a5
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-vertical-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png
index 0cddb1c1038..0cad8a8600d 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png and b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/__image_snapshots__/fieldblock-for-ui-have-to-match-widths.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx
index 0cf806747c1..51f2db3c659 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx
@@ -3,6 +3,7 @@ import FieldBlock from '../FieldBlock'
 import Input from '../../../../components/Input'
 import { useFieldProps } from '../../hooks'
 import { Field, Form } from '../..'
+import { Anchor, Card, Flex } from '../../../../components'
 
 export default {
   title: 'Eufemia/Extensions/Forms/FieldBlock',
@@ -109,3 +110,160 @@ export function CompositionErrors() {
     </>
   )
 }
+
+export const WithInlineHelp = () => {
+  return (
+    <Flex.Stack>
+      <Form.MainHeading
+        help={{
+          // open: true,
+          renderAs: 'dialog',
+          title: 'Hva betyr kredittopplysninger?',
+          content:
+            'Lorem ipsum dolor sit amet consectetur. Interdum elementum sit purus aliquam. Ultrices senectus sit in augue ultrices hendrerit magna eget congue.',
+        }}
+      >
+        Kredittopplysninger
+      </Form.MainHeading>
+      <Form.SubHeading
+        help={{
+          title: 'Hva betyr lånebeløp?',
+          content: 'Dette er hvor mye du har tenkt å låne totalt.',
+        }}
+      >
+        Subheading
+      </Form.SubHeading>
+
+      <Field.String
+        label="Ønsket lånebeløp"
+        help={{
+          open: true,
+          title: 'Hva betyr lånebeløp?',
+          content: (
+            <>
+              Dette er hvor mye du har tenkt å låne{' '}
+              <Anchor href="#test">totalt</Anchor>.
+            </>
+          ),
+        }}
+        onChange={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+      <Field.String
+        label="Ønsket lånebeløp"
+        multiline
+        help={{
+          title: 'Hva betyr lånebeløp?',
+          content: 'Dette er hvor mye du har tenkt å låne totalt.',
+        }}
+      />
+
+      <Field.String
+        label="Ønsket lånebeløp"
+        labelDescription="Description Nisi ad ullamco ut anim proident sint eiusmod."
+        help={{
+          title: 'Hva betyr lånebeløp?',
+          content: 'Dette er hvor mye du har tenkt å låne totalt.',
+        }}
+        onChange={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000))
+        }}
+      />
+      <Field.String
+        label="Ønsket lånebeløp"
+        labelDescription="Description"
+        multiline
+        help={{
+          title: 'Hva betyr lånebeløp?',
+          content: 'Dette er hvor mye du har tenkt å låne totalt.',
+        }}
+      />
+
+      <Form.MainHeading
+        help={{
+          title: 'Hva betyr kredittopplysninger?',
+          content:
+            'Lorem ipsum dolor sit amet consectetur. Interdum elementum sit purus aliquam. Ultrices senectus sit in augue ultrices hendrerit magna eget congue.',
+        }}
+      >
+        Kredittopplysninger
+      </Form.MainHeading>
+
+      <Card stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription={'\nDescription'}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          labelDescription={'\nDescription'}
+          multiline
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        />
+      </Card>
+
+      <Form.SubHeading
+        help={{
+          title: 'Hva betyr lånebeløp?',
+          content: 'Dette er hvor mye du har tenkt å låne totalt.',
+        }}
+      >
+        Subheading
+      </Form.SubHeading>
+
+      <Card stack>
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          layoutOptions={{ width: '8rem' }}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+        <Field.String
+          label="Ønsket lånebeløp"
+          layout="horizontal"
+          layoutOptions={{ width: '8rem' }}
+          multiline
+          rows={3}
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+          info="Info message"
+          onChange={async () => {
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+          }}
+        />
+      </Card>
+    </Flex.Stack>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
index b60cf52d49b..178870b002b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/dnb-field-block.scss
@@ -9,16 +9,6 @@ $breakpoints: map.merge(
   )
 );
 
-// Ensure inputs to not overflow on xx-small (defined above), but exclude e.g. Autocomplete
-.dnb-forms-field-string,
-.dnb-forms-field-number {
-  @include allBelow(xx-small) {
-    .dnb-input__shell {
-      width: 90%;
-    }
-  }
-}
-
 fieldset.dnb-forms-field-block {
   @include fieldsetReset();
 }
@@ -34,48 +24,12 @@ fieldset.dnb-forms-field-block {
     );
     grid-template-areas:
       'label'
+      'help'
       'contents'
+      'indicator'
       'status';
   }
 
-  &__grid#{&}--layout-vertical {
-    flex-wrap: wrap;
-    & > .dnb-form-label,
-    & > .dnb-forms-field-block__label > .dnb-form-label {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  // Horizontal layout
-  &__grid#{&}--layout-horizontal {
-    @include allBelow(small) {
-      & > .dnb-form-label,
-      & > .dnb-forms-field-block__label > .dnb-form-label {
-        margin-bottom: 0.5rem;
-      }
-    }
-    @include allAbove(small) {
-      & > .dnb-form-label,
-      & > .dnb-forms-field-block__label > .dnb-form-label {
-        margin-top: var(--label-margin);
-        margin-bottom: var(--label-margin);
-      }
-      grid-template-columns:
-        minmax(
-          var(--dnb-forms-field-block-layout-width-min, min-content),
-          var(--dnb-forms-field-block-layout-width-max, max-content)
-        )
-        auto;
-      grid-template-areas:
-        'label contents'
-        '. status';
-
-      .dnb-forms-field-block__contents {
-        align-self: end;
-      }
-    }
-  }
-
   // Align label vertically with the content (input etc.)
   --label-margin: 0.25rem;
   &--label-height-small {
@@ -108,17 +62,109 @@ fieldset.dnb-forms-field-block {
     }
   }
 
-  // Elements
-  &__label {
+  --max-width: var(--forms-field-width--large);
+  &:not([class*='--content-width']) {
+    --max-width: 60ch;
+  }
+
+  &__label,
+  &__label.dnb-form-label {
     grid-area: label;
     display: flex;
-    flex-flow: row;
-    justify-content: space-between;
+    max-width: var(--max-width); // to enhance readability
     align-items: center;
+
+    margin-right: 0;
+
+    &__description {
+      margin-left: 0.3em;
+    }
+
+    &__content:has(+ .dnb-help-button),
+    &__description:has(+ .dnb-help-button) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &__grid#{&}--layout-vertical {
+    flex-wrap: wrap;
+    & > .dnb-form-label {
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  // Horizontal layout
+  &__grid#{&}--layout-horizontal &__label {
+    margin-right: 1rem;
   }
+  &__grid#{&}--layout-horizontal {
+    & > .dnb-form-label {
+      margin-top: var(--label-margin);
+      margin-bottom: var(--label-margin);
+    }
+
+    @include allBelow(small) {
+      & > .dnb-form-label {
+        margin-bottom: calc(var(--label-margin) + 0.5rem);
+      }
+    }
+    @include allAbove(small) {
+      grid-template-columns:
+        minmax(
+          var(--dnb-forms-field-block-layout-width-min, min-content),
+          var(--dnb-forms-field-block-layout-width-max, max-content)
+        )
+        auto;
+
+      // When stretching the "help" over two columns,
+      // it influences the "label" width when shown,
+      // and there is not layoutOptions defined.
+      grid-template-areas:
+        'label contents'
+        '. help'
+        '. indicator'
+        '. status';
 
-  &__label-description {
-    margin-left: 0.3em;
+      .dnb-help-button__content {
+        --help-button-indent-width: 0;
+
+        // Align to how the FormStatus looks
+        .dnb-section {
+          --rounded-corner: 0.25rem;
+          align-self: flex-start; // Do not stretch the content
+        }
+      }
+
+      .dnb-forms-field-block__contents {
+        align-self: end;
+      }
+    }
+  }
+
+  &__indicator {
+    grid-area: indicator;
+  }
+
+  &__help {
+    grid-area: help;
+    display: flex;
+    flex-flow: column;
+
+    .dnb-section {
+      margin-bottom: 1rem;
+
+      & > .dnb-p--lead {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
+  &__grid#{&}--layout-horizontal &__help {
+    @include allAbove(small) {
+      .dnb-section {
+        margin-top: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
   }
 
   &__status {
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss
index 92a43a17485..663fc1d25a3 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-sbanken.scss
@@ -1,5 +1,5 @@
 .dnb-forms-field-block {
-  &__label-description {
+  &__label__description {
     color: var(--sb-color-gray-dark);
     font-size: var(--font-size-small);
   }
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss
index c609e3b1789..b552f0c2f68 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss
@@ -1,5 +1,5 @@
 .dnb-forms-field-block {
-  &__label-description {
+  &__label__description {
     color: var(--color-black-55);
     font-size: var(--font-size-small);
   }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/MainHeading.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/MainHeading.tsx
index dedd05b9aec..947c81206e9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/MainHeading.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/MainHeading.tsx
@@ -1,26 +1,56 @@
 import React from 'react'
 import classnames from 'classnames'
+import useId from '../../../../shared/helpers/useId'
 import Heading from '../../../../components/heading/Heading'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+  HelpProps,
+} from '../../../../components/help-button/HelpButtonInline'
 import type { HeadingLevel } from '../../../../components/heading/Heading'
 import type { ComponentProps } from '../../types'
 
 export type Props = ComponentProps & {
   level?: HeadingLevel
+  help?: HelpProps
   children?: React.ReactNode
 } & Omit<React.HTMLProps<HTMLElement>, 'size'>
 
 function MainHeading({ level, ...props }: Props) {
-  const { className, children, ...rest } = props
+  const { help, className, children, ...rest } = props
+  const helpId = useId()
+  const hasHelp = help?.title || help?.content
+
   return (
-    <Heading
-      className={classnames('dnb-forms-main-heading', className)}
-      level={level || 2}
-      skip_correction
-      size="large"
-      {...rest}
-    >
-      {children}
-    </Heading>
+    <>
+      <Heading
+        className={classnames(
+          'dnb-forms-main-heading',
+          'dnb-card--auto-indent',
+          className
+        )}
+        level={level || 2}
+        skip_correction
+        size="large"
+        {...rest}
+      >
+        {children}
+        {hasHelp && (
+          <HelpButtonInline
+            left="x-small"
+            contentId={helpId}
+            help={help}
+          />
+        )}
+      </Heading>
+
+      {hasHelp && (
+        <HelpButtonInlineContent
+          top="x-small"
+          contentId={helpId}
+          help={help}
+        />
+      )}
+    </>
   )
 }
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.screenshot.test.ts
index 4ff7d054791..40fa8c7835a 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.screenshot.test.ts
@@ -8,16 +8,27 @@ describe('Form.MainHeading', () => {
     url: '/uilib/extensions/forms/Form/MainHeading/demos',
   })
 
-  it('have to match over stack', async () => {
+  it('have to match above stack', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="layout-main-heading-over-stack"]',
+      selector: '[data-visual-test="layout-main-heading-above-stack"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match over card', async () => {
+  it('have to match above card', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="layout-main-heading-over-card"]',
+      selector: '[data-visual-test="layout-main-heading-above-card"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match help button', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="layout-main-heading-help-button"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="layout-main-heading-help-button"] .dnb-help-button',
+      recalculateHeightAfterSimulate: true,
     })
     expect(screenshot).toMatchImageSnapshot()
   })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.test.tsx
index 68cf8798f80..09b787f5710 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/MainHeading.test.tsx
@@ -43,6 +43,7 @@ describe('Form.MainHeading', () => {
       'dnb-heading',
       'dnb-h--large',
       'dnb-forms-main-heading',
+      'dnb-card--auto-indent',
       'custom-class',
     ])
   })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-over-card.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-above-card.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-over-card.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-above-card.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-over-stack.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-above-stack.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-over-stack.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-above-stack.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-help-button.snap.png
new file mode 100644
index 00000000000..12122c32b65
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/__tests__/__image_snapshots__/formmainheading-have-to-match-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
index 32fb96133fc..00ad643d12e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/MainHeading/style/dnb-form-main-heading.scss
@@ -7,16 +7,10 @@
       margin: 0;
     }
   }
+}
 
-  &:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card) {
-    &:not([class*='space__left']) {
-      @include allAbove(small) {
-        margin-left: var(--spacing-medium);
-      }
-    }
-
-    &:not([class*='space__bottom']) {
-      margin-bottom: var(--spacing-small);
-    }
+.dnb-forms-main-heading + .dnb-help-button__content {
+  .dnb-section {
+    margin-top: 1rem;
   }
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx
index 8eeb2843696..152465b6edc 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx
@@ -119,7 +119,7 @@ describe('Form.Section', () => {
             "current": <input
               autocomplete="given-name"
               class="dnb-input__input"
-              id="id-r14"
+              id="id-r1b"
               name="firstName"
               type="text"
               value=""
@@ -148,7 +148,7 @@ describe('Form.Section', () => {
               aria-required="true"
               autocomplete="family-name"
               class="dnb-input__input"
-              id="id-r19"
+              id="id-r1h"
               name="lastName"
               type="text"
               value=""
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png
index 8564a8bf562..e3303eba973 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-edit-container.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png
index a1a343b7e57..455d0fdc206 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png and b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/__image_snapshots__/formsection-have-to-match-basic-view-container.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
index a129448c786..399486c581b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/Section/style/dnb-form-section.scss
@@ -13,6 +13,9 @@
 
     &--variant-basic {
       --border-color: transparent;
+      .dnb-card {
+        --card-outline-color: transparent;
+      }
     }
 
     &__inner {
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/SubHeading.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/SubHeading.tsx
index bed12af6505..3c2184fe5fc 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/SubHeading.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/SubHeading.tsx
@@ -1,26 +1,56 @@
 import React from 'react'
 import classnames from 'classnames'
+import useId from '../../../../shared/helpers/useId'
 import Heading from '../../../../components/heading/Heading'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+  HelpProps,
+} from '../../../../components/help-button/HelpButtonInline'
 import type { HeadingLevel } from '../../../../components/heading/Heading'
 import type { ComponentProps } from '../../types'
 
 export type Props = ComponentProps & {
   level?: HeadingLevel
+  help?: HelpProps
   children?: React.ReactNode
 } & Omit<React.HTMLProps<HTMLElement>, 'size'>
 
 function SubHeading({ level, ...props }: Props) {
-  const { className, children, ...rest } = props
+  const { help, className, children, ...rest } = props
+  const helpId = useId()
+  const hasHelp = help?.title || help?.content
+
   return (
-    <Heading
-      className={classnames('dnb-forms-sub-heading', className)}
-      level={level || 3}
-      skip_correction
-      size="medium"
-      {...rest}
-    >
-      {children}
-    </Heading>
+    <>
+      <Heading
+        className={classnames(
+          'dnb-forms-sub-heading',
+          'dnb-card--auto-indent',
+          className
+        )}
+        level={level || 3}
+        skip_correction
+        size="medium"
+        {...rest}
+      >
+        {children}
+        {hasHelp && (
+          <HelpButtonInline
+            left="x-small"
+            contentId={helpId}
+            help={help}
+          />
+        )}
+      </Heading>
+
+      {hasHelp && (
+        <HelpButtonInlineContent
+          top="x-small"
+          contentId={helpId}
+          help={help}
+        />
+      )}
+    </>
   )
 }
 
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.screenshot.test.ts
index 540760d42bc..5aeb9005783 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.screenshot.test.ts
@@ -8,9 +8,9 @@ describe('Form.SubHeading', () => {
     url: '/uilib/extensions/forms/Form/SubHeading/demos',
   })
 
-  it('have to match over card', async () => {
+  it('have to match above card', async () => {
     const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="layout-sub-heading-over-card"]',
+      selector: '[data-visual-test="layout-sub-heading-above-card"]',
     })
     expect(screenshot).toMatchImageSnapshot()
   })
@@ -28,4 +28,15 @@ describe('Form.SubHeading', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match help button', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="layout-sub-heading-help-button"]',
+      simulate: 'click',
+      simulateSelector:
+        '[data-visual-test="layout-sub-heading-help-button"] .dnb-help-button',
+      recalculateHeightAfterSimulate: true,
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.test.tsx
index 64576178202..abe8e5a205e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/SubHeading.test.tsx
@@ -41,6 +41,7 @@ describe('Form.SubHeading', () => {
       'dnb-heading',
       'dnb-h--medium',
       'dnb-forms-sub-heading',
+      'dnb-card--auto-indent',
       'custom-class',
     ])
   })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-above-card.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-above-card.snap.png
new file mode 100644
index 00000000000..47d7edee661
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-above-card.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-help-button.snap.png
new file mode 100644
index 00000000000..336e6ad8c08
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-over-card.snap.png b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-over-card.snap.png
deleted file mode 100644
index 556aff46dac..00000000000
Binary files a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/__tests__/__image_snapshots__/formsubheading-have-to-match-over-card.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
index 57e5d25caf5..eebef041e02 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss
@@ -14,3 +14,9 @@
     }
   }
 }
+
+.dnb-forms-sub-heading + .dnb-help-button__content {
+  .dnb-section {
+    margin-top: 1rem;
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
index 0eb56b58c02..4c877bf88f1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/SubmitButton.tsx
@@ -53,11 +53,7 @@ function SubmitButton(props: Props) {
     >
       {content}
 
-      <SubmitIndicator
-        state={
-          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR
-        }
-      />
+      <SubmitIndicator state={showIndicator ? 'pending' : formState} />
     </Button>
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
index e7ea2d6e990..3e6de9c123f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { Icon, Space, Tooltip } from '../../../../components'
 import type { SpaceProps } from '../../../../components/Space'
@@ -35,11 +35,20 @@ function SubmitIndicator(props: Props) {
   const [willWrap, setWillWrap] = useState(false)
   const key = useMemo(() => convertJsxToString(children), [children])
 
+  const recalculate = useCallback(() => {
+    setWillWrap(willWordWrap(childrenRef.current, '. . . '))
+  }, [childrenRef])
+
   useLayoutEffect(() => {
-    if (children && state) {
-      setWillWrap(willWordWrap(childrenRef.current, '. . . '))
+    if (key) {
+      recalculate()
+
+      window.addEventListener('resize', recalculate)
+      return () => {
+        window.removeEventListener('resize', recalculate)
+      }
     }
-  }, [children, state])
+  }, [key, recalculate])
 
   const params = {
     className: classnames(
@@ -58,7 +67,9 @@ function SubmitIndicator(props: Props) {
           'aria-busy': true,
           'aria-label': translation.ProgressIndicator.indicator_label,
         }
-      : {}
+      : {
+          'aria-hidden': true,
+        }
 
   const dot = <b>.</b>
   const indicator = (
@@ -107,9 +118,14 @@ function willWordWrap(element: HTMLElement, word: string) {
 
   const { offsetHeight, innerHTML } = element
 
-  element.innerHTML += word
-  const height = element.offsetHeight
-  element.innerHTML = innerHTML
+  const clone = element.cloneNode(true) as HTMLElement
+  element.parentElement?.insertBefore(clone, element)
+
+  clone.innerHTML += word
+  const height = clone.offsetHeight
+  clone.innerHTML = innerHTML
+
+  clone.remove()
 
   return height > offsetHeight
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
index 84c115537cc..411032ba549 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Form } from '../../..'
 import { axeComponent } from '../../../../../core/jest/jestSetup'
@@ -101,6 +101,16 @@ describe('Form.SubmitIndicator', () => {
     expect(dots).toHaveAttribute('aria-busy', 'true')
   })
 
+  it('should have aria-hidden when not pending', () => {
+    render(<Form.SubmitIndicator state="complete" />)
+
+    const dots = document.querySelector(
+      '.dnb-forms-submit-indicator__content'
+    )
+
+    expect(dots).toHaveAttribute('aria-hidden', 'true')
+  })
+
   it('should have default aria-label', () => {
     render(<Form.SubmitIndicator state="pending" />)
 
@@ -144,24 +154,28 @@ describe('Form.SubmitIndicator', () => {
     expect(element).toHaveTextContent('...')
   })
 
-  it('should check if a newline is needed', () => {
-    Object.defineProperties(HTMLElement.prototype, {
-      offsetHeight: {
-        get: () => 10,
-      },
-    })
+  it('should remove dots when state is "complete"', async () => {
+    const { rerender } = render(<Form.SubmitIndicator state="abort" />)
 
+    const element = document.querySelector('.dnb-forms-submit-indicator')
+    expect(element).toHaveTextContent('')
+
+    rerender(<Form.SubmitIndicator state="success" />)
+
+    expect(element).toHaveTextContent('')
+
+    rerender(<Form.SubmitIndicator state="complete" />)
+
+    expect(element).toHaveTextContent('...')
+  })
+
+  it('should check if a newline is needed', () => {
     const { rerender } = render(
       <Form.SubmitIndicator state="pending">
         Text of a long label 1
       </Form.SubmitIndicator>
     )
 
-    const element = document.querySelector('.dnb-forms-submit-indicator')
-    expect(element).not.toHaveClass(
-      'dnb-forms-submit-indicator--inline-wrap'
-    )
-
     let count = 0
     Object.defineProperties(HTMLElement.prototype, {
       offsetHeight: {
@@ -172,6 +186,11 @@ describe('Form.SubmitIndicator', () => {
       },
     })
 
+    const element = document.querySelector('.dnb-forms-submit-indicator')
+    expect(element).not.toHaveClass(
+      'dnb-forms-submit-indicator--inline-wrap'
+    )
+
     rerender(
       <Form.SubmitIndicator state="pending">
         Text of a long label 2
@@ -197,6 +216,37 @@ describe('Form.SubmitIndicator', () => {
     )
   })
 
+  it('should recalculate wrapping on window resize', async () => {
+    render(
+      <Form.SubmitIndicator state="pending">
+        Text of a long label
+      </Form.SubmitIndicator>
+    )
+
+    let count = 0
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => {
+          count++
+          return 10 * count
+        },
+      },
+    })
+
+    const element = document.querySelector('.dnb-forms-submit-indicator')
+    expect(element).not.toHaveClass(
+      'dnb-forms-submit-indicator--inline-wrap'
+    )
+
+    window.dispatchEvent(new Event('resize'))
+
+    await waitFor(() => {
+      expect(element).toHaveClass(
+        'dnb-forms-submit-indicator--inline-wrap'
+      )
+    })
+  })
+
   it('should support HTML content', () => {
     Object.defineProperties(HTMLElement.prototype, {
       offsetHeight: {
@@ -210,7 +260,7 @@ describe('Form.SubmitIndicator', () => {
       </Form.SubmitIndicator>
     )
 
-    const element = document.querySelector('.dnb-forms-submit-indicator ')
+    const element = document.querySelector('.dnb-forms-submit-indicator')
     expect(element).not.toHaveClass(
       'dnb-forms-submit-indicator--inline-wrap'
     )
@@ -260,6 +310,57 @@ describe('Form.SubmitIndicator', () => {
     )
   })
 
+  it('should not remove event listeners of nested components', async () => {
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => 10,
+      },
+    })
+
+    const NestedComponent = () => {
+      const [count, increment] = React.useReducer((state) => state + 1, 1)
+      return <button onClick={increment}>{count}</button>
+    }
+
+    const { rerender } = render(
+      <Form.SubmitIndicator state="pending">
+        <NestedComponent /> label 1
+      </Form.SubmitIndicator>
+    )
+
+    const element = document.querySelector('.dnb-forms-submit-indicator')
+
+    expect(element).not.toHaveClass(
+      'dnb-forms-submit-indicator--inline-wrap'
+    )
+    expect(element.querySelector('span').innerHTML).toBe(
+      '<button>1</button> label 1'
+    )
+
+    let count = 0
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => {
+          count++
+          return 10 * count
+        },
+      },
+    })
+
+    rerender(
+      <Form.SubmitIndicator state="pending">
+        <NestedComponent /> label 2
+      </Form.SubmitIndicator>
+    )
+
+    await userEvent.click(document.querySelector('button'))
+
+    expect(element).toHaveClass('dnb-forms-submit-indicator--inline-wrap')
+    expect(element.querySelector('span').innerHTML).toBe(
+      '<button>2</button> label 2'
+    )
+  })
+
   it('should update children (label) when it changes', async () => {
     const MockComponent = () => {
       const [count, increment] = React.useReducer((state) => state + 1, 1)
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss
index 0f5c99a3d2b..4ddd80d5ae1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss
@@ -46,12 +46,6 @@
   }
   &--state-success &__content {
     font-size: 1em;
-    // opacity: 0;
-    // font-size: 0;
-    // white-space: nowrap;
-
-    // animation-name: submit-indicator-success;
-    // animation-duration: 5s;
 
     .dnb-icon {
       padding-left: var(--padding-left);
diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx
index d8edfa4f266..f8a8e8b3fe8 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx
@@ -105,7 +105,7 @@ describe('Tools.GenerateSchema', () => {
           "innerRef": {
             "current": <input
               class="dnb-input__input"
-              id="id-rj"
+              id="id-rm"
               name="myField"
               type="text"
               value=""
@@ -127,7 +127,7 @@ describe('Tools.GenerateSchema', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-ro"
+                id="id-rs"
                 name="nested/myString"
                 type="text"
                 value="my string"
@@ -168,7 +168,7 @@ describe('Tools.GenerateSchema', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-rj"
+              id="id-rm"
               name="myString"
               type="text"
               value="local value"
@@ -189,7 +189,7 @@ describe('Tools.GenerateSchema', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-rj"
+              id="id-rm"
               name="myString"
               type="text"
               value="local value"
diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
index 2e60a06e4b3..07e7d3e622e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
@@ -62,7 +62,7 @@ describe('Tools.ListAllProps', () => {
           "innerRef": {
             "current": <input
               class="dnb-input__input"
-              id="id-r8"
+              id="id-r9"
               name="myField"
               type="text"
               value=""
@@ -84,7 +84,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-rd"
+                id="id-rf"
                 name="nested/myString"
                 type="text"
                 value="my string"
@@ -125,7 +125,7 @@ describe('Tools.ListAllProps', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-r8"
+              id="id-r9"
               name="myString"
               type="text"
               value="local value"
@@ -146,7 +146,7 @@ describe('Tools.ListAllProps', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-r8"
+              id="id-r9"
               name="myString"
               type="text"
               value="local value"
@@ -273,7 +273,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-rr"
+                id="id-rv"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -295,7 +295,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-rm"
+                id="id-rp"
                 name="myString"
                 type="text"
                 value=""
@@ -364,7 +364,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r1t"
+                id="id-r27"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -390,7 +390,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r1i"
+                  id="id-r1q"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -413,7 +413,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r1d"
+                id="id-r1k"
                 name="myString"
                 type="text"
                 value=""
@@ -470,7 +470,7 @@ describe('Tools.ListAllProps', () => {
                 "innerRef": {
                   "current": <input
                     class="dnb-input__input"
-                    id="id-r28"
+                    id="id-r2k"
                     inputmode="decimal"
                     name="myObject/nested/withNumber"
                     type="text"
@@ -496,7 +496,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r23"
+                  id="id-r2e"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -562,7 +562,7 @@ describe('Tools.ListAllProps', () => {
                 "current": <input
                   aria-required="true"
                   class="dnb-input__input"
-                  id="id-r2u"
+                  id="id-r3e"
                   inputmode="decimal"
                   name="myObject/withNumber"
                   type="text"
@@ -588,7 +588,7 @@ describe('Tools.ListAllProps', () => {
                 "current": <input
                   aria-required="true"
                   class="dnb-input__input"
-                  id="id-r2j"
+                  id="id-r31"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -612,7 +612,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-r2e"
+                id="id-r2r"
                 name="myString"
                 type="text"
                 value=""
@@ -673,9 +673,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="0"
                   aria-valuetext="0"
                   class="dnb-input__input"
-                  id="id-r39"
+                  id="id-r3q"
                   inputmode="decimal"
-                  name="id-r39"
+                  name="id-r3q"
                   role="spinbutton"
                   step="1"
                   type="text"
@@ -706,9 +706,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="1"
                   aria-valuetext="1"
                   class="dnb-input__input"
-                  id="id-r3e"
+                  id="id-r40"
                   inputmode="decimal"
-                  name="id-r3e"
+                  name="id-r40"
                   role="spinbutton"
                   step="1"
                   type="text"
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx
index 26eb545e193..3f23b7426c0 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx
@@ -13,9 +13,6 @@ beforeEach(() => {
     if (
       !String(args[1]).includes(
         'You may wrap Wizard.Container in Form.Handler'
-      ) &&
-      !String(args[1]).includes(
-        'Provide a label when using an async validator or onChange event'
       )
     ) {
       log(...args)
diff --git a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
index d6759f8f78d..abdabed701d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/Wizard/style/themes/dnb-wizard-layout-theme-ui.scss
@@ -1,7 +1,7 @@
 .dnb-forms-wizard-layout {
   &__contents {
     .dnb-card {
-      --border-color: var(--color-pistachio);
+      --card-outline-color: var(--color-pistachio);
     }
   }
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/ChildrenWithAge.test.tsx b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/ChildrenWithAge.test.tsx
index 6b2f4e52755..20d20cfed1e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/ChildrenWithAge.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/ChildrenWithAge.test.tsx
@@ -101,9 +101,9 @@ describe('ChildrenWithAge', () => {
 
     await userEvent.click(document.querySelector('button'))
 
-    const countChildrenFieldBlock = screen.queryByText(
-      translationsNO.ChildrenWithAge.countChildren.fieldLabel
-    ).parentElement.parentElement.parentElement
+    const countChildrenFieldBlock = screen
+      .queryByText(translationsNO.ChildrenWithAge.countChildren.fieldLabel)
+      .closest('.dnb-forms-field-block') as HTMLElement
 
     expect(
       within(countChildrenFieldBlock).getByTitle('Reduser (0)')
@@ -122,12 +122,14 @@ describe('ChildrenWithAge', () => {
     await userEvent.click(document.querySelector('button'))
     await userEvent.type(document.querySelector('input'), '1')
 
-    const childrenAgeFieldBlock = screen.queryByText(
-      translationsNO.ChildrenWithAge.childrenAge.fieldLabel.replace(
-        '{itemNo}',
-        '1'
+    const childrenAgeFieldBlock = screen
+      .queryByText(
+        translationsNO.ChildrenWithAge.childrenAge.fieldLabel.replace(
+          '{itemNo}',
+          '1'
+        )
       )
-    ).parentElement.parentElement.parentElement
+      .closest('.dnb-forms-field-block') as HTMLElement
 
     expect(
       within(childrenAgeFieldBlock).queryByRole('Reduser')
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-children.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-children.snap.png
index 3e7c44d8598..830a623a7f3 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-children.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-children.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-no-answers.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-no-answers.snap.png
index 6c8bb66f158..222001187eb 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-no-answers.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-multiple-no-answers.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-no-children.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-no-children.snap.png
index 80d1d262711..915158655d6 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-no-children.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-no-children.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-previously-filled-out-data.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-previously-filled-out-data.snap.png
index 80d1d262711..915158655d6 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-previously-filled-out-data.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-field-and-value-when-previously-filled-out-data.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-when-answering-yes-to-all-options.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-when-answering-yes-to-all-options.snap.png
index 94bcd439999..515c8029729 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-when-answering-yes-to-all-options.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-sbanken-have-to-match-when-answering-yes-to-all-options.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-children.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-children.snap.png
index 9bf222e050b..3fe2169bf6a 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-children.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-children.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-no-answers.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-no-answers.snap.png
index 751115cfbd3..fa470aca492 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-no-answers.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-multiple-no-answers.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-no-children.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-no-children.snap.png
index 23794cbaa64..dffe647c90b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-no-children.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-no-children.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-previously-filled-out-data.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-previously-filled-out-data.snap.png
index 23794cbaa64..dffe647c90b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-previously-filled-out-data.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-field-and-value-when-previously-filled-out-data.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-when-answering-yes-to-all-options.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-when-answering-yes-to-all-options.snap.png
index 9970339c829..d219aa1a09b 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-when-answering-yes-to-all-options.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-for-ui-have-to-match-when-answering-yes-to-all-options.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-have-to-match-small-screens.snap.png b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-have-to-match-small-screens.snap.png
index 4038ab8f06f..c49d6ed6e05 100644
Binary files a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-have-to-match-small-screens.snap.png and b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__image_snapshots__/childrenwithage-have-to-match-small-screens.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap
index e8a459ad2a5..e44bffd96c4 100644
--- a/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap
+++ b/packages/dnb-eufemia/src/extensions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap
@@ -15,9 +15,9 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
             aria-placeholder="0"
             aria-required="true"
             class="dnb-input__input"
-            id="id-rdu"
+            id="id-rg4"
             inputmode="numeric"
-            name="id-rdu"
+            name="id-rg4"
             type="text"
           />,
         },
@@ -125,9 +125,9 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
             aria-placeholder="0"
             aria-required="true"
             class="dnb-input__input"
-            id="id-re3"
+            id="id-rga"
             inputmode="numeric"
-            name="id-re3"
+            name="id-rga"
             type="text"
           />,
         },
@@ -331,7 +331,7 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
         aria-valuenow="2"
         aria-valuetext="2"
         class="dnb-input__input"
-        id="id-rdk"
+        id="id-rfp"
         inputmode="numeric"
         name="countChildren"
         role="spinbutton"
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
index 529969c6fe0..0f723046fc9 100644
--- a/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/hooks/useFieldProps.ts
@@ -1397,7 +1397,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
         } else {
           await setEventResult(null)
         }
-      } else {
+      } else if (onChangeContext || !asyncBehaviorIsEnabled) {
         setEventResult(
           handlePathChangeDataContext?.(
             identifier
@@ -1575,6 +1575,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
           eventName: 'onChange',
           additionalArgs,
         })
+
         setEventResult(onChange?.apply(this, args))
       }
 
@@ -2152,6 +2153,14 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     }
   }
 
+  const help = props.help
+  if (help?.title || help?.content) {
+    htmlAttributes['aria-describedby'] = combineDescribedBy(
+      htmlAttributes,
+      `${id}-help`
+    )
+  }
+
   const fieldBlockProps = {
     /** Documented APIs */
     info: !inFieldBlock ? infoRef.current : undefined,
@@ -2163,6 +2172,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     labelSuffix: props.labelSuffix,
     layout: props.layout,
     layoutOptions: props.layoutOptions,
+    help: props.help,
 
     /** HTML Attributes */
     disabled:
diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
index 11de32e4e5b..b65c5707c4e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/types.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -427,13 +427,6 @@ export type FieldPropsWithExtraValue<
 > &
   DataValueWriteProps<Value, EmptyValue, ExtraValue>
 
-export interface FieldHelpProps {
-  help?: {
-    title?: string
-    content?: React.ReactNode
-  }
-}
-
 export interface ValueProps<Value = unknown>
   extends DataValueReadComponentProps<Value> {
   /**
diff --git a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
index 703366d8b7b..8c99cd6f76f 100644
--- a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
+++ b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
@@ -8,7 +8,9 @@
 @import '../extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss';
 @import '../extensions/forms/Field/Expiry/style/dnb-expiry.scss';
 @import '../extensions/forms/Field/Number/style/dnb-number.scss';
+@import '../extensions/forms/Field/String/style/dnb-string.scss';
 @import '../extensions/forms/Field/Password/style/dnb-password.scss';
+@import '../extensions/forms/Field/Upload/style/dnb-upload.scss';
 @import '../extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss';
 @import '../extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss';
 @import '../extensions/forms/Field/Selection/style/dnb-selection.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss
index d96bc34a35b..b53c3b6efc7 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss
@@ -31,6 +31,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/form-row/style/themes/dnb-form-row-theme-sbanken.scss';
 @import '../../../components/form-status/style/themes/dnb-form-status-theme-sbanken.scss';
 @import '../../../components/global-status/style/themes/dnb-global-status-theme-sbanken.scss';
+@import '../../../components/help-button/style/themes/dnb-help-button-theme-sbanken.scss';
 @import '../../../components/input/style/themes/dnb-input-theme-sbanken.scss';
 @import '../../../components/logo/style/themes/dnb-logo-theme-sbanken.scss';
 @import '../../../components/pagination/style/themes/dnb-pagination-theme-sbanken.scss';
@@ -54,7 +55,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/drawer/style/themes/dnb-drawer-theme-ui.scss';
 @import '../../../components/form-set/style/themes/dnb-form-set-theme-ui.scss';
 @import '../../../components/global-error/style/themes/dnb-global-error-theme-ui.scss';
-@import '../../../components/help-button/style/themes/dnb-help-button-theme-ui.scss';
 @import '../../../components/icon/style/themes/dnb-icon-theme-ui.scss';
 @import '../../../components/modal/style/themes/dnb-modal-theme-ui.scss';
 @import '../../../components/space/style/themes/dnb-space-theme-ui.scss';