Repository: dnbexperience/eufemia
Pull request #4607: feat(Forms): add `help` property to all Value.* components
Author: login: langz
Labels: name: released
Created: 2025-02-20T14:09:57Z | Merged: 2025-03-04T12:45:30Z



Diff:
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx
index 866b463be8b..bca12d856a2 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/Examples.tsx
@@ -462,3 +462,34 @@ export const TransformData = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler
+        defaultData={{
+          myField: 12345,
+        }}
+      >
+        <Form.Card>
+          <Field.Number
+            path="/myField"
+            label="Label text"
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+          <Value.Number
+            path="/myField"
+            inheritLabel
+            help={{
+              title: 'Help title',
+              content: 'Help content.',
+            }}
+          />
+        </Form.Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/demos.mdx
index 3663fee5f00..7cd923f0285 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/demos.mdx
@@ -7,6 +7,10 @@ import * as Examples from './Handler/Examples'
 
 ## Demos
 
+### With a help button
+
+<Examples.WithHelp />
+
 ### In combination with a SubmitButton
 
 <Examples.AsyncSubmit />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/Examples.tsx
index d08ab5e54ab..7b767de2703 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/Examples.tsx
@@ -1,4 +1,5 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Flex } from '@dnb/eufemia/src'
 import { Form, Value } from '@dnb/eufemia/src/extensions/forms'
 
 export const Basic = () => {
@@ -122,3 +123,38 @@ export const WithSummaryListGridLayout = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox data-visual-test="forms-value-composition-help">
+      <Flex.Stack>
+        <Value.Composition
+          label="Label with help"
+          help={{
+            title: 'Hva betyr lånebeløp?',
+            content: 'Dette er hvor mye du har tenkt å låne totalt.',
+          }}
+        >
+          <Value.String value="value" />
+          <Value.Number value={123} />
+        </Value.Composition>
+
+        <Form.Card>
+          <Value.SummaryList>
+            <Value.Composition
+              label="Label with help inside SummaryList"
+              help={{
+                title: 'Hva betyr lånebeløp?',
+                content: 'Dette er hvor mye du har tenkt å låne totalt.',
+              }}
+            >
+              <Value.String value="value" />
+              <Value.Number value={123} />
+            </Value.Composition>
+            <Value.String value="Another value" />
+          </Value.SummaryList>
+        </Form.Card>
+      </Flex.Stack>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/demos.mdx
index 91315772cf0..0ddec3fadc9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/Composition/demos.mdx
@@ -25,3 +25,7 @@ import * as Examples from './Examples'
 ### Width comparison
 
 <Examples.WidthComparison />
+
+### With help
+
+<Examples.WithHelp />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx
index 9f2c52382d6..6e1f3b0fd0a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/Examples.tsx
@@ -53,3 +53,18 @@ export const Inline = () => {
     </ComponentBox>
   )
 }
