diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
index e1e39e81465..c885cf0d3ca 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/eufemia/v10-info.md
@@ -139,6 +139,10 @@ When you convert from `<Modal />` to `<Dialog />` – follow these steps:
 
 1. In v10, InputMasked **allows leading zeros**. To prevent that behaviour, the property `allowLeadingZeroes` has changed to `disallowLeadingZeroes`.
 
+### [FormRow](/uilib/components/form-row)
+
+1. The FormRow properties `indent` and `indent_offset` were removed.
+
 ### Removal of `data-testid` in components
 
 - [InfoCard](/uilib/components/info-card).
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx
similarity index 51%
rename from packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
rename to packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx
index dd08f80ad73..59e782c1d03 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx
@@ -25,6 +25,7 @@ import {
   FormSet,
   FormRow,
 } from '@dnb/eufemia/src/components'
+import { Ingress } from '@dnb/eufemia/src/elements'
 
 const TestStyles = styled.div`
   /* make sure our input gets an explicit width, because of mac/linux rendering differences */
@@ -70,35 +71,17 @@ const Box = styled(Space)`
 export const FormRowVerticalAlignedLabels = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-vertical-label">
-      {
-        /* jsx */ `
-<FormRow
-    label={
-      <Ingress top="0" bottom="small">
-        Custom legend:
-      </Ingress>
-    }
-    label_direction="vertical"
->
-  <Input label="Label A:" value="Input A" right="small" />
-  <Input label="Label B:" value="Input B" />
-</FormRow>
-`
-      }
-    </ComponentBox>
-  </TestStyles>
-)
-
-export const FormRowLegendIndentUsage = () => (
-  <TestStyles>
-    <ComponentBox data-visual-test="form-row-default">
-      {
-        /* jsx */ `
-<FormRow indent="default" label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:">
-  <Checkbox id="alone-1" label="Checkbox" />
-</FormRow>
-`
-      }
+      <FormRow
+        label={
+          <Ingress top="0" bottom="small">
+            Custom legend:
+          </Ingress>
+        }
+        label_direction="vertical"
+      >
+        <Input label="Label A:" value="Input A" right="small" />
+        <Input label="Label B:" value="Input B" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -106,77 +89,53 @@ export const FormRowLegendIndentUsage = () => (
 export const FormRowSectionStyle = () => (
   <TestStyles>
     <ComponentBox>
-      {
-        /* jsx */ `
-<FormRow
-  section_style="mint-green"
-  section_spacing="default"
-  indent={true}
-  label="A long horizontal legend (FormLabel) with a lot of informative text and a default indent:"
->
-  <Checkbox label="Checkbox" />
-</FormRow>
-`
-      }
+      <FormRow
+        vertical
+        section_style="mint-green"
+        section_spacing
+        label="A long horizontal legend (FormLabel) with a lot of informative text:"
+      >
+        <Checkbox label="Checkbox" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
 
 export const FormRowCombineVerticalAndHorizontal = () => (
   <TestStyles>
-    <ComponentBox data-visual-test="form-row-combined" useRender>
-      {
-        /* jsx */ `
-// 1. In the nested FormRow we reset the layout to not be vertical
-// 2. So we can use a different direction ("label_direction")
-render(
-  <FormRow
-    label={
-      <Space element="span" className="dnb-h--large" top={false} bottom="large" no_collapse={true} >
-        Custom vertical legend:
-      </Space>
-    }
-    vertical
-  >
-    <Input label="Vertical input A" />
-    <Input label="Vertical input B" top="medium" />
-    <FormRow
-      vertical="false"
-      label_direction="horizontal"
-      top="medium"
-    >
-      <Input label="Horizontal input A" right="small" />
-      <Input label="Horizontal input B" />
-    </FormRow>
-    <Input label="Vertical input C" top="medium" />
-  </FormRow>
-)
-`
-      }
-    </ComponentBox>
-  </TestStyles>
-)
-
-export const FormRowCustomIndentLayout = () => (
-  <TestStyles>
-    <ComponentBox useRender>
-      {
-        /* jsx */ `
-const CustomRow = styled(FormRow)\`
-  align-items: flex-end;
-  > .dnb-form-label {
-    max-width: 12rem;
-    background: var(--color-white);
-    color: var(--color-fire-red);
-  }
-\`
-render(
-  <CustomRow label="A long horizontal legend (FormLabel) with a lot of informative text and a max-width of 12rem:">
-    <Checkbox label="Checkbox" />
-  </CustomRow>
-)
-`
-      }
+    <ComponentBox data-visual-test="form-row-combined">
+      {() => {
+        // 1. In the nested FormRow we reset the layout to not be vertical
+        // 2. So we can use a different direction ("label_direction")
+        return (
+          <FormRow
+            label={
+              <Space
+                element="span"
+                className="dnb-h--large"
+                top={false}
+                bottom="large"
+                no_collapse={true}
+              >
+                Custom vertical legend:
+              </Space>
+            }
+            vertical
+          >
+            <Input label="Vertical input A" />
+            <Input label="Vertical input B" top="medium" />
+            <FormRow
+              vertical="false"
+              label_direction="horizontal"
+              top="medium"
+            >
+              <Input label="Horizontal input A" right="small" />
+              <Input label="Horizontal input B" />
+            </FormRow>
+            <Input label="Vertical input C" top="medium" />
+          </FormRow>
+        )
+      }}
     </ComponentBox>
   </TestStyles>
 )
@@ -184,13 +143,12 @@ render(
 export const FormRowDefault = () => (
   <TestStyles>
     <ComponentBox>
-      {
-        /* jsx */ `
-<FormRow>
-  <Input label="Default horizontal FormRow:" placeholder="Input ..." />
-</FormRow>
-`
-      }
+      <FormRow>
+        <Input
+          label="Default horizontal FormRow:"
+          placeholder="Input ..."
+        />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -198,43 +156,51 @@ export const FormRowDefault = () => (
 export const FormRowVertical = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-vertical">
-      {
-        /* jsx */ `
-<FormRow direction="vertical" label="Label legend for the inputs:">
-  <Input label="Vertical direction:" placeholder="Input A ..." />
-  <Input label="Vertical direction:" placeholder="Input B ..." top="small" />
-</FormRow>
-`
-      }
+      <FormRow direction="vertical" label="Label legend for the inputs:">
+        <Input label="Vertical direction:" placeholder="Input A ..." />
+        <Input
+          label="Vertical direction:"
+          placeholder="Input B ..."
+          top="small"
+        />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
 
 export const FormRowVerticalDirection = () => (
   <TestStyles>
-    <ComponentBox
-      data-visual-test="form-row-vertical-label-button"
-      useRender
-    >
-      {
-        /* jsx */ `
-const CustomRow = styled(FormRow)\`
-  .dnb-form-row__content .dnb-button {
-    align-self: flex-end;
-    transform: translateY(0.25rem); /* 4px down */
-  }
-\`
-render(
-<CustomRow
-  label={ <Space element="span" className="dnb-h--large" top="0" bottom="0">Legend</Space> }
-  label_direction="vertical"
->
-  <Input label="Vertical input label" value="Input" right="small" />
-  <Button text="Button" />
-</CustomRow>
-)
-`
-      }
+    <ComponentBox data-visual-test="form-row-vertical-label-button">
+      {() => {
+        const CustomRow = styled(FormRow)`
+          .dnb-form-row__content .dnb-button {
+            align-self: flex-end;
+            transform: translateY(0.25rem); /* 4px down */
+          }
+        `
+        return (
+          <CustomRow
+            label={
+              <Space
+                element="span"
+                className="dnb-h--large"
+                top="0"
+                bottom="0"
+              >
+                Legend
+              </Space>
+            }
+            label_direction="vertical"
+          >
+            <Input
+              label="Vertical input label"
+              value="Input"
+              right="small"
+            />
+            <Button text="Button" />
+          </CustomRow>
+        )
+      }}
     </ComponentBox>
   </TestStyles>
 )
@@ -242,19 +208,13 @@ render(
 export const FormRowNoWrap = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-horizontal-no_wrap">
-      {
-        /* jsx */ `
-<FormRow
-  label="A long horizontal legend (FormLabel) with a lot of informative text:"
-  indent="true"
-  indent_offset="large"
-  direction="horizontal"
->
-  <Input label="Input label A:" right="small"  />
-  <Input label="Input label B:"  />
-</FormRow>
-`
-      }
+      <FormRow
+        label="A long horizontal legend (FormLabel) with a lot of informative text:"
+        direction="horizontal"
+      >
+        <Input label="Input label A:" right="small" />
+        <Input label="Input label B:" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -262,21 +222,15 @@ export const FormRowNoWrap = () => (
 export const FormRowWrap = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-horizontal-wrap">
-      {
-        /* jsx */ `
-<FormRow
-  label="Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:"
-  indent
-  indent_offset="x-large"
-  wrap
-  direction="horizontal"
->
-  <Input label="Input A:" top="small" right="small" />
-  <Input label="Input B:" top="small" right="small" />
-  <Input label="Input C:" top="small" right="small" />
-</FormRow>
-`
-      }
+      <FormRow
+        label="Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:"
+        direction="horizontal"
+        wrap
+      >
+        <Input label="Input A:" top="small" right="small" />
+        <Input label="Input B:" top="small" right="small" />
+        <Input label="Input C:" top="small" right="small" />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
@@ -284,19 +238,22 @@ export const FormRowWrap = () => (
 export const FormRowLegendUsage = () => (
   <TestStyles>
     <ComponentBox data-visual-test="form-row-legend">
-      {
-        /* jsx */ `
-<FormSet label_direction="vertical">
-  <FormRow label="Label legend for the inputs:" >
-    <Input label="Vertical label direction:" placeholder="Input A ..." right="small" />
-    <Input label="Vertical label direction:" placeholder="Input B ..." />
-  </FormRow>
-  <FormRow label="Checkbox legend:" top="medium">
-    <Checkbox label="Checkbox" />
-  </FormRow>
-</FormSet>
-`
-      }
+      <FormSet label_direction="vertical">
+        <FormRow label="Label legend for the inputs:">
+          <Input
+            label="Vertical label direction:"
+            placeholder="Input A ..."
+            right="small"
+          />
+          <Input
+            label="Vertical label direction:"
+            placeholder="Input B ..."
+          />
+        </FormRow>
+        <FormRow label="Checkbox legend:" top="medium">
+          <Checkbox label="Checkbox" />
+        </FormRow>
+      </FormSet>
     </ComponentBox>
   </TestStyles>
 )
@@ -304,180 +261,190 @@ export const FormRowLegendUsage = () => (
 export const FormRowInheritContext = () => (
   <TestStyles>
     <ComponentBox>
-      {
-        /* jsx */ `
-<FormRow vertical={true} disabled={true}>
-  <Input label="Vertical input A:" placeholder="Input A ..." />
-  <Input label="Vertical input B:" placeholder="Input B ..." top="medium" />
-</FormRow>
-`
-      }
+      <FormRow vertical={true} disabled={true}>
+        <Input label="Vertical input A:" placeholder="Input A ..." />
+        <Input
+          label="Vertical input B:"
+          placeholder="Input B ..."
+          top="medium"
+        />
+      </FormRow>
     </ComponentBox>
   </TestStyles>
 )
 
 export const FormRowDifferentDirections = () => (
   <TestStyles>
-    <ComponentBox useRender>
-      {
-        /* jsx */ `
-const PhoneRow = styled(FormRow)\`
-.dnb-dropdown__shell,
-.dnb-dropdown__list {
-  width: auto;
-  min-width: 6rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-dropdown {
-    margin-bottom: 0.5rem;
-  }
-\`
-render(
-<FormRow vertical={true}>
-  <Input
-    label="Input"
-    placeholder="Input ..."
-    bottom
-  />
-  <PhoneRow
-    label="Phone number"
-    label_direction="vertical"
-    vertical={false}
-  >
-    <Dropdown
-      right="small"
-      title="Country code"
-      data={['+47', '+48', '+49']}
-      value={0}
-    />
-    <Input placeholder="Your phone number" />
-  </PhoneRow>
-</FormRow>
-)
-`
-      }
+    <ComponentBox>
+      {() => {
+        const PhoneRow = styled(FormRow)`
+          .dnb-dropdown__shell,
+          .dnb-dropdown__list {
+            width: auto;
+            min-width: 6rem;
+          }
+          @media screen and (max-width: 40em) {
+            .dnb-dropdown {
+              margin-bottom: 0.5rem;
+            }
+          }
+        `
+        return (
+          <FormRow vertical={true}>
+            <Input label="Input" placeholder="Input ..." bottom />
+            <PhoneRow
+              label="Phone number"
+              label_direction="vertical"
+              vertical={false}
+            >
+              <Dropdown
+                right="small"
+                title="Country code"
+                data={['+47', '+48', '+49']}
+                value={0}
+              />
+              <Input placeholder="Your phone number" />
+            </PhoneRow>
+          </FormRow>
+        )
+      }}
     </ComponentBox>
   </TestStyles>
 )
 
-export default class FormRowVisualTests extends React.PureComponent {
-  render() {
-    if (!global.IS_TEST) {
-      return null
-    }
-    return (
-      <TestStyles>
-        <Global
-          styles={css`
-            #___gatsby {
-              display: flex;
-            }
-            .dnb-app-content {
-              overflow: visible;
-            }
-          `}
-        />
-        <ComponentBox
-          title="Horizontal direction"
-          scope={{ AllComponents }}
-          data-visual-test="form-row-all-horizontal-direction"
-        >
-          {
-            /* jsx */ `
+const VisualTestHorizontalDirection = () => (
+  <ComponentBox
+    scope={{ AllComponents }}
+    data-visual-test="form-row-all-horizontal-direction"
+  >
+    {
+      /* jsx */ `
 <FormRow
-  // label="Horizontal:"
-  // indent="true"
-  // indent_offset="large"
   direction="horizontal"
 >
   <AllComponents horizontal />
 </FormRow>
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="Vertical direction"
-          scope={{ AllComponents, WidthLimit }}
-          data-visual-test="form-row-all-vertical-direction"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestVerticalDirection = () => (
+  <ComponentBox
+    scope={{ AllComponents, WidthLimit }}
+    data-visual-test="form-row-all-vertical-direction"
+  >
+    {
+      /* jsx */ `
 <WidthLimit>
   <FormRow label="Vertical direction:" direction="vertical">
     <AllComponents />
   </FormRow>
 </WidthLimit>
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="Vertical everything"
-          scope={{ AllComponents, WidthLimit }}
-          data-visual-test="form-row-all-vertical-everything"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestVerticalEverything = () => (
+  <ComponentBox
+    scope={{ AllComponents, WidthLimit }}
+    data-visual-test="form-row-all-vertical-everything"
+  >
+    {
+      /* jsx */ `
 <WidthLimit>
   <FormRow label="Vertical everything:" vertical="true">
    <AllComponents />
   </FormRow>
 </WidthLimit>
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="Vertical label direction"
-          scope={{ AllComponents }}
-          data-visual-test="form-row-all-vertical-label-direction"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestLabelDirection = () => (
+  <ComponentBox
+    scope={{ AllComponents }}
+    data-visual-test="form-row-all-vertical-label-direction"
+  >
+    {
+      /* jsx */ `
 <FormRow label="Vertical label direction:" label_direction="vertical">
   <AllComponents horizontal />
 </FormRow>
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="Vertical label direction, no labels"
-          scope={{ AllComponents }}
-          data-visual-test="form-row-all-vertical-label-direction-no-label"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestVerticalLabelDirectionNoLabels = () => (
+  <ComponentBox
+    scope={{ AllComponents }}
+    data-visual-test="form-row-all-vertical-label-direction-no-label"
+  >
+    {
+      /* jsx */ `
 <FormRow label="Vertical label direction, no labels:" label_direction="vertical">
   <AllComponents horizontal hideLabel />
 </FormRow>
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="All form components which has the stretch property"
-          scope={{ AllStretchComponents }}
-          data-visual-test="form-row-all-stretch-components"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestAllStretch = () => (
+  <ComponentBox
+    scope={{ AllStretchComponents }}
+    data-visual-test="form-row-all-stretch-components"
+  >
+    {
+      /* jsx */ `
 <AllStretchComponents />
 `
-          }
-        </ComponentBox>
-        <ComponentBox
-          title="Horizontal centered"
-          data-visual-test="form-row-centered"
-        >
-          {
-            /* jsx */ `
+    }
+  </ComponentBox>
+)
+
+const VisualTestHorizontalCentered = () => (
+  <ComponentBox data-visual-test="form-row-centered">
+    {
+      /* jsx */ `
 <FormRow centered>
   <div className="box1" />
   <div className="box2" />
 </FormRow>
 `
-          }
-        </ComponentBox>
-      </TestStyles>
-    )
+    }
+  </ComponentBox>
+)
+
+export default function FormRowVisualTests() {
+  if (!global.IS_TEST) {
+    return null
   }
+  return (
+    <TestStyles>
+      <Global
+        styles={css`
+          #___gatsby {
+            display: flex;
+          }
+          .dnb-app-content {
+            overflow: visible;
+          }
+        `}
+      />
+      <VisualTestHorizontalDirection />
+      <VisualTestVerticalDirection />
+      <VisualTestVerticalEverything />
+      <VisualTestLabelDirection />
+      <VisualTestVerticalLabelDirectionNoLabels />
+      <VisualTestVerticalLabelDirectionNoLabels />
+      <VisualTestAllStretch />
+      <VisualTestHorizontalCentered />
+    </TestStyles>
+  )
 }
 
 export const AllComponents = ({
@@ -490,7 +457,7 @@ export const AllComponents = ({
     left: horizontal ? 'small' : null,
     top: !horizontal || vertical ? 'small' : null,
   }
-  let labels = {
+  let labels: Record<string, string> = {
     datePicker: 'DatePicker:',
     dropdown: 'Dropdown:',
     autocomplete: 'Autocomplete:',
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.md
index 24b33aa13c2..7661f147f60 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/demos.md
@@ -4,10 +4,8 @@ showTabs: true
 
 import FormRowVisualTests, {
 FormRowVerticalAlignedLabels,
-FormRowLegendIndentUsage,
 FormRowSectionStyle,
 FormRowCombineVerticalAndHorizontal,
-FormRowCustomIndentLayout,
 FormRowDefault,
 FormRowVertical,
 FormRowVerticalDirection,
@@ -56,10 +54,6 @@ Vertical label direction in combination with a button
 
 <FormRowLegendUsage />
 
-### Legend and indent usage
-
-<FormRowLegendIndentUsage />
-
 ### Inherit context
 
 <FormRowInheritContext />
@@ -74,10 +68,4 @@ The `label` property can be used to set a row label as well as the `section_styl
 
 <FormRowSectionStyle />
 
-### Custom indent layout
-
-Customize the `.dnb-form-row` styles. Instead of using the built in `indent` property.
-
-<FormRowCustomIndentLayout />
-
 <FormRowVisualTests />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/properties.md
index 7b0a7a12353..60aef9b3c37 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/properties.md
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/properties.md
@@ -4,23 +4,21 @@ showTabs: true
 
 ## Properties
 
-| Properties                                  | Description                                                                                                                                                                                                                                                                                                                                                                |
-| ------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label`                                     | _(optional)_ use either the `label` property or provide a custom one.                                                                                                                                                                                                                                                                                                        |
-| `label_direction`                           | _(optional)_ use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.                                                                                                                                                                                                                                                       |
-| `label_sr_only`                             | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                                                                                                                                                                 |
-| `direction`                                 | _(optional)_ to define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.                                                                                                                                                                                                             |
-| `vertical`                                  | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`.                                                                                                                                                                                                                                                                        |
-| `centered`                                  | _(optional)_ will center all children vertically as long as the screen does not hit a mobile width.                                                                                                                                                                                                                                                                            |
-| `indent`                                    | _(optional)_ indents the FormRow legend if the `direction` is `horizontal`. ~~Use `small`, `medium` and `large`~~. Defaults to `false`. If set to `true`, then `medium` is used.                                                                                                                                                                                           |
-| `indent_offset`                             | _(optional)_ in case the `direction` is `horizontal` and there is a label/legend, the content of the FormRow has to be moved up to be at the label/legend position. Depending on the components used inside, it has to be moved up based on the height. Sizes available: `xsmall`, `small`, `medium`, `m-large` (2.5rem), `x-large` and `xx-large` . Defaults to `medium`. |
-| `wrap`                                      | _(optional)_ forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.                                                                                                                                                                        |
-| `responsive`                                | _(optional)_ to force responsiveness on form components (like [Input](/uilib/components/input) and their labels ([FormLabel](/uilib/components/form-label)), set the prop to `true`. Defaults to `false`.                                                                                                                                                                  |
-| `section_style`                             | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to null.                                                                                                                                                                                              |
-| `section_spacing`                           | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to null.                                                                                                                                                                                                                       |
-| `no_fieldset`                               | _(optional)_ if set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` **is only used if a `label` is provided**. Defaults to `false`.                                                                                                                                   |
-| `label_class`                               | _(optional)_ if you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.                                                                                                                                                                                       |
-| `locale`                                    | _(optional)_ Send along a different locale to all nested components.                                                                                                                                                                                                                                                                                                       |
-| `disabled`                                  | _(optional)_ if set to `true`, every component inside will be disabled. Defaults to `false`.                                                                                                                                                                                                                                                                               |
-| `skeleton`                                  | _(optional)_ if set to `true`, it enables skeleton for nested components. Defaults to `false`.                                                                                                                                                                                                                                                                             |
-| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                                                                                                                                                      
\ No newline at end of file
+| Properties                                  | Description                                                                                                                                                                                                                              |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `label`                                     | _(optional)_ use either the `label` property or provide a custom one.                                                                                                                                                                    |
+| `label_direction`                           | _(optional)_ use `label_direction="vertical"` to change the label/legend layout direction. Defaults to `horizontal`.                                                                                                                     |
+| `label_sr_only`                             | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                               |
+| `direction`                                 | _(optional)_ to define the layout direction on how the next component should be placed on. Can be either `vertical` or `horizontal`. Defaults to `horizontal`.                                                                           |
+| `vertical`                                  | _(optional)_ will force both `direction` and `label_direction` to be **vertical** if set to `true`.                                                                                                                                      |
+| `centered`                                  | _(optional)_ will center all children vertically as long as the screen does not hit a mobile width.                                                                                                                                      |
+| `wrap`                                      | _(optional)_ forces the content of a FormRow to wrap. Make sure you always define spacing as `right="..."` and not `left`, this way components will align left once they wrap. Defaults to `false`.                                      |
+| `responsive`                                | _(optional)_ to force responsiveness on form components (like [Input](/uilib/components/input) and their labels ([FormLabel](/uilib/components/form-label)), set the prop to `true`. Defaults to `false`.                                |
+| `section_style`                             | _(optional)_ to enable the visual helper `.dnb-section` class. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to null.                                                            |
+| `section_spacing`                           | _(optional)_ to modify the `spacing`. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to null.                                                                                     |
+| `no_fieldset`                               | _(optional)_ if set to `true`, then the internal `legend` element will be a `label` instead, and no `<fieldset>` is used. Keep in mind, that `<legend>` and `<fieldset>` **is only used if a `label` is provided**. Defaults to `false`. |
+| `label_class`                               | _(optional)_ if you need to style the "legend", then you can either send in a custom Component, like `label={ <H2> }`, or define Your styling class with the `label_class` property.                                                     |
+| `locale`                                    | _(optional)_ Send along a different locale to all nested components.                                                                                                                                                                     |
+| `disabled`                                  | _(optional)_ if set to `true`, every component inside will be disabled. Defaults to `false`.                                                                                                                                             |
+| `skeleton`                                  | _(optional)_ if set to `true`, it enables skeleton for nested components. Defaults to `false`.                                                                                                                                           |
+| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                                                                                    |
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js
deleted file mode 100644
index 57b58bae1af..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * UI lib Component Example
- *
- */
-
-import React from 'react'
-import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
-
-export const FormSetDefault = () => (
-  <ComponentBox data-visual-test="form-set-default">
-    {
-      /* jsx */ `
-<FormSet indent="true">
-  <FormRow no_label>
-    <H2>A semantic h2 in a FormRow without a label</H2>
-  </FormRow>
-  <FormRow section_style="default" section_spacing label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:">
-    <Radio.Group
-      value="first"
-    >
-      <Radio label="First" value="first" />
-      <Radio label="Second" value="second" />
-      <Radio label="Third" value="third" />
-    </Radio.Group>
-  </FormRow>
-</FormSet>
-`
-    }
-  </ComponentBox>
-)
-
-export const FormSetVertical = () => (
-  <ComponentBox data-visual-test="form-set-vertical">
-    {
-      /* jsx */ `
-<FormSet direction="vertical">
-  <FormRow label={<Space element="span" className="dnb-h--large">Custom Legend:</Space>}>
-    <Input label="Label:" bottom />
-    <Input label="Label:" />
-  </FormRow>
-</FormSet>
-`
-    }
-  </ComponentBox>
-)
-
-export const FormSetSubmit = () => (
-  <ComponentBox data-visual-test="form-set-submit">
-    {
-      /* jsx */ `
-<FormSet
-    direction="horizontal"
-    on_submit={({ event }) => console.log('on_submit', event)}
-    prevent_submit={true}
-  >
-  <FormRow>
-    <Input label="Search Input:" type="search" value="Search text ..." right="small" />
-    <Button type="submit" text="Trigger submit" />
-  </FormRow>
-</FormSet>
-`
-    }
-  </ComponentBox>
-)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.tsx
new file mode 100644
index 00000000000..f3e636a4707
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-set/Examples.tsx
@@ -0,0 +1,74 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import {
+  FormSet,
+  FormRow,
+  Radio,
+  Space,
+  Input,
+  Button,
+} from '@dnb/eufemia/src/components'
+import { H2 } from '@dnb/eufemia/src/elements'
+
+export const FormSetDefault = () => (
+  <ComponentBox data-visual-test="form-set-default">
+    <FormSet vertical>
+      <FormRow no_label>
+        <H2>A semantic h2 in a FormRow without a label</H2>
+      </FormRow>
+      <FormRow
+        section_style="default"
+        section_spacing
+        label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
+      >
+        <Radio.Group value="first">
+          <Radio label="First" value="first" />
+          <Radio label="Second" value="second" />
+          <Radio label="Third" value="third" />
+        </Radio.Group>
+      </FormRow>
+    </FormSet>
+  </ComponentBox>
+)
+
+export const FormSetVertical = () => (
+  <ComponentBox data-visual-test="form-set-vertical">
+    <FormSet direction="vertical">
+      <FormRow
+        label={
+          <Space element="span" className="dnb-h--large">
+            Custom Legend:
+          </Space>
+        }
+      >
+        <Input label="Label:" bottom />
+        <Input label="Label:" />
+      </FormRow>
+    </FormSet>
+  </ComponentBox>
+)
+
+export const FormSetSubmit = () => (
+  <ComponentBox data-visual-test="form-set-submit">
+    <FormSet
+      direction="horizontal"
+      on_submit={({ event }) => console.log('on_submit', event)}
+      prevent_submit={true}
+    >
+      <FormRow>
+        <Input
+          label="Search Input:"
+          type="search"
+          value="Search text ..."
+          right="small"
+        />
+        <Button type="submit" text="Trigger submit" />
+      </FormRow>
+    </FormSet>
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
deleted file mode 100644
index ab3d865e649..00000000000
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
+++ /dev/null
@@ -1,391 +0,0 @@
-/**
- * UI lib Component Example
- *
- */
-
-import React from 'react'
-import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
-import InputPassword from '@dnb/eufemia/src/components/input/InputPassword'
-import styled from '@emotion/styled'
-
-const Wrapper = styled.div`
-  display: block;
-  width: 100%;
-
-  .dnb-input input {
-    min-width: 10rem;
-  }
-  .dnb-form-label + .dnb-input {
-    margin-top: 0;
-  }
-`
-
-export const InputExampleDefault = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-placeholder">
-      {
-        /* jsx */ `
-<Input
-  label="Label:"
-  placeholder="Placeholder text"
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleSearch = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-search">
-      {
-        /* jsx */ `
-<Input
-  label="Search:"
-  type="search"
-  placeholder="Search text placeholder"
-  on_change={({ value }) => {
-    console.log('on_change', value)
-  }}
-  on_submit={({ value }) => {
-    console.log('Submit:', value)
-  }}
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleMedium = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-medium">
-      {
-        /* jsx */ `
-<Input
-  size="medium"
-  type="search"
-  stretch={true}
-  value="Medium search value"
-  on_change={({ value }) => {
-    console.log('on_change', value)
-  }}
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleWithIcon = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-icon">
-      {
-        /* jsx */ `
-<Input
-  label="Input with icon:"
-  placeholder="Input"
-  label_direction="vertical"
-  icon="check"
-  bottom
-/>
-<Input
-  label="Input with icon:"
-  label_sr_only
-  placeholder="Input with a placeholder"
-  icon_position="right"
-  icon="check"
-  align="right"
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleDisabled = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-disabled">
-      {
-        /* jsx */ `
-<Input
-  disabled
-  label="Disabled input:"
-  placeholder="Disabled Input with a placeholder"
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleFormStatus = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-error">
-      {
-        /* jsx */ `
-<Input
-  label="With FormStatus:"
-  status="You have to fill in this field"
-  value="Input value with error"
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleSuffix = () => (
-  <Wrapper>
-    <ComponentBox>
-      {
-        /* jsx */ `
-<Input
-  label={<Space element="span" className="dnb-h--large">Fødselsnummer</Space>}
-  label_direction="vertical"
-  autocomplete="on"
-  placeholder="Placeholder text"
-  suffix={<HelpButton title="Info" trigger_size="large">Some content</HelpButton>}
-  on_change={({ value }) => {
-    console.log('on_change', value)
-  }}
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleStretched = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-stretch">
-      {
-        /* jsx */ `
-<FormRow
-  label="Long label labwl Adipiscing mauris dis proin nec:"
-  indent="true"
-  indent_offset="large"
-  wrap
->
-  <Input value="I stretch ..." stretch status="Status message" status_state="warn" />
-</FormRow>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleNumbers = () => (
-  <Wrapper>
-    <ComponentBox>
-      {
-        /* jsx */ `
-<Input
-  label="Label:"
-  autocomplete="on"
-  placeholder="Placeholder text"
-  status="Numbers are using DNB Mono (monospace)"
-  status_state="info"
-  value="1234567890"
-  on_change={({ value }) => {
-    console.log('on_change', value)
-    return String(value).toUpperCase()
-  }}
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleSubmit = () => (
-  <Wrapper>
-    <ComponentBox>
-      {
-        /* jsx */ `
-<FormSet
-  prevent_submit={true}
-  on_submit={(event) => {
-    console.log('FormRow.on_submit', event)
-  }}
->
-  <FormRow>
-    <Input
-      type="search"
-      label="Label:"
-      value="Input ..."
-      selectall="true"
-      on_submit={event => {
-        console.log('Input.on_submit', event)
-      }}
-      on_change={({ value }) => {
-        console.log('on_change:', value)
-      }}
-      onChange={({ value }) => {
-        console.log('onChange:', value)
-      }}
-      right="small"
-      bottom="x-small"
-    />
-    <Button text="Submit" type="submit" />
-  </FormRow>
-</FormSet>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExamplePassword = () => (
-  <Wrapper>
-    <ComponentBox
-      scope={{ InputPassword }}
-      data-visual-test="input-password"
-    >
-      {
-        /* jsx */ `
-<InputPassword
-  label="Label:"
-  placeholder="A placeholder text"
-  on_change={({ value }) => {
-    console.log('on_change:', value)
-  }}
-  on_show_password={() => {
-    console.log('on_show_password')
-  }}
-  on_hide_password={() => {
-    console.log('on_hide_password')
-  }}
-/>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputExampleClear = () => (
-  <Wrapper>
-    <ComponentBox data-visual-test="input-clear">
-      {
-        /* jsx */ `
-<FormRow direction="vertical">
-  <Input
-    clear={true}
-    value="Value ..."
-    size="medium"
-  />
-  <Input
-    clear={true}
-    value="Value ..."
-    type="search"
-    top
-  />
-  <Input
-    clear={true}
-    value="Value ..."
-    icon="loupe"
-    type="search"
-    top
-  />
-</FormRow>
-`
-      }
-    </ComponentBox>
-  </Wrapper>
-)
-
-export const InputScreenshotTests = () => {
-  if (!globalThis.IS_TEST) {
-    return null
-  }
-  return (
-    <Wrapper>
-      <ComponentBox data-visual-test="input-align">
-        {
-          /* jsx */ `
-<FormRow label="Left aligned" vertical>
-  <Input value="Plain" />
-  <Input value="Search" type="search" />
-  <Input value="Search" size="medium" type="search" />
-  <Input value="Search" size="large" type="search" />
-  <Input
-    value="Value Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
-    icon="calendar"
-  />
-  <Input
-    placeholder="Placeholder Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
-    icon_position="right"
-    icon="calendar"
-  />
-  <Input
-    size="medium"
-    value="Value"
-    icon="calendar"
-  />
-  <Input
-    size="medium"
-    placeholder="Placeholder"
-    icon_position="right"
-    icon="calendar"
-  />
-  <Input
-    size="large"
-    value="Value"
-    icon="calendar"
-  />
-  <Input
-    size="large"
-    placeholder="Placeholder"
-    icon_position="right"
-    icon="calendar"
-  />
-</FormRow>
-<FormRow label="Right aligned" vertical top>
-  <Input value="Plain" align="right" />
-  <Input value="Search" type="search" align="right" />
-  <Input value="Search" size="medium" type="search" align="right" />
-  <Input value="Search" size="large" type="search" align="right" />
-  <Input
-    value="Value Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
-    icon="calendar"
-    align="right"
-  />
-  <Input
-    placeholder="Placeholder Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
-    icon_position="right"
-    icon="calendar"
-    align="right"
-  />
-  <Input
-    size="medium"
-    value="Value"
-    icon="calendar"
-    align="right"
-  />
-  <Input
-    size="medium"
-    placeholder="Placeholder"
-    icon_position="right"
-    icon="calendar"
-    align="right"
-  />
-  <Input
-    size="large"
-    value="Value"
-    icon="calendar"
-    align="right"
-  />
-  <Input
-    size="large"
-    placeholder="Placeholder"
-    icon_position="right"
-    icon="calendar"
-    align="right"
-  />
-</FormRow>
-`
-        }
-      </ComponentBox>
-    </Wrapper>
-  )
-}
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx
new file mode 100644
index 00000000000..7c770e8ac76
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.tsx
@@ -0,0 +1,343 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import InputPassword from '@dnb/eufemia/src/components/input/InputPassword'
+import styled from '@emotion/styled'
+import {
+  FormSet,
+  FormRow,
+  HelpButton,
+  Space,
+  Input,
+  Button,
+} from '@dnb/eufemia/src/components'
+
+const Wrapper = styled.div`
+  display: block;
+  width: 100%;
+
+  .dnb-input input {
+    min-width: 10rem;
+  }
+  .dnb-form-label + .dnb-input {
+    margin-top: 0;
+  }
+`
+
+export const InputExampleDefault = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-placeholder">
+      <Input label="Label:" placeholder="Placeholder text" />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleSearch = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-search">
+      <Input
+        label="Search:"
+        type="search"
+        placeholder="Search text placeholder"
+        on_change={({ value }) => {
+          console.log('on_change', value)
+        }}
+        on_submit={({ value }) => {
+          console.log('Submit:', value)
+        }}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleMedium = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-medium">
+      <Input
+        size="medium"
+        type="search"
+        stretch={true}
+        value="Medium search value"
+        on_change={({ value }) => {
+          console.log('on_change', value)
+        }}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleWithIcon = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-icon">
+      <Input
+        label="Input with icon:"
+        placeholder="Input"
+        label_direction="vertical"
+        icon="check"
+        bottom
+      />
+      <Input
+        label="Input with icon:"
+        label_sr_only
+        placeholder="Input with a placeholder"
+        icon_position="right"
+        icon="check"
+        align="right"
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleDisabled = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-disabled">
+      <Input
+        disabled
+        label="Disabled input:"
+        placeholder="Disabled Input with a placeholder"
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleFormStatus = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-error">
+      <Input
+        label="With FormStatus:"
+        status="You have to fill in this field"
+        value="Input value with error"
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleSuffix = () => (
+  <Wrapper>
+    <ComponentBox>
+      <Input
+        label={
+          <Space element="span" className="dnb-h--large">
+            Fødselsnummer
+          </Space>
+        }
+        label_direction="vertical"
+        autocomplete="on"
+        placeholder="Placeholder text"
+        suffix={
+          <HelpButton title="Info" trigger_size="large">
+            Some content
+          </HelpButton>
+        }
+        on_change={({ value }) => {
+          console.log('on_change', value)
+        }}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleStretched = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-stretch">
+      <FormRow
+        label="Long label labwl Adipiscing mauris dis proin nec:"
+        vertical
+      >
+        <Input
+          value="I stretch ..."
+          stretch
+          status="Status message"
+          status_state="warn"
+        />
+      </FormRow>
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleNumbers = () => (
+  <Wrapper>
+    <ComponentBox>
+      <Input
+        label="Label:"
+        autocomplete="on"
+        placeholder="Placeholder text"
+        status="Numbers are using DNB Mono (monospace)"
+        status_state="info"
+        value="1234567890"
+        on_change={({ value }) => {
+          console.log('on_change', value)
+          return String(value).toUpperCase()
+        }}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleSubmit = () => (
+  <Wrapper>
+    <ComponentBox>
+      <FormSet
+        prevent_submit={true}
+        on_submit={(event) => {
+          console.log('FormRow.on_submit', event)
+        }}
+      >
+        <FormRow>
+          <Input
+            type="search"
+            label="Label:"
+            value="Input ..."
+            selectall="true"
+            on_submit={(event) => {
+              console.log('Input.on_submit', event)
+            }}
+            on_change={({ value }) => {
+              console.log('on_change:', value)
+            }}
+            onChange={({ value }) => {
+              console.log('onChange:', value)
+            }}
+            right="small"
+            bottom="x-small"
+          />
+          <Button text="Submit" type="submit" />
+        </FormRow>
+      </FormSet>
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExamplePassword = () => (
+  <Wrapper>
+    <ComponentBox
+      scope={{ InputPassword }}
+      data-visual-test="input-password"
+    >
+      <InputPassword
+        label="Label:"
+        placeholder="A placeholder text"
+        on_change={({ value }) => {
+          console.log('on_change:', value)
+        }}
+        on_show_password={() => {
+          console.log('on_show_password')
+        }}
+        on_hide_password={() => {
+          console.log('on_hide_password')
+        }}
+      />
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputExampleClear = () => (
+  <Wrapper>
+    <ComponentBox data-visual-test="input-clear">
+      <FormRow direction="vertical">
+        <Input clear={true} value="Value ..." size="medium" />
+        <Input clear={true} value="Value ..." type="search" top />
+        <Input
+          clear={true}
+          value="Value ..."
+          icon="loupe"
+          type="search"
+          top
+        />
+      </FormRow>
+    </ComponentBox>
+  </Wrapper>
+)
+
+export const InputScreenshotTests = () => {
+  if (!globalThis.IS_TEST) {
+    return null
+  }
+  return (
+    <Wrapper>
+      <ComponentBox data-visual-test="input-align">
+        <FormRow label="Left aligned" vertical>
+          <Input value="Plain" />
+          <Input value="Search" type="search" />
+          <Input value="Search" size="medium" type="search" />
+          <Input value="Search" size="large" type="search" />
+          <Input
+            value="Value Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
+            icon="calendar"
+          />
+          <Input
+            placeholder="Placeholder Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
+            icon_position="right"
+            icon="calendar"
+          />
+          <Input size="medium" value="Value" icon="calendar" />
+          <Input
+            size="medium"
+            placeholder="Placeholder"
+            icon_position="right"
+            icon="calendar"
+          />
+          <Input size="large" value="Value" icon="calendar" />
+          <Input
+            size="large"
+            placeholder="Placeholder"
+            icon_position="right"
+            icon="calendar"
+          />
+        </FormRow>
+        <FormRow label="Right aligned" vertical top>
+          <Input value="Plain" align="right" />
+          <Input value="Search" type="search" align="right" />
+          <Input
+            value="Search"
+            size="medium"
+            type="search"
+            align="right"
+          />
+          <Input value="Search" size="large" type="search" align="right" />
+          <Input
+            value="Value Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
+            icon="calendar"
+            align="right"
+          />
+          <Input
+            placeholder="Placeholder Eu pretium sit magnis suscipit cursus dis proin rutrum elementum"
+            icon_position="right"
+            icon="calendar"
+            align="right"
+          />
+          <Input
+            size="medium"
+            value="Value"
+            icon="calendar"
+            align="right"
+          />
+          <Input
+            size="medium"
+            placeholder="Placeholder"
+            icon_position="right"
+            icon="calendar"
+            align="right"
+          />
+          <Input
+            size="large"
+            value="Value"
+            icon="calendar"
+            align="right"
+          />
+          <Input
+            size="large"
+            placeholder="Placeholder"
+            icon_position="right"
+            icon="calendar"
+            align="right"
+          />
+        </FormRow>
+      </ComponentBox>
+    </Wrapper>
+  )
+}
diff --git a/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.js b/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.js
index 491025cb2be..a5eaab25796 100644
--- a/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.js
+++ b/packages/dnb-eufemia/src/components/checkbox/stories/Checkbox.stories.js
@@ -57,7 +57,7 @@ export const CheckboxSandbox = () => (
         </p>
       </Box>
       <Box>
-        <CustomRow indent>
+        <CustomRow>
           <FormLabel for_id="checkbox-2">
             Vertical FormLabel for a Checkbox component Sapien rhoncus
             sagittis pharetra ornare platea feugiat cras senectus viverra:
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
index 061e4dc4073..f631cb713f4 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -4755,9 +4755,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   order: 2;
   padding-left: 0.5rem;
 }
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label {
-  margin-top: 0;
-}
 :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio {
   vertical-align: top;
 }
diff --git a/packages/dnb-eufemia/src/components/form-row/FormRow.js b/packages/dnb-eufemia/src/components/form-row/FormRow.js
index 19eb3c7a2c1..3c359965301 100644
--- a/packages/dnb-eufemia/src/components/form-row/FormRow.js
+++ b/packages/dnb-eufemia/src/components/form-row/FormRow.js
@@ -37,12 +37,10 @@ export const formRowPropTypes = {
   no_label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   no_fieldset: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   locale: PropTypes.string,
-  indent: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   wrap: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
   vertical: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   centered: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  indent_offset: PropTypes.string,
   section_style: PropTypes.string,
   section_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   global_status_id: PropTypes.string,
@@ -73,12 +71,10 @@ export const formRowDefaultProps = {
   no_label: false,
   no_fieldset: null,
   locale: null,
-  indent: null,
   wrap: null,
   direction: null,
   vertical: null,
   centered: null,
-  indent_offset: null,
   section_style: null,
   section_spacing: null,
   global_status_id: null,
@@ -149,11 +145,9 @@ export default class FormRow extends React.PureComponent {
       no_fieldset,
       no_label,
       locale,
-      indent,
       direction,
       vertical,
       centered,
-      indent_offset,
       section_style,
       section_spacing,
       global_status_id,
@@ -196,13 +190,6 @@ export default class FormRow extends React.PureComponent {
           `dnb-form-row--${
             isTrue(vertical) ? 'vertical' : label_direction
           }-label`, // <-- has label
-        indent &&
-          !(
-            isNested &&
-            this.context.FormRow.hasLabel &&
-            this.context.FormRow.indent
-          ) &&
-          `dnb-form-row__indent--${isTrue(indent) ? 'default' : indent}`,
         centered && 'dnb-form-row--centered',
         isNested && 'dnb-form-row--nested',
         createSpacingClasses(props),
@@ -228,7 +215,6 @@ export default class FormRow extends React.PureComponent {
         },
         itsMeAgain: true,
         hasLabel,
-        indent,
         global_status_id,
         direction,
         vertical,
@@ -280,10 +266,7 @@ export default class FormRow extends React.PureComponent {
                 className={classnames(
                   'dnb-form-row__content',
                   isTrue(wrap) && 'dnb-form-row__content--wrap',
-                  label &&
-                    !isTrue(vertical) &&
-                    direction !== 'vertical' &&
-                    `dnb-form-row__content--${indent_offset || 'default'}`,
+                  label && !isTrue(vertical) && direction !== 'vertical',
                   responsive && 'dnb-responsive-component'
                 )}
               >
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.screenshot.test.ts b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.screenshot.test.ts
index 81a9654b13b..d9f503f7981 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.screenshot.test.ts
@@ -18,13 +18,6 @@ describe('FormRow', () => {
     url: '/uilib/components/form-row/demos',
   })
 
-  it('have to match default form-row', async () => {
-    const screenshot = await makeScreenshot({
-      selector: '[data-visual-test="form-row-default"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
   it('have to match vertical form-row label', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="form-row-vertical-label"]',
@@ -62,8 +55,8 @@ describe('FormRow', () => {
 
   it('have to match horizontal wrap', async () => {
     const screenshot = await makeScreenshot({
-      wrapperStyle: {
-        width: '80rem',
+      style: {
+        width: '50rem',
       },
       selector: '[data-visual-test="form-row-horizontal-wrap"]',
     })
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
index e8c72f5a25b..1634479557f 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
@@ -38,15 +38,6 @@ describe('FormRow component', () => {
     ).toBe(true)
   })
 
-  it('should have correct indent class', () => {
-    const Comp = mount(<Component {...props} indent="large" />)
-    expect(
-      Comp.find('.dnb-form-row')
-        .last()
-        .hasClass('dnb-form-row__indent--large')
-    ).toBe(true)
-  })
-
   it('should have an isolated state on nested FormRows', () => {
     const Comp = mount(
       <Component vertical>
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-default-form-row.snap.png b/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-default-form-row.snap.png
deleted file mode 100644
index 999a8f75af0..00000000000
Binary files a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-default-form-row.snap.png and /dev/null differ
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-form-row.snap.png b/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-form-row.snap.png
index a2ca09b2962..3b92302b452 100644
Binary files a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-form-row.snap.png and b/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-form-row.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-wrap.snap.png b/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-wrap.snap.png
index 9cb958df95f..9cd2694ff73 100644
Binary files a/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-wrap.snap.png and b/packages/dnb-eufemia/src/components/form-row/__tests__/__image_snapshots__/formrow-have-to-match-horizontal-wrap.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
index 91848910627..0c0254fb37b 100644
--- a/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
+++ b/packages/dnb-eufemia/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -9,8 +9,6 @@ exports[`FormRow component have to match snapshot 1`] = `
   disabled="disabled"
   global_status_id="main"
   id="form-row"
-  indent="indent"
-  indent_offset="indent_offset"
   label="label"
   label_class="label_class"
   label_direction="horizontal"
@@ -35,13 +33,13 @@ exports[`FormRow component have to match snapshot 1`] = `
       className="dnb-form-row__fieldset"
     >
       <Section
-        className="dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row__indent--indent dnb-form-row--centered"
+        className="dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row--centered"
         element="div"
         spacing="section_spacing"
         style_type="section_style"
       >
         <div
-          className="dnb-section dnb-section--section_style dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row__indent--indent dnb-form-row--centered dnb-section--spacing-section_spacing"
+          className="dnb-section dnb-section--section_style dnb-form-row dnb-form-row--horizontal dnb-form-row--horizontal-label className class dnb-form-row--centered dnb-section--spacing-section_spacing"
         >
           <AlignmentHelper
             className={null}
@@ -75,7 +73,7 @@ exports[`FormRow component have to match snapshot 1`] = `
             </legend>
           </FormLabel>
           <div
-            className="dnb-form-row__content dnb-form-row__content--indent_offset dnb-responsive-component"
+            className="dnb-form-row__content dnb-responsive-component"
           >
             children
           </div>
@@ -90,16 +88,7 @@ exports[`FormRow scss have to match default theme snapshot 1`] = `
 "/*
  * FormRow theme
  *
- */
-.dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label {
-  width: 30vw;
-  max-width: 20rem;
-}
-@media screen and (max-width: 40em) {
-  .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--default > .dnb-form-label, .dnb-form-row:not(.dnb-form-row--vertical).dnb-form-row__indent--medium > .dnb-form-label {
-    width: auto;
-  }
-}"
+ */"
 `;
 
 exports[`FormRow scss have to match snapshot 1`] = `
@@ -145,64 +134,6 @@ exports[`FormRow scss have to match snapshot 1`] = `
 .dnb-form-row:not(.dnb-form-row--vertical) > .dnb-form-row__content--wrap {
   display: block;
 }
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] {
-  display: grid;
-  grid-template-columns: [column1-start] var(--form-row-column1-start) [column1-end column2-start] var(--form-row-column2-start) [column2-end];
-  grid-template-rows: [row1-start] var(--form-row-row1-start) [row1-end row2-start] var(--form-row-row2-start) [row2-end];
-}
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content {
-  grid-column: column2-start/column2-end;
-  grid-row: row2-start/row2-end;
-}
-@media screen and (min-width: 40em) {
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--default {
-    margin-top: -1.5rem;
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--x-small {
-    margin-top: calc(-0.5rem + var(--form-bounding-height));
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--small {
-    margin-top: calc(-1rem + var(--form-bounding-height));
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--medium {
-    margin-top: calc(-1.5rem + var(--form-bounding-height));
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--large {
-    margin-top: calc(-2rem + var(--form-bounding-height));
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--m-large {
-    margin-top: -1.875rem;
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--x-large {
-    margin-top: calc(-3rem + var(--form-bounding-height));
-  }
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content--xx-large {
-    margin-top: calc(-3.5rem + var(--form-bounding-height));
-  }
-}
-@media screen and (max-width: 40em) {
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-row__content {
-    margin-top: 0.5rem !important;
-  }
-}
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-label {
-  grid-column: column1-start/column1-end;
-  grid-row: row1-start/row1-end;
-  margin-right: 1rem;
-}
-@media screen and (min-width: 40em) {
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] > .dnb-form-label {
-    text-align: right;
-  }
-}
-@media screen and (max-width: 40em) {
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] {
-    display: block;
-  }
-}
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-form-row__label-dummy {
-  margin-top: 0;
-}
 @media screen and (max-width: 40em) {
   .dnb-form-row:not(.dnb-form-row--vertical) {
     flex-direction: column;
diff --git a/packages/dnb-eufemia/src/components/form-row/stories/FormRow.stories.js b/packages/dnb-eufemia/src/components/form-row/stories/FormRow.stories.js
index 65cd2b3b421..8643c8afe92 100644
--- a/packages/dnb-eufemia/src/components/form-row/stories/FormRow.stories.js
+++ b/packages/dnb-eufemia/src/components/form-row/stories/FormRow.stories.js
@@ -14,7 +14,7 @@ import { H2, H3 } from '../../../elements'
 // } from 'dnb-design-system-portal/src/docs/uilib/components/form-row/Examples'
 
 // import Provider from '../../../shared/Provider'
-import { Checkbox, Radio, Input, FormLabel, FormRow } from '../../'
+import { Input, FormRow } from '../../'
 
 export default {
   title: 'Eufemia/Components/FormRow',
@@ -89,49 +89,6 @@ export const FormRowSandbox = () => (
         </FormRow>
       </Box>
 
-      <Box>
-        <FormRow direction="horizontal" indent="default">
-          <FormLabel for_id="alone-1">
-            A long horizontal FormLabel with a lot of informative text and
-            a default indent:
-          </FormLabel>
-          <Checkbox id="alone-1" label="Checkbox" />
-        </FormRow>
-      </Box>
-
-      <Box>
-        <FormRow
-          direction="horizontal"
-          indent
-          section_style="mint-green"
-          section_spacing="large"
-        >
-          <FormLabel for_id="alone-2">
-            A long horizontal FormLabel with a lot of informative text and
-            a default indent:
-          </FormLabel>
-          <Radio.Group
-            id="alone-2"
-            // label="Group:"
-            // label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
-            on_change={({ value }) => {
-              console.log('on_change', value)
-            }}
-            value="first"
-            // disabled
-            // name="MyGroup" // The Group Name
-          >
-            <Radio label="First" value="first" />
-            <Radio label="Second" value="second" />
-            <Radio
-              label="Third"
-              value="third"
-              // checked
-            />
-          </Radio.Group>
-        </FormRow>
-      </Box>
-
       <Box>
         <H2 bottom="large">Combine vertical and horizontal</H2>
         <FormRow
@@ -149,8 +106,6 @@ export const FormRowSandbox = () => (
           <FormRow
             // label="Horizontal legend:"
             // direction="horizontal"
-            // indent
-            // indent_offset="medium"
 
             vertical="false"
             label_direction="horizontal"
diff --git a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
index 013f4ddefd6..1e07558f46e 100644
--- a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
+++ b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss
@@ -48,78 +48,6 @@
       // justify-self: start;
     }
 
-    &[class*='__indent'] {
-      display: grid;
-      grid-template-columns:
-        [column1-start] var(--form-row-column1-start)
-        [column1-end column2-start] var(--form-row-column2-start)
-        [column2-end];
-      grid-template-rows:
-        [row1-start] var(--form-row-row1-start)
-        [row1-end row2-start] var(--form-row-row2-start)
-        [row2-end];
-
-      & > .dnb-form-row__content {
-        grid-column: column2-start / column2-end;
-        grid-row: row2-start / row2-end;
-
-        // if not mobile
-        @include allAbove(small) {
-          &--default {
-            margin-top: -1.5rem;
-          }
-          &--x-small {
-            margin-top: calc(-0.5rem + var(--form-bounding-height));
-          }
-          &--small {
-            margin-top: calc(-1rem + var(--form-bounding-height));
-          }
-          &--medium {
-            margin-top: calc(-1.5rem + var(--form-bounding-height));
-          }
-          &--large {
-            margin-top: calc(-2rem + var(--form-bounding-height));
-          }
-          &--m-large {
-            margin-top: calc(-2.5rem + 0.625rem);
-          }
-          &--x-large {
-            margin-top: calc(-3rem + var(--form-bounding-height));
-          }
-          &--xx-large {
-            margin-top: calc(-3.5rem + var(--form-bounding-height));
-          }
-        }
-
-        // if mobile
-        @media screen and (max-width: 40em) {
-          // use important, sice we want to overwrite the inline style "marginTop" set by "setLabelOffset"
-          margin-top: 0.5rem !important;
-        }
-      }
-
-      & > .dnb-form-label {
-        // put the label in the first column
-        grid-column: column1-start / column1-end;
-        grid-row: row1-start / row1-end;
-
-        margin-right: 1rem;
-
-        @include allAbove(small) {
-          text-align: right;
-        }
-      }
-
-      // overwrite display to be block on small screens
-      @media screen and (max-width: 40em) {
-        display: block;
-      }
-
-      .dnb-form-row__label-dummy {
-        margin-top: 0;
-      }
-    }
-
     @media screen and (max-width: 40em) {
       flex-direction: column;
       align-items: flex-start;
diff --git a/packages/dnb-eufemia/src/components/form-row/style/themes/dnb-form-row-theme-ui.scss b/packages/dnb-eufemia/src/components/form-row/style/themes/dnb-form-row-theme-ui.scss
index c065cc6f7ef..de4a4a12118 100644
--- a/packages/dnb-eufemia/src/components/form-row/style/themes/dnb-form-row-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/form-row/style/themes/dnb-form-row-theme-ui.scss
@@ -2,35 +2,3 @@
  * FormRow theme
  *
  */
-
-.dnb-form-row {
-  // TODO: indent has to be defined
-  // the width of label
-  &:not(#{&}--vertical)#{&}__indent {
-    // &--small {
-    //   > .dnb-form-label {
-    //     width: 10rem;
-    //   }
-    // }
-    &--default,
-    &--medium {
-      > .dnb-form-label {
-        // because the browser screen is different
-        width: 30vw; // 30vw is very close to 20rem if the wrapper is 60rem
-        max-width: 20rem;
-
-        // a fixed with is not the best solution
-        // width: 20rem;
-
-        @media screen and (max-width: 40em) {
-          width: auto;
-        }
-      }
-    }
-    // &--large {
-    //   > .dnb-form-label {
-    //     width: 30rem;
-    //   }
-    // }
-  }
-}
diff --git a/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js b/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
index 6f6b4c58099..5cb3c4fce8f 100644
--- a/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
+++ b/packages/dnb-eufemia/src/components/form-set/__tests__/FormSet.test.js
@@ -77,19 +77,6 @@ describe('FormSet component', () => {
     ).toBe(false)
   })
 
-  it('should have working provider have correct indent classes on form-row', () => {
-    const Comp = mount(
-      <Component {...props} indent="large">
-        <FormRow />
-      </Component>
-    )
-    expect(
-      Comp.find('.dnb-form-row')
-        .last()
-        .hasClass('dnb-form-row__indent--large')
-    ).toBe(true)
-  })
-
   it('should support locale context forwarding', () => {
     const Comp = mount(
       <Component>
diff --git a/packages/dnb-eufemia/src/components/form-set/__tests__/__image_snapshots__/formset-have-to-match-default-form-set.snap.png b/packages/dnb-eufemia/src/components/form-set/__tests__/__image_snapshots__/formset-have-to-match-default-form-set.snap.png
index df62d7964e2..0d0ff09f754 100644
Binary files a/packages/dnb-eufemia/src/components/form-set/__tests__/__image_snapshots__/formset-have-to-match-default-form-set.snap.png and b/packages/dnb-eufemia/src/components/form-set/__tests__/__image_snapshots__/formset-have-to-match-default-form-set.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/form-set/stories/FormSet.stories.js b/packages/dnb-eufemia/src/components/form-set/stories/FormSet.stories.js
index 2f4fb112a10..42092fe62e5 100644
--- a/packages/dnb-eufemia/src/components/form-set/stories/FormSet.stories.js
+++ b/packages/dnb-eufemia/src/components/form-set/stories/FormSet.stories.js
@@ -39,12 +39,8 @@ export const FormSetSandbox = () => {
         <ToggleButton on_change={() => setDisabled((s) => !s)}>
           ToggleButton
         </ToggleButton>
-        <Provider FormRow={{ indent: true, vertical: false }}>
-          <FormSet
-            disabled={disabled}
-            skeleton={disabled}
-            // indent="true" vertical="false"
-          >
+        <Provider FormRow={{ vertical: false }}>
+          <FormSet disabled={disabled} skeleton={disabled}>
             <Box>
               <FormRow no_label>
                 <H2>A h2 in a FormRow without a label</H2>
@@ -59,14 +55,13 @@ export const FormSetSandbox = () => {
               <FormRow
                 // disabled={disabled}
                 label="Button:"
-                indent_offset="m-large"
               >
                 <Button text="Button" />
               </FormRow>
             </Box>
             <Box>
               <Provider FormRow={{ vertical: true }}>
-                <FormRow label="Input:" indent_offset="large">
+                <FormRow label="Input:">
                   <Input value="Value" />
                 </FormRow>
               </Provider>
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-have-to-match-stretched-input-with-status.snap.png b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-have-to-match-stretched-input-with-status.snap.png
index 0bf8548733d..70cce022033 100644
Binary files a/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-have-to-match-stretched-input-with-status.snap.png and b/packages/dnb-eufemia/src/components/input/__tests__/__image_snapshots__/input-have-to-match-stretched-input-with-status.snap.png differ
diff --git a/packages/dnb-eufemia/src/components/input/stories/Input.stories.js b/packages/dnb-eufemia/src/components/input/stories/Input.stories.js
index 8707e6ebe34..99a2d626982 100644
--- a/packages/dnb-eufemia/src/components/input/stories/Input.stories.js
+++ b/packages/dnb-eufemia/src/components/input/stories/Input.stories.js
@@ -117,8 +117,6 @@ export const InputSandbox = () => {
         <Box>
           <FormSet>
             <FormRow
-              indent
-              indent_offset="x-large"
               wrap
               label="Long label labwl Adipiscing mauris dis proin nec Condimentum egestas class blandit netus non a suscipit id urna:"
             >
diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
index ec984e0e6d0..7434e2f58c9 100644
--- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -245,8 +245,6 @@ exports[`Radio group component have to match group snapshot 1`] = `
       disabled={null}
       global_status_id={null}
       id="group"
-      indent={null}
-      indent_offset={null}
       label="Label"
       label_class={null}
       label_direction={null}
@@ -311,7 +309,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
                 </label>
               </FormLabel>
               <div
-                className="dnb-form-row__content dnb-form-row__content--default"
+                className="dnb-form-row__content"
               >
                 <span
                   aria-labelledby="group-label"
@@ -982,9 +980,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   order: 2;
   padding-left: 0.5rem;
 }
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label {
-  margin-top: 0;
-}
 :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio {
   vertical-align: top;
 }
diff --git a/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.js b/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.js
index b7225d0b22b..ac441cc5612 100644
--- a/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.js
+++ b/packages/dnb-eufemia/src/components/radio/stories/Radio.stories.js
@@ -114,13 +114,10 @@ export const RadioButtonSandbox = () => (
       </p>
     </Box>
     <Box>
-      <FormRow indent no_label>
+      <FormRow no_label>
         <H2>A h2 in a FormRow without a label</H2>
       </FormRow>
-      <FormRow
-        indent
-        label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
-      >
+      <FormRow label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:">
         <Radio.Group
           // label="Group:"
           // label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
@@ -143,10 +140,7 @@ export const RadioButtonSandbox = () => (
       </FormRow>
     </Box>
     <Box>
-      <FormRow
-        indent
-        label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
-      >
+      <FormRow label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:">
         <Radio.Group
           // direction="vertical"
           label="Group label:"
diff --git a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
index fdf331d4afb..70a3c0abdfc 100644
--- a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
+++ b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
@@ -165,12 +165,6 @@
     }
   }
 
-  .dnb-form-row:not(.dnb-form-row--vertical)[class*='__indent']
-    &
-    .dnb-form-label {
-    margin-top: 0;
-  }
-
   // in case we don't define a wrapping group
   // and have a custom label component before the radio (and not inside)
   :not(#{&}-group) > .dnb-form-label + & {
diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
index 6563e033300..6c94283735b 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -513,8 +513,6 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
       disabled={null}
       global_status_id={null}
       id="group"
-      indent={null}
-      indent_offset={null}
       label="Label"
       label_class={null}
       label_direction={null}
@@ -578,7 +576,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
                 </legend>
               </FormLabel>
               <div
-                className="dnb-form-row__content dnb-form-row__content--default"
+                className="dnb-form-row__content"
               >
                 <span
                   aria-labelledby="group-label"
@@ -2755,9 +2753,6 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   order: 2;
   padding-left: 0.5rem;
 }
-.dnb-form-row:not(.dnb-form-row--vertical)[class*=__indent] .dnb-radio .dnb-form-label {
-  margin-top: 0;
-}
 :not(.dnb-radio-group) > .dnb-form-label + .dnb-radio {
   vertical-align: top;
 }
diff --git a/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.js b/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.js
index 01e57484628..2f954029127 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.js
+++ b/packages/dnb-eufemia/src/components/toggle-button/stories/ToggleButton.stories.js
@@ -127,11 +127,7 @@ export const ToggleButtonSandbox = () => (
       </Provider>
     </Box>
     <Box>
-      <FormRow
-        indent
-        label="Horizontal Legend Aptent maecenas non pharetra libero massa auctor pretium vulputate vivamus:"
-        indent_offset="m-large"
-      >
+      <FormRow label="Horizontal Legend Aptent maecenas non pharetra libero massa auctor pretium vulputate vivamus:">
         <ToggleButton.Group label="Group A label:">
           <ToggleButton text="First" value="first" />
           <ToggleButton text="Second" value="second" />
@@ -228,14 +224,10 @@ export const ToggleButtonSandbox = () => (
       </p>
     </Box>
     <Box>
-      <FormRow indent no_label>
+      <FormRow no_label>
         <H2>A h2 in a FormRow without a label</H2>
       </FormRow>
-      <FormRow
-        indent
-        indent_offset="m-large"
-        label="Long Group name with on_change dapibus eros viverra torquent euismod at dignissim vel mattis:"
-      >
+      <FormRow label="Long Group name with on_change dapibus eros viverra torquent euismod at dignissim vel mattis:">
         <ToggleButton.Group
           // label="Group:"
           // label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
@@ -259,11 +251,7 @@ export const ToggleButtonSandbox = () => (
       </FormRow>
     </Box>
     <Box>
-      <FormRow
-        indent
-        indent_offset="m-large"
-        label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:"
-      >
+      <FormRow label="Long Group name Vitae dapibus eros viverra torquent euismod at dignissim vel mattis:">
         <ToggleButton.Group
           on_change={({ value }) => {
             console.log('on_change', value)