+
+export const WithHelp = () => {
+  return (
+    <ComponentBox>
+      <Value.String
+        label="Label text"
+        value="Value text"
+        help={{
+          title: 'Help title',
+          content: 'Help content.',
+        }}
+      />
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/demos.mdx
index e98e0253f68..ff10e8b1b35 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/String/demos.mdx
@@ -26,6 +26,10 @@ import * as Examples from './Examples'
 
 <Examples.LabelAndValue />
 
+### With help
+
+<Examples.WithHelp />
+
 ### Inline
 
 <Examples.Inline />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx
index 022f461a7e2..2c419b5bd85 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/Examples.tsx
@@ -68,6 +68,183 @@ export const HorizontalLayout = () => {
   )
 }
 
+export const DefaultLayoutWithHelp = () => {
+  return (
+    <ComponentBox data-visual-test="forms-value-summary-list-default-with-help">
+      <Form.Handler
+        data={{
+          firstName: 'John',
+          lastName: 'Doe',
+          nickName: 'JD',
+          streetName: 'Osloveien',
+          streetNr: 12,
+        }}
+      >
+        <Form.Card>
+          <Form.SubHeading>Subheading</Form.SubHeading>
+
+          <Value.SummaryList>
+            <Value.Name.First
+              path="/firstName"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Name.Last path="/lastName" />
+            <Value.String
+              path="/nickName"
+              label="kallenavn"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Composition
+              label="Street"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            >
+              <Value.String path="/streetName" />
+              <Value.Number
+                path="/streetNr"
+                help={{
+                  open: true,
+                  title: 'Help title',
+                  content: 'Help content',
+                }}
+              />
+            </Value.Composition>
+          </Value.SummaryList>
+        </Form.Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const GridLayoutWithHelp = () => {
+  return (
+    <ComponentBox data-visual-test="forms-value-summary-list-grid-with-help">
+      <Form.Handler
+        data={{
+          firstName: 'John',
+          lastName: 'Doe',
+          nickName: 'JD',
+          streetName: 'Osloveien',
+          streetNr: 12,
+        }}
+      >
+        <Form.Card>
+          <Form.SubHeading>Subheading</Form.SubHeading>
+
+          <Value.SummaryList layout="grid">
+            <Value.Name.First
+              path="/firstName"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Name.Last path="/lastName" />
+            <Value.String
+              path="/nickName"
+              label="kallenavn"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Composition
+              label="Street"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            >
+              <Value.String path="/streetName" />
+              <Value.Number
+                path="/streetNr"
+                help={{
+                  open: true,
+                  title: 'Help title',
+                  content: 'Help content',
+                }}
+              />
+            </Value.Composition>
+          </Value.SummaryList>
+        </Form.Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
+export const HorizontalLayoutWithHelp = () => {
+  return (
+    <ComponentBox data-visual-test="forms-value-summary-list-horizontal-with-help">
+      <Form.Handler
+        data={{
+          firstName: 'John',
+          lastName: 'Doe',
+          nickName: 'JD',
+          streetName: 'Osloveien',
+          streetNr: 12,
+        }}
+      >
+        <Form.Card>
+          <Form.SubHeading>Subheading</Form.SubHeading>
+
+          <Value.SummaryList layout="horizontal">
+            <Value.Name.First
+              path="/firstName"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Name.Last path="/lastName" />
+            <Value.String
+              path="/nickName"
+              label="kallenavn"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+            <Value.Composition
+              label="Street"
+              help={{
+                open: true,
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            >
+              <Value.String path="/streetName" />
+              <Value.Number
+                path="/streetNr"
+                help={{
+                  open: true,
+                  title: 'Help title',
+                  content: 'Help content',
+                }}
+              />
+            </Value.Composition>
+          </Value.SummaryList>
+        </Form.Card>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
 export const CombinedLayout = () => {
   return (
     <ComponentBox data-visual-test="forms-value-summary-list-combined">
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx
index 826d07d9e79..98bd6ce2ecd 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Value/SummaryList/demos.mdx
@@ -42,4 +42,7 @@ To maintain the semantic structure of the `dl` element, the `Form.Visibility` co
 
 <VisibleWhenVisualTest>
   <Examples.HorizontalLayoutWithoutLabel />
+  <Examples.DefaultLayoutWithHelp />
+  <Examples.HorizontalLayoutWithHelp />
+  <Examples.GridLayoutWithHelp />
 </VisibleWhenVisualTest>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx
index b954f4b2cac..96d717f84d6 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/Examples.tsx
@@ -1,6 +1,6 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
 import { ValueBlock } from '@dnb/eufemia/src/extensions/forms'
-import { P } from '@dnb/eufemia/src'
+import { Anchor, P } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -13,8 +13,8 @@ export const Default = () => {
 export const Inline = () => {
   return (
     <ComponentBox
-      scope={{ ValueBlock }}
       data-visual-test="value-block-inline"
+      scope={{ ValueBlock }}
     >
       <P>
         this is before the value <ValueBlock inline>Foo</ValueBlock>{' '}
@@ -23,3 +23,44 @@ export const Inline = () => {
     </ComponentBox>
   )
 }
+
+export const Help = () => {
+  return (
+    <ComponentBox
+      scope={{ ValueBlock }}
+      data-visual-test="value-block-help-button"
+    >
+      <ValueBlock
+        label="Label text"
+        help={{ title: 'Help title', content: 'Help content' }}
+      >
+        Data-value goes here
+      </ValueBlock>
+    </ComponentBox>
+  )
+}
+
+export const HelpHtml = () => {
+  return (
+    <ComponentBox
+      scope={{ ValueBlock }}
+      data-visual-test="value-block-help-button-html"
+    >
+      <ValueBlock
+        label="Label text with a long label label – lorem ipsum
+        dolor sit"
+        help={{
+          open: true,
+          title: <strong>Help title</strong>,
+          content: (
+            <>
+              Help content with a <Anchor href="/">Anchor</Anchor>.
+            </>
+          ),
+        }}
+      >
+        Data-value goes here – lorem ipsum dolor sit amet consectetur.
+      </ValueBlock>
+    </ComponentBox>
+  )
+}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/demos.mdx
index 93124c20817..a86b5ad0ec5 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/create-component/ValueBlock/demos.mdx
@@ -11,3 +11,11 @@ import * as Examples from './Examples'
 ### Inline
 
 <Examples.Inline />
+
+## Help button
+
+<Examples.Help />
+
+## Help button with HTML
+
+<Examples.HelpHtml />
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 5792284d4f3..c312596e8d5 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-r9"
+              id="id-ra"
               name="myField"
               type="text"
               value=""
@@ -84,7 +84,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-rf"
+                id="id-rg"
                 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-r9"
+              id="id-ra"
               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-r9"
+              id="id-ra"
               name="myString"
               type="text"
               value="local value"
@@ -273,7 +273,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-rv"
+                id="id-r12"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -295,7 +295,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-rp"
+                id="id-rs"
                 name="myString"
                 type="text"
                 value=""
@@ -364,7 +364,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r27"
+                id="id-r2a"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -390,7 +390,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r1q"
+                  id="id-r1t"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -413,7 +413,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r1k"
+                id="id-r1n"
                 name="myString"
                 type="text"
                 value=""
@@ -470,7 +470,7 @@ describe('Tools.ListAllProps', () => {
                 "innerRef": {
                   "current": <input
                     class="dnb-input__input"
-                    id="id-r2k"
+                    id="id-r2n"
                     inputmode="decimal"
                     name="myObject/nested/withNumber"
                     type="text"
@@ -496,7 +496,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r2e"
+                  id="id-r2h"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -562,7 +562,7 @@ describe('Tools.ListAllProps', () => {
                 "current": <input
                   aria-required="true"
                   class="dnb-input__input"
-                  id="id-r3e"
+                  id="id-r3h"
                   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-r31"
+                  id="id-r34"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -612,7 +612,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-r2r"
+                id="id-r2u"
                 name="myString"
                 type="text"
                 value=""
@@ -683,9 +683,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="0"
                   aria-valuetext="0"
                   class="dnb-input__input"
-                  id="id-r3r"
+                  id="id-r3u"
                   inputmode="decimal"
-                  name="id-r3r"
+                  name="id-r3u"
                   role="spinbutton"
                   step="1"
                   type="text"
@@ -716,9 +716,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="1"
                   aria-valuetext="1"
                   class="dnb-input__input"
-                  id="id-r41"
+                  id="id-r44"
                   inputmode="decimal"
-                  name="id-r41"
+                  name="id-r44"
                   role="spinbutton"
                   step="1"
                   type="text"
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.screenshot.test.ts
index 3d43e63ed57..69325c7c532 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.screenshot.test.ts
@@ -31,6 +31,13 @@ describe('Value.Composition', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match forms-value-composition-help', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="forms-value-composition-help"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match forms-value-composition-summary-list-grid', async () => {
     const screenshot = await makeScreenshot({
       selector:
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.test.tsx
index 8aaee873b98..497cd9ed383 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/Composition.test.tsx
@@ -45,7 +45,7 @@ describe('Value.Composition', () => {
     )
 
     const element = document.querySelector(
-      '.dnb-forms-value-block__composition--horizontal'
+      '.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content'
     )
 
     expect(element).toHaveClass('dnb-forms-value-block--max-width-medium')
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-help.snap.png
new file mode 100644
index 00000000000..1812d83909a
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts
index 66bd9469a88..288c01ffb5f 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.screenshot.test.ts
@@ -43,4 +43,28 @@ describe('Value.SummaryList', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match default layout with help', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-value-summary-list-default-with-help"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match grid layout with help', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-value-summary-list-grid-with-help"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match horizontal layout with help', async () => {
+    const screenshot = await makeScreenshot({
+      selector:
+        '[data-visual-test="forms-value-summary-list-horizontal-with-help"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx
index 9fc03c5f835..14e20a1b1ed 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx
@@ -323,4 +323,81 @@ describe('Value.SummaryList', () => {
       })
     })
   })
+
+  describe('help', () => {
+    it('should render', async () => {
+      render(
+        <Value.SummaryList>
+          <Value.String
+            label="Label"
+            value="Value"
+            help={{
+              title: 'Help title',
+              content: 'Help content',
+            }}
+          />
+        </Value.SummaryList>
+      )
+
+      await userEvent.click(
+        document.querySelector('.dnb-help-button__inline')
+      )
+
+      const element = document.querySelector('.dnb-forms-summary-list')
+      const help = element.querySelector('.dnb-help-button__content')
+
+      expect(help).toHaveTextContent('Help title')
+      expect(help).toHaveTextContent('Help content')
+    })
+
+    it('should render without label', async () => {
+      render(
+        <Value.SummaryList>
+          <Value.String
+            value="Value"
+            help={{
+              title: 'Help title',
+              content: 'Help content',
+            }}
+          />
+        </Value.SummaryList>
+      )
+
+      await userEvent.click(
+        document.querySelector('.dnb-help-button__inline')
+      )
+
+      const element = document.querySelector('.dnb-forms-summary-list')
+      const help = element.querySelector('.dnb-help-button__content')
+
+      expect(help).toHaveTextContent('Help title')
+      expect(help).toHaveTextContent('Help content')
+    })
+
+    it('should render inside Value.Composition', async () => {
+      render(
+        <Value.SummaryList>
+          <Value.Composition>
+            <Value.String
+              value="Value"
+              help={{
+                title: 'Help title',
+                content: 'Help content',
+              }}
+            />
+          </Value.Composition>
+        </Value.SummaryList>
+      )
+
+      await userEvent.click(
+        document.querySelector('.dnb-help-button__inline')
+      )
+
+      const element = document.querySelector('.dnb-forms-summary-list')
+      const help = element.querySelector('.dnb-help-button__content')
+
+      expect(help).toHaveTextContent('Help title')
+      expect(help).toHaveTextContent('Help content')
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-default-layout-with-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-default-layout-with-help.snap.png
new file mode 100644
index 00000000000..c39df6a750e
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-default-layout-with-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-grid-layout-with-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-grid-layout-with-help.snap.png
new file mode 100644
index 00000000000..10397857764
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-grid-layout-with-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-horizontal-layout-with-help.snap.png b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-horizontal-layout-with-help.snap.png
new file mode 100644
index 00000000000..948a030da48
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/__image_snapshots__/valuesummarylist-have-to-match-horizontal-layout-with-help.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts
index 1e594e1e7b8..d5489a8d53b 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts
@@ -21,6 +21,11 @@ export const ValueProperties: 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',
+  },
   transformLabel: {
     doc: 'Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.',
     type: 'function',
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
index c2e048d4692..889bd24e53e 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
@@ -18,12 +18,31 @@ import IterateItemContext from '../Iterate/IterateItemContext'
 import { convertJsxToString } from '../../../shared/component-helper'
 import VisibilityContext from '../Form/Visibility/VisibilityContext'
 import Visibility from '../Form/Visibility/Visibility'
+import HelpButtonInline, {
+  HelpButtonInlineContent,
+  HelpProps,
+} from '../../../components/help-button/HelpButtonInline'
+import useId from '../../../shared/helpers/useId'
 
 /**
  * Props are documented in ValueDocs.ts
  */
 export type Props = Omit<ValueProps<unknown>, 'value'> & {
-  children?: React.ReactNode
+  id?: string
+
+  /** The id to link a element with */
+  forId?: string
+
+  /**
+   * Provide help content for the value.
+   */
+  help?: HelpProps
+
+  /**
+   * The layout of the value block.
+   * (Undocumented for now, as there is only one layout option, vertical.)
+   */
+  layout?: 'vertical'
 
   /**
    * Used internally by the Composition component
@@ -34,6 +53,8 @@ export type Props = Omit<ValueProps<unknown>, 'value'> & {
    * Used internally by the Composition component
    */
   gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false
+
+  children?: React.ReactNode
 }
 
 function ValueBlock(props: Props) {
@@ -42,6 +63,8 @@ function ValueBlock(props: Props) {
   const { prerenderFieldProps } = useContext(DataContext) || {}
   const { index: iterateIndex } = useContext(IterateItemContext) || {}
 
+  const id = useId(props.id ?? props.forId)
+
   const {
     className,
     label: labelProp,
@@ -55,6 +78,8 @@ function ValueBlock(props: Props) {
     showEmpty,
     children,
     composition,
+    help,
+    layout = 'vertical',
     gap = 'xx-small',
   } = props
 
@@ -104,9 +129,12 @@ function ValueBlock(props: Props) {
     )
   const defaultClass = classnames(
     'dnb-forms-value-block__content',
-    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`
+    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`,
+    maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`
   )
 
+  const hasHelp = help?.title || help?.content
+
   if (summaryListContext) {
     const Item = summaryListContext.isNested
       ? Dl
@@ -114,13 +142,14 @@ function ValueBlock(props: Props) {
       ? Dl.Item
       : Fragment
 
-    if (!label && valueBlockContext?.composition) {
+    if (!label && !hasHelp && valueBlockContext?.composition) {
       content = <span className={defaultClass}>{children}</span> ?? (
         <span className="dnb-forms-value-block__placeholder">
           {placeholder}
         </span>
       )
     } else {
+      const { layout } = summaryListContext
       content = (
         <SummaryListContext.Provider
           value={{ ...summaryListContext, isNested: true }}
@@ -129,16 +158,19 @@ function ValueBlock(props: Props) {
             <Dt
               className={classnames(
                 'dnb-forms-value-block__label',
-                (!label || labelSrOnly) && 'dnb-sr-only'
+                ((!label && !hasHelp) || labelSrOnly) && 'dnb-sr-only'
               )}
             >
               <VisibilityWrapper>
                 {label && <strong>{label}</strong>}
+                {hasHelp && (
+                  <HelpButtonInline contentId={`${id}-help`} help={help} />
+                )}
               </VisibilityWrapper>
             </Dt>
             <Dd
               className={classnames(
-                summaryListContext.layout !== 'grid' &&
+                layout !== 'grid' &&
                   !summaryListContext.isNested &&
                   maxWidth &&
                   `dnb-forms-value-block--max-width-${maxWidth}`,
@@ -146,6 +178,15 @@ function ValueBlock(props: Props) {
               )}
             >
               <VisibilityWrapper>
+                {hasHelp && (
+                  <HelpButtonInlineContent
+                    contentId={`${id}-help`}
+                    className="dnb-forms-value-block__help"
+                    help={help}
+                    breakout={layout === 'vertical'}
+                    outset={layout === 'vertical'}
+                  />
+                )}
                 {children ? (
                   <span className={defaultClass}>{children}</span>
                 ) : (
@@ -166,22 +207,42 @@ function ValueBlock(props: Props) {
         className={classnames(
           'dnb-forms-value-block',
           inline && 'dnb-forms-value-block--inline',
-          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,
           compositionClass,
           className
         )}
         {...pickSpacingProps(props)}
       >
-        {label && (
+        {(label || hasHelp) && (
           <FormLabel
             element="strong" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49
-            className="dnb-forms-value-block__label"
+            className={classnames(
+              'dnb-forms-value-block__label',
+              maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`
+            )}
             labelDirection={inline ? 'horizontal' : 'vertical'}
             srOnly={labelSrOnly}
           >
-            {label}
+            <span>
+              {label && (
+                <span className="dnb-forms-value-block__label__content">
+                  {label}
+                </span>
+              )}
+              {hasHelp && (
+                <HelpButtonInline contentId={`${id}-help`} help={help} />
+              )}
+            </span>
           </FormLabel>
         )}
+        {hasHelp && (
+          <HelpButtonInlineContent
+            contentId={`${id}-help`}
+            className="dnb-forms-value-block__help"
+            help={help}
+            breakout={layout === 'vertical'}
+            outset={layout === 'vertical'}
+          />
+        )}
         {children ? (
           <span className={defaultClass}>{children}</span>
         ) : (
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.screenshot.test.ts
index c12bee39d2b..974f37047a0 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.screenshot.test.ts
@@ -17,4 +17,18 @@ describe.each(['ui', 'sbanken'])('ValueBlock for %s', (themeName) => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match help button', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="value-block-help-button"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match help button with html', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="value-block-help-button-html"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.test.tsx
index 45b39c6f1a5..63f603b16a2 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/ValueBlock.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import { axeComponent } from '../../../../core/jest/jestSetup'
-import { render } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import ValueBlock from '../ValueBlock'
 import { Form, Value } from '../..'
+import userEvent from '@testing-library/user-event'
 
 describe('ValueBlock', () => {
   it('renders without crashing', () => {
@@ -56,16 +57,20 @@ describe('ValueBlock', () => {
   })
 
   it('should have large max-width by default', () => {
-    render(<ValueBlock showEmpty />)
+    render(<ValueBlock>content</ValueBlock>)
 
-    const element = document.querySelector('.dnb-forms-value-block')
+    const element = document.querySelector(
+      '.dnb-forms-value-block__content'
+    )
     expect(element).toHaveClass('dnb-forms-value-block--max-width-large')
   })
 
   it('should set max-width', () => {
-    render(<ValueBlock showEmpty maxWidth="medium" />)
+    render(<ValueBlock maxWidth="medium"> content</ValueBlock>)
 
-    const element = document.querySelector('.dnb-forms-value-block')
+    const element = document.querySelector(
+      '.dnb-forms-value-block__content'
+    )
     expect(element).toHaveClass('dnb-forms-value-block--max-width-medium')
   })
 
@@ -121,7 +126,7 @@ describe('ValueBlock', () => {
             class="dnb-forms-value-block--max-width-large dnb-dd"
           >
             <span
-              class="dnb-forms-value-block__content dnb-forms-value-block__content--gap-xx-small"
+              class="dnb-forms-value-block__content dnb-forms-value-block__content--gap-xx-small dnb-forms-value-block--max-width-large"
             >
               Value
             </span>
@@ -208,10 +213,10 @@ describe('ValueBlock', () => {
     it('should render HeightAnimation inside dt and dd when animate is true', () => {
       render(
         <Value.SummaryList>
-          <Value.String label="Label" value="First field" />
+          <Value.String label="Label" value="First value" />
 
           <Form.Visibility pathUndefined="/undefined" animate>
-            <Value.String label="Label" value="Second field" />
+            <Value.String label="Label" value="Second value" />
           </Form.Visibility>
         </Value.SummaryList>
       )
@@ -247,10 +252,10 @@ describe('ValueBlock', () => {
     it('should render div inside dt and dd when keepInDOM is true', () => {
       render(
         <Value.SummaryList>
-          <Value.String label="Label" value="First field" />
+          <Value.String label="Label" value="First value" />
 
           <Form.Visibility pathUndefined="/undefined" keepInDOM>
-            <Value.String label="Label" value="Second field" />
+            <Value.String label="Label" value="Second value" />
           </Form.Visibility>
         </Value.SummaryList>
       )
@@ -459,4 +464,191 @@ describe('ValueBlock', () => {
       )
     })
   })
+
+  describe('help', () => {
+    it('should render content when open is true', async () => {
+      render(
+        <ValueBlock
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          Value
+        </ValueBlock>
+      )
+
+      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(
+        <ValueBlock
+          label="Label"
+          help={{
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          Value
+        </ValueBlock>
+      )
+
+      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(
+        <ValueBlock
+          label="Label"
+          help={{
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          Value
+        </ValueBlock>
+      )
+
+      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(
+        <ValueBlock
+          id="unique"
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          Value
+        </ValueBlock>
+      )
+
+      {
+        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(
+        <ValueBlock
+          id="unique"
+          label="Label"
+          help={{
+            open: true,
+            title: 'Help title',
+            content: '\nHelp content',
+          }}
+        >
+          Value
+        </ValueBlock>
+      )
+
+      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(
+          <ValueBlock
+            label="Label"
+            help={{
+              title: 'Help title',
+            }}
+          >
+            Value
+          </ValueBlock>
+        )
+
+        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(
+          <ValueBlock
+            label="Label"
+            help={{
+              title: 'Help title',
+              content: '\nHelp content',
+            }}
+          >
+            Value
+          </ValueBlock>
+        )
+
+        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(
+          <ValueBlock
+            label="Label"
+            help={{
+              content: 'Help content',
+            }}
+          >
+            Value
+          </ValueBlock>
+        )
+
+        await userEvent.click(document.querySelector('button'))
+
+        const element = document.querySelector('.dnb-help-button__content')
+        expect(element).toBeInTheDocument()
+        expect(element.textContent).toBe('Help content')
+      })
+    })
+  })
 })
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button-with-html.snap.png b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button-with-html.snap.png
new file mode 100644
index 00000000000..c151b09772e
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button-with-html.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button.snap.png
new file mode 100644
index 00000000000..f630632ab20
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-sbanken-have-to-match-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button-with-html.snap.png b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button-with-html.snap.png
new file mode 100644
index 00000000000..802c4ee4bfd
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button-with-html.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button.snap.png
new file mode 100644
index 00000000000..91c5eb88174
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/__tests__/__image_snapshots__/valueblock-for-ui-have-to-match-help-button.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss
index 53baa112bd7..8ea0632a016 100644
--- a/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss
+++ b/packages/dnb-eufemia/src/extensions/forms/ValueBlock/style/dnb-value-block.scss
@@ -31,6 +31,10 @@
   display: block;
   font-size: var(--font-size-basis);
 
+  &:not(#{&}__composition--horizontal) &__content {
+    display: block;
+  }
+
   &--inline:not([class*='__composition']) {
     display: inline-block;
     font-size: inherit;
@@ -40,6 +44,25 @@
   &__label strong {
     font-weight: var(--font-weight-medium);
   }
+  &__label {
+    & > strong:has(+ .dnb-help-button),// To support dt > strong 
+    &__content:has(+ .dnb-help-button) {
+      margin-right: 0.5rem;
+    }
+  }
+
+  &__help {
+    display: flex;
+    flex-flow: column;
+
+    .dnb-section {
+      margin-bottom: 0.5rem;
+
+      & > .dnb-p--lead {
+        margin-bottom: 0.5rem;
+      }
+    }
+  }
 
   &__placeholder {
     color: var(--color-black-80);
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 1d9f3ce460c..66c0e38db17 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-rgo"
+            id="id-rgt"
             inputmode="numeric"
-            name="id-rgo"
+            name="id-rgt"
             type="text"
           />,
         },
@@ -125,9 +125,9 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
             aria-placeholder="0"
             aria-required="true"
             class="dnb-input__input"
-            id="id-rgu"
+            id="id-rh3"
             inputmode="numeric"
-            name="id-rgu"
+            name="id-rh3"
             type="text"
           />,
         },
@@ -331,7 +331,7 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
         aria-valuenow="2"
         aria-valuetext="2"
         class="dnb-input__input"
-        id="id-rgc"
+        id="id-rgh"
         inputmode="numeric"
         name="countChildren"
         role="spinbutton"
diff --git a/packages/dnb-eufemia/src/extensions/forms/types.ts b/packages/dnb-eufemia/src/extensions/forms/types.ts
index 9d250ff7d01..e5677629362 100644
--- a/packages/dnb-eufemia/src/extensions/forms/types.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/types.ts
@@ -17,6 +17,7 @@ import {
   FormsTranslationLocale,
 } from './hooks/useTranslation'
 import { GetValueByPath } from './hooks/useDataValue'
+import { HelpProps } from '../../components/help-button/HelpButtonInline'
 
 export type * from 'json-schema'
 export type JSONSchema = JSONSchema7
@@ -545,6 +546,11 @@ export interface ValueProps<Value = unknown>
   /** The max-width of a value block. Defaults to large */
   maxWidth?: 'small' | 'medium' | 'large' | 'auto'
 
+  /**
+   * Provide help content for the value.
+   */
+  help?: HelpProps
+
   /**
    * Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.
    */


Reviews:
user: login: langz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-02-24T11:28:15Z
user: login: langz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-02-24T11:28:26Z
user: login: langz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-02-27T14:40:07Z
user: login: tujoworker
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-01T19:53:04Z
user: login: tujoworker
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-01T19:59:59Z
user: login: langz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-01T20:28:36Z
user: login: langz
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-02T20:13:46Z

Review comments:
diff_hunk: @@ -172,16 +192,34 @@ function ValueBlock(props: Props) {
         )}
         {...pickSpacingProps(props)}
       >
-        {label && (
+        {(label || hasHelp) && (
           <FormLabel
             element="strong" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49
             className="dnb-forms-value-block__label"
             labelDirection={inline ? 'horizontal' : 'vertical'}
             srOnly={labelSrOnly}
           >
-            {label}
+            <span>
+              {label && (
+                <span className="dnb-forms-field-block__label__content">
path: packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
user: login: langz
body: ```suggestion
                <span className="dnb-forms-value-block__label__content">
```
created_at: 2025-02-24T11:28:15Z
author_association: CONTRIBUTOR
diff_hunk: @@ -172,16 +192,34 @@ function ValueBlock(props: Props) {
         )}
         {...pickSpacingProps(props)}
       >
-        {label && (
+        {(label || hasHelp) && (
           <FormLabel
             element="strong" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49
             className="dnb-forms-value-block__label"
             labelDirection={inline ? 'horizontal' : 'vertical'}
             srOnly={labelSrOnly}
           >
-            {label}
+            <span>
+              {label && (
+                <span className="dnb-forms-field-block__label__content">
+                  {label}
+                </span>
+              )}
+              {hasHelp && (
+                <HelpButtonInline contentId={`${id}-help`} help={help} />
+              )}
+            </span>
           </FormLabel>
         )}
+        {hasHelp && (
+          <HelpButtonInlineContent
+            contentId={`${id}-help`}
+            className="dnb-forms-field-block__help"
path: packages/dnb-eufemia/src/extensions/forms/ValueBlock/ValueBlock.tsx
user: login: langz
body: ```suggestion
            className="dnb-forms-value-block__help"
```
created_at: 2025-02-24T11:28:25Z
author_association: CONTRIBUTOR
path: packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-in-summary-list-with-nested-help.snap.png
user: login: langz
body: This one needs more work, In the following example(`InSummaryListWithNestedHelp`):

```
      <Value.SummaryList>
        <Value.Composition
          label="Label with help inside SummaryList"
          help={{
            title: 'Hva betyr lånebeløp?',
            content: 'Dette er hvor mye du har tenkt å låne totalt.',
            open: true,
          }}
        >
          <Value.Number
            value={123}
            help={{
              title: 'Hva betyr lånebeløp?',
              content: 'Dette er hvor mye du har tenkt å låne totalt.',
              open: true,
            }}
          />
        </Value.Composition>
      </Value.SummaryList>
```

One would expect to see two help buttons, one for the `Value.Composition`, and one for the `Value.Number` inside of the `Value.Composition`.

But as of now, one just see one help button, by the `Value.Composition`, the help button for `Value.Number` is missing:

![image](https://github.com/user-attachments/assets/131aad1d-9268-4ec8-b636-8be757d437d6)

Note this is working when not wrapped in a `Value.SummaryList`, so something magical happens when wrapped in `Value.SummaryList`.

I tried looking into it, but did not find a solution for it yet 🙏 


Other than this, I think this feature looks good👠
created_at: 2025-02-27T14:40:07Z
author_association: CONTRIBUTOR
path: packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-in-summary-list-with-nested-help.snap.png
user: login: tujoworker
body: I pushed a commit that fixes this issue, including a test that verifies it.
created_at: 2025-03-01T19:53:04Z
author_association: MEMBER
path: packages/dnb-eufemia/src/extensions/forms/Value/Composition/__tests__/__image_snapshots__/valuecomposition-have-to-match-forms-value-composition-in-summary-list-with-nested-help.snap.png
user: login: langz
body: Thanks🫡
created_at: 2025-03-01T20:28:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -21,6 +21,11 @@ export const ValueProperties: 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).',
path: packages/dnb-eufemia/src/extensions/forms/Value/ValueDocs.ts
user: login: langz
body: ```suggestion
    doc: 'Provide help content for the value 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).',
```
created_at: 2025-03-02T20:13:45Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-02-20T14:10:01Z
body: [vc]: #UNMcfui2YdNBJmU1+vbNOaMkkx3eEkAbpxEistEoNJY=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJldWZlbWlhIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2V1ZmVtaWEvZXVmZW1pYS9EOTRaUzlXRE5mcFk1VmJoc3R0UkJZVVhQTHRQIiwicHJldmlld1VybCI6ImV1ZmVtaWEtZ2l0LWZlYXQtaGVscC1wcm9wLWluLXZhbHVlLWNvbXBvbmVudC1ldWZlbWlhLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiZXVmZW1pYS1naXQtZmVhdC1oZWxwLXByb3AtaW4tdmFsdWUtY29tcG9uZW50LWV1ZmVtaWEudmVyY2VsLmFwcCJ9LCJyb290RGlyZWN0b3J5IjpudWxsfV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **eufemia** | ✅ Ready ([Inspect](https://vercel.com/eufemia/eufemia/D94ZS9WDNfpY5VbhsttRBYUXPLtP)) | [Visit Preview](https://eufemia-git-feat-help-prop-in-value-component-eufemia.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/eufemia-git-feat-help-prop-in-value-component-eufemia.vercel.app?via=pr-comment-feedback-link) | Mar 4, 2025 11:08am |


author_association: NONE
user: login: codesandbox-ci[bot]
created_at: 2025-02-25T08:24:37Z
body: This pull request is automatically built and testable in [CodeSandbox](https://codesandbox.io).

  To see build info of the built libraries, click [here](https://ci.codesandbox.io/status/dnbexperience/eufemia/pr/4607/builds/593631) or the icon next to each commit SHA.
author_association: NONE
user: login: langz
created_at: 2025-02-26T13:20:04Z
body: @tujoworker, do you see anything we are missing?
Some scenarios we've not thought of yet? Some tests or screenshot tests that's missing? 

Maybe we also could add `inheritHelp` as well? Or perhaps in a future PR?
Not sure how much work it's to do so, but I can definitely see a use case for that, instead of duplicating the same help messages in both `Field` and `Value`. 

EDIT: It seems to be some work done in regards to making it look nice in different `Value.SummaryList` layouts, like `grid`, `horizontal` and `vertical`(looks fine now). 
I've added screenshot tests for these scenarios, and they do not look good now 😅 

It should also support nesting a `help` in a Value inside a `Value.Composition`, like so:
```
            <Value.Composition
              label="Label with help inside SummaryList"
              help={{
                title: 'Hva betyr lånebeløp?',
                content: 'Dette er hvor mye du har tenkt å låne totalt.',
              }}
            >
              <Value.String value="value" />
              <Value.Number
                value={123}
                help={{
                  title: 'Hva betyr lånebeløp?',
                  content: 'Dette er hvor mye du har tenkt å låne totalt.',
                }}
              />
            </Value.Composition>
```

The above works for help when in a `Field`, hence I assume it should also work for `Value`, right?
author_association: CONTRIBUTOR
user: login: langz
created_at: 2025-03-02T11:12:29Z
body: Thanks for the great work, 
I'll take a look at it and give it a quick test tonight. 
author_association: CONTRIBUTOR
user: login: langz
created_at: 2025-03-02T20:14:31Z
body: > Thanks for the great work, I'll take a look at it and give it a quick test tonight.

I have nothing to complain about, looks good :)

author_association: CONTRIBUTOR
user: login: tujoworker
created_at: 2025-03-02T20:36:20Z
body: Let's have a chat about a11y about this PR before we merge. 
author_association: MEMBER
user: login: tujoworker
created_at: 2025-03-04T21:45:45Z
body: :tada: This PR is included in version 10.66.0 :tada:

The release is available on:
- [npm package (@latest dist-tag)](https://www.npmjs.com/package/@dnb/eufemia/v/10.66.0)
- [GitHub release](https://github.com/dnbexperience/eufemia/releases/tag/v10.66.0)

Your **[semantic-release](https://github.com/semantic-release/semantic-release)** bot :package::rocket:
author_association: MEMBER