diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-properties.md
index 79a316ba1f8..1c42934a168 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-properties.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked/input-masked-properties.md
@@ -2,7 +2,7 @@
 draft: true
 ---
 
-For more details, se the [Input](/uilib/components/input) component.
+For more details and **properties**, se the [Input](/uilib/components/input) component.
 
 | Properties  | Description                                                                                                                                                                                                                     |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
index 7e872067d4c..9f5e7145ce4 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/Examples.js
@@ -116,6 +116,16 @@ class Example extends PureComponent {
 />
           `}
         </ComponentBox>
+        <ComponentBox caption="Stretched `Input` with `FormRow` and a long label">
+          {/* @jsx */ `
+<FormRow
+  size={true}
+  label="Long label labwl Adipiscing mauris dis proin nec:"
+>
+  <Input value="Placeholder ..." stretch />
+</FormRow>
+          `}
+        </ComponentBox>
         <ComponentBox caption="Numbers are ligned by using Proportional Lining">
           {/* @jsx */ `
 <Input
@@ -143,6 +153,7 @@ class Example extends PureComponent {
   <Input
     label="Label:"
     value="Input ..."
+    selectall="true"
     on_submit={event => {
       console.log('on_submit')
     }}
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md
index 2866940fda1..0524558bb22 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/input/input-properties.md
@@ -7,6 +7,7 @@ draft: true
 | `value`               | _(optional)_ the content value of the input.                                                                                                                                                  |
 | `align`               | _(optional)_ defines the `text-align` of the input. Defaults to `left`.                                                                                                                       |
 | `label`               | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created.                                                                                                 |
+| `label_direction`     | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`                                                                                  |
 | `status`              | _(optional)_ text with a status message. The style defaults to an error message.                                                                                                              |
 | `status_state`        | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`.                                                                          |
 | `placeholder`         | _(optional)_ the placeholder which shows up once the input value is empty                                                                                                                     |
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
index eb0491c1826..fa708318369 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
@@ -15,6 +15,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
   hide_navigation_buttons={false}
   id="date-picker-id"
   label={null}
+  label_direction={null}
   link={false}
   locale={
     Object {
@@ -69,598 +70,568 @@ exports[`DatePicker component have to match snapshot 1`] = `
   sync={true}
 >
   <span
-    className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker__status--error dnb-date-picker--show-footer"
-    date="2019-01-01T00:00:00.000Z"
+    className="dnb-date-picker__wrapper dnb-date-picker__wrapper__status--error"
   >
     <span
-      className="dnb-date-picker__shell"
+      className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker__status--error dnb-date-picker--show-footer"
+      date="2019-01-01T00:00:00.000Z"
     >
-      <DatePickerInput
-        aria-expanded={false}
-        disabled={false}
-        endDate={2019-02-15T00:00:00.000Z}
-        id="date-picker-id"
-        maskOrder="dd/mm/yyyy"
-        maskPlaceholder="dd/mm/åååå"
-        maxDate={null}
-        minDate={null}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onSubmit={[Function]}
-        onSubmitButtonFocus={[Function]}
-        opened={false}
-        range={true}
-        separatorRexExp={/\\[-\\\\/ \\]/g}
-        showInput={true}
-        startDate={2019-01-01T00:00:00.000Z}
-        status="error"
-        status_animation={null}
-        status_state="error"
+      <span
+        className="dnb-date-picker__shell"
       >
-        <Input
-          align={null}
-          attributes={null}
-          autocomplete="off"
-          class={null}
-          className={null}
-          custom_element={null}
-          custom_method={null}
-          description={null}
+        <DatePickerInput
+          aria-expanded={false}
           disabled={false}
-          id="date-picker-id__input"
-          inputElement={[Function]}
-          input_class={null}
-          input_state="virgin"
-          label={null}
-          on_blur={null}
-          on_change={null}
-          on_focus={null}
-          on_submit={null}
-          on_submit_blur={null}
-          on_submit_focus={null}
-          placeholder={null}
-          readOnly={false}
-          selectall={null}
-          size={null}
+          endDate={2019-02-15T00:00:00.000Z}
+          id="date-picker-id"
+          maskOrder="dd/mm/yyyy"
+          maskPlaceholder="dd/mm/åååå"
+          maxDate={null}
+          minDate={null}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onSubmit={[Function]}
+          onSubmitButtonFocus={[Function]}
+          opened={false}
+          range={true}
+          separatorRexExp={/\\[-\\\\/ \\]/g}
+          showInput={true}
+          startDate={2019-01-01T00:00:00.000Z}
           status="error"
           status_animation={null}
           status_state="error"
-          stretch={null}
-          submitButton={
-            <SubmitButton
-              aria-expanded={false}
-              disabled={false}
-              icon="calendar"
-              icon_size={null}
-              id="date-picker-id"
-              onKeyUp={[Function]}
-              on_submit={[Function]}
-              on_submit_blur={null}
-              on_submit_focus={null}
-              title={null}
-              type="button"
-              value={null}
-              variant="secondary"
-            />
-          }
-          submit_button_icon="search"
-          submit_button_title={null}
-          submit_button_variant="secondary"
-          type="text"
-          value={null}
         >
-          <span
-            className="dnb-input dnb-input--text dnb-input--has-submit-button dnb-input__status--error"
+          <Input
+            align={null}
+            attributes={null}
+            autocomplete="off"
+            class={null}
+            className={null}
+            custom_element={null}
+            custom_method={null}
+            description={null}
+            disabled={false}
+            id="date-picker-id__input"
+            inputElement={[Function]}
+            input_class={null}
+            input_state="virgin"
+            label={null}
+            label_direction={null}
+            on_blur={null}
+            on_change={null}
+            on_focus={null}
+            on_submit={null}
+            on_submit_blur={null}
+            on_submit_focus={null}
+            placeholder={null}
+            readOnly={false}
+            selectall={null}
+            size={null}
+            status="error"
+            status_animation={null}
+            status_state="error"
+            stretch={null}
+            submitButton={
+              <SubmitButton
+                aria-expanded={false}
+                disabled={false}
+                icon="calendar"
+                icon_size={null}
+                id="date-picker-id"
+                onKeyUp={[Function]}
+                on_submit={[Function]}
+                on_submit_blur={null}
+                on_submit_focus={null}
+                title={null}
+                type="button"
+                value={null}
+                variant="secondary"
+              />
+            }
+            submit_button_icon="search"
+            submit_button_title={null}
+            submit_button_variant="secondary"
+            type="text"
+            value={null}
           >
             <span
-              className="dnb-input__shell"
-              data-has-content="false"
-              data-input-state="virgin"
+              className="dnb-input__wrapper dnb-input__status--error"
             >
               <span
-                className="dnb-date-picker__input__wrapper"
+                className="dnb-input dnb-input--text dnb-input--has-submit-button"
               >
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                  id="date-picker-id-start-day"
-                  key="d0"
-                  mask={
-                    Array [
-                      /\\[0-3\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="d"
-                  size="2"
-                  type="text"
-                  value="01"
+                <span
+                  className="dnb-input__shell"
+                  data-has-content="false"
+                  data-input-state="virgin"
                 >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                    guide={true}
-                    id="date-picker-id-start-day"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[0-3\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="d"
-                    render={[Function]}
-                    showMask={true}
-                    size="2"
-                    type="text"
-                    value="01"
+                  <span
+                    className="dnb-date-picker__input__wrapper"
                   >
-                    <input
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                      defaultValue="01"
                       id="date-picker-id-start-day"
+                      key="d0"
+                      mask={
+                        Array [
+                          /\\[0-3\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="d"
                       size="2"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-                <span
-                  aria-hidden={true}
-                  className="dnb-date-picker--separator"
-                  key="s1"
-                >
-                  /
-                </span>
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                  id="date-picker-id-start-month"
-                  key="m2"
-                  mask={
-                    Array [
-                      /\\[0-1\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="m"
-                  size="2"
-                  type="text"
-                  value="01"
-                >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                    guide={true}
-                    id="date-picker-id-start-month"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[0-1\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="m"
-                    render={[Function]}
-                    showMask={true}
-                    size="2"
-                    type="text"
-                    value="01"
-                  >
-                    <input
+                      value="01"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
+                        guide={true}
+                        id="date-picker-id-start-day"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[0-3\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="d"
+                        render={[Function]}
+                        showMask={true}
+                        size="2"
+                        type="text"
+                        value="01"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
+                          defaultValue="01"
+                          id="date-picker-id-start-day"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="2"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                    <span
+                      aria-hidden={true}
+                      className="dnb-date-picker--separator"
+                      key="s1"
+                    >
+                      /
+                    </span>
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                      defaultValue="01"
                       id="date-picker-id-start-month"
+                      key="m2"
+                      mask={
+                        Array [
+                          /\\[0-1\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="m"
                       size="2"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-                <span
-                  aria-hidden={true}
-                  className="dnb-date-picker--separator"
-                  key="s3"
-                >
-                  /
-                </span>
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                  id="date-picker-id-start-year"
-                  key="y4"
-                  mask={
-                    Array [
-                      /\\[1-2\\]/,
-                      /\\[0-9\\]/,
-                      /\\[0-9\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="å"
-                  size="4"
-                  type="text"
-                  value="2019"
-                >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                    guide={true}
-                    id="date-picker-id-start-year"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[1-2\\]/,
-                        /\\[0-9\\]/,
-                        /\\[0-9\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="å"
-                    render={[Function]}
-                    showMask={true}
-                    size="4"
-                    type="text"
-                    value="2019"
-                  >
-                    <input
+                      value="01"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
+                        guide={true}
+                        id="date-picker-id-start-month"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[0-1\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="m"
+                        render={[Function]}
+                        showMask={true}
+                        size="2"
+                        type="text"
+                        value="01"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
+                          defaultValue="01"
+                          id="date-picker-id-start-month"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="2"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                    <span
+                      aria-hidden={true}
+                      className="dnb-date-picker--separator"
+                      key="s3"
+                    >
+                      /
+                    </span>
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                      defaultValue="2019"
                       id="date-picker-id-start-year"
+                      key="y4"
+                      mask={
+                        Array [
+                          /\\[1-2\\]/,
+                          /\\[0-9\\]/,
+                          /\\[0-9\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="å"
                       size="4"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-                <span
-                  aria-hidden={true}
-                  className="dnb-date-picker--separator"
-                >
-                   – 
-                </span>
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                  id="date-picker-id-end-day"
-                  key="d0"
-                  mask={
-                    Array [
-                      /\\[0-3\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="d"
-                  size="2"
-                  type="text"
-                  value="15"
-                >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                    guide={true}
-                    id="date-picker-id-end-day"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[0-3\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="d"
-                    render={[Function]}
-                    showMask={true}
-                    size="2"
-                    type="text"
-                    value="15"
-                  >
-                    <input
+                      value="2019"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
+                        guide={true}
+                        id="date-picker-id-start-year"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[1-2\\]/,
+                            /\\[0-9\\]/,
+                            /\\[0-9\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="å"
+                        render={[Function]}
+                        showMask={true}
+                        size="4"
+                        type="text"
+                        value="2019"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
+                          defaultValue="2019"
+                          id="date-picker-id-start-year"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="4"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                    <span
+                      aria-hidden={true}
+                      className="dnb-date-picker--separator"
+                    >
+                       – 
+                    </span>
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
-                      defaultValue="15"
                       id="date-picker-id-end-day"
+                      key="d0"
+                      mask={
+                        Array [
+                          /\\[0-3\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="d"
                       size="2"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-                <span
-                  aria-hidden={true}
-                  className="dnb-date-picker--separator"
-                  key="s1"
-                >
-                  /
-                </span>
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                  id="date-picker-id-end-month"
-                  key="m2"
-                  mask={
-                    Array [
-                      /\\[0-1\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="m"
-                  size="2"
-                  type="text"
-                  value="02"
-                >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                    guide={true}
-                    id="date-picker-id-end-month"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[0-1\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="m"
-                    render={[Function]}
-                    showMask={true}
-                    size="2"
-                    type="text"
-                    value="02"
-                  >
-                    <input
+                      value="15"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
+                        guide={true}
+                        id="date-picker-id-end-day"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[0-3\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="d"
+                        render={[Function]}
+                        showMask={true}
+                        size="2"
+                        type="text"
+                        value="15"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--day"
+                          defaultValue="15"
+                          id="date-picker-id-end-day"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="2"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                    <span
+                      aria-hidden={true}
+                      className="dnb-date-picker--separator"
+                      key="s1"
+                    >
+                      /
+                    </span>
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
-                      defaultValue="02"
                       id="date-picker-id-end-month"
+                      key="m2"
+                      mask={
+                        Array [
+                          /\\[0-1\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="m"
                       size="2"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-                <span
-                  aria-hidden={true}
-                  className="dnb-date-picker--separator"
-                  key="s3"
-                >
-                  /
-                </span>
-                <ForwardRef
-                  aria-labelledby="date-picker-id"
-                  autoComplete="off"
-                  className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                  id="date-picker-id-end-year"
-                  key="y4"
-                  mask={
-                    Array [
-                      /\\[1-2\\]/,
-                      /\\[0-9\\]/,
-                      /\\[0-9\\]/,
-                      /\\[0-9\\]/,
-                    ]
-                  }
-                  name="date-picker-id__input"
-                  onBlur={[Function]}
-                  onChange={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onMouseUp={[Function]}
-                  placeholderChar="å"
-                  size="4"
-                  type="text"
-                  value="2019"
-                >
-                  <t
-                    aria-labelledby="date-picker-id"
-                    autoComplete="off"
-                    className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                    guide={true}
-                    id="date-picker-id-end-year"
-                    keepCharPositions={false}
-                    mask={
-                      Array [
-                        /\\[1-2\\]/,
-                        /\\[0-9\\]/,
-                        /\\[0-9\\]/,
-                        /\\[0-9\\]/,
-                      ]
-                    }
-                    name="date-picker-id__input"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onMouseUp={[Function]}
-                    placeholderChar="å"
-                    render={[Function]}
-                    showMask={true}
-                    size="4"
-                    type="text"
-                    value="2019"
-                  >
-                    <input
+                      value="02"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
+                        guide={true}
+                        id="date-picker-id-end-month"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[0-1\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="m"
+                        render={[Function]}
+                        showMask={true}
+                        size="2"
+                        type="text"
+                        value="02"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--month"
+                          defaultValue="02"
+                          id="date-picker-id-end-month"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="2"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                    <span
+                      aria-hidden={true}
+                      className="dnb-date-picker--separator"
+                      key="s3"
+                    >
+                      /
+                    </span>
+                    <ForwardRef
                       aria-labelledby="date-picker-id"
                       autoComplete="off"
                       className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
-                      defaultValue="2019"
                       id="date-picker-id-end-year"
+                      key="y4"
+                      mask={
+                        Array [
+                          /\\[1-2\\]/,
+                          /\\[0-9\\]/,
+                          /\\[0-9\\]/,
+                          /\\[0-9\\]/,
+                        ]
+                      }
                       name="date-picker-id__input"
                       onBlur={[Function]}
                       onChange={[Function]}
                       onFocus={[Function]}
                       onKeyDown={[Function]}
                       onMouseUp={[Function]}
+                      placeholderChar="å"
                       size="4"
                       type="text"
-                    />
-                  </t>
-                </ForwardRef>
-              </span>
-            </span>
-            <SubmitButton
-              aria-expanded={false}
-              disabled={false}
-              icon="calendar"
-              icon_size={null}
-              id="date-picker-id"
-              onKeyUp={[Function]}
-              on_submit={[Function]}
-              on_submit_blur={null}
-              on_submit_focus={null}
-              title={null}
-              type="button"
-              value={null}
-              variant="secondary"
-            >
-              <span
-                className="dnb-input__submit-button"
-                data-input-state="virgin"
-              >
-                <Button
+                      value="2019"
+                    >
+                      <t
+                        aria-labelledby="date-picker-id"
+                        autoComplete="off"
+                        className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
+                        guide={true}
+                        id="date-picker-id-end-year"
+                        keepCharPositions={false}
+                        mask={
+                          Array [
+                            /\\[1-2\\]/,
+                            /\\[0-9\\]/,
+                            /\\[0-9\\]/,
+                            /\\[0-9\\]/,
+                          ]
+                        }
+                        name="date-picker-id__input"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        onMouseUp={[Function]}
+                        placeholderChar="å"
+                        render={[Function]}
+                        showMask={true}
+                        size="4"
+                        type="text"
+                        value="2019"
+                      >
+                        <input
+                          aria-labelledby="date-picker-id"
+                          autoComplete="off"
+                          className="dnb-input__input dnb-date-picker__input dnb-date-picker__input--year"
+                          defaultValue="2019"
+                          id="date-picker-id-end-year"
+                          name="date-picker-id__input"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          onKeyDown={[Function]}
+                          onMouseUp={[Function]}
+                          size="4"
+                          type="text"
+                        />
+                      </t>
+                    </ForwardRef>
+                  </span>
+                </span>
+                <SubmitButton
                   aria-expanded={false}
-                  bounding={false}
-                  class={null}
-                  className="dnb-input__submit-button__button"
-                  custom_element={null}
-                  custom_method={null}
-                  disabled={null}
-                  href={null}
+                  disabled={false}
                   icon="calendar"
-                  icon_position="right"
                   icon_size={null}
                   id="date-picker-id"
-                  innerRef={null}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
                   onKeyUp={[Function]}
-                  on_click={null}
-                  size={null}
-                  text={null}
+                  on_submit={[Function]}
+                  on_submit_blur={null}
+                  on_submit_focus={null}
                   title={null}
                   type="button"
+                  value={null}
                   variant="secondary"
                 >
-                  <button
-                    aria-expanded={false}
-                    className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
-                    id="date-picker-id"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseOut={[Function]}
-                    type="button"
+                  <span
+                    className="dnb-input__submit-button"
+                    data-input-state="virgin"
                   >
-                    <Content
+                    <Button
                       aria-expanded={false}
                       bounding={false}
                       class={null}
                       className="dnb-input__submit-button__button"
-                      content={null}
                       custom_element={null}
                       custom_method={null}
                       disabled={null}
@@ -670,7 +641,6 @@ exports[`DatePicker component have to match snapshot 1`] = `
                       icon_size={null}
                       id="date-picker-id"
                       innerRef={null}
-                      isIconOnly={true}
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -682,126 +652,166 @@ exports[`DatePicker component have to match snapshot 1`] = `
                       type="button"
                       variant="secondary"
                     >
-                      <IconPrimary
-                        alt={null}
-                        aria-hidden={false}
-                        attributes={null}
-                        class={null}
-                        className="dnb-button__icon"
-                        color={null}
-                        height={null}
-                        icon="calendar"
-                        key="button-icon"
-                        modifier={null}
-                        size={null}
-                        title={null}
-                        width={null}
+                      <button
+                        aria-expanded={false}
+                        className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
+                        id="date-picker-id"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyUp={[Function]}
+                        onMouseOut={[Function]}
+                        type="button"
                       >
-                        <span
-                          alt="calendar"
-                          aria-hidden={false}
-                          aria-label="calendar"
-                          className="dnb-icon dnb-button__icon"
-                          role="img"
+                        <Content
+                          aria-expanded={false}
+                          bounding={false}
+                          class={null}
+                          className="dnb-input__submit-button__button"
+                          content={null}
+                          custom_element={null}
+                          custom_method={null}
+                          disabled={null}
+                          href={null}
+                          icon="calendar"
+                          icon_position="right"
+                          icon_size={null}
+                          id="date-picker-id"
+                          innerRef={null}
+                          isIconOnly={true}
+                          onBlur={[Function]}
+                          onClick={[Function]}
+                          onFocus={[Function]}
+                          onKeyUp={[Function]}
+                          on_click={null}
+                          size={null}
+                          text={null}
+                          title={null}
+                          type="button"
+                          variant="secondary"
                         >
-                          <calendar>
-                            <svg
-                              fill="none"
-                              height={17}
-                              viewBox="0 0 17 17"
-                              width={17}
+                          <IconPrimary
+                            alt={null}
+                            aria-hidden={false}
+                            attributes={null}
+                            class={null}
+                            className="dnb-button__icon"
+                            color={null}
+                            height={null}
+                            icon="calendar"
+                            key="button-icon"
+                            modifier={null}
+                            size={null}
+                            title={null}
+                            width={null}
+                          >
+                            <span
+                              alt="calendar"
+                              aria-hidden={false}
+                              aria-label="calendar"
+                              className="dnb-icon dnb-button__icon"
+                              role="img"
                             >
-                              <path
-                                clipRule="evenodd"
-                                d="M4.905 0c.44 0 .797.357.797.797v1.257h5.596V.797a.797.797 0 1 1 1.594 0v1.257h1.718A2.39 2.39 0 0 1 17 4.444V14.61A2.39 2.39 0 0 1 14.61 17H2.39A2.39 2.39 0 0 1 0 14.61V4.444a2.39 2.39 0 0 1 2.39-2.39h1.719V.797c0-.44.356-.797.796-.797zm6.393 3.648v.744a.797.797 0 1 0 1.594 0v-.744h1.718c.44 0 .797.356.797.796v1.719H1.593V4.444c0-.44.357-.796.797-.796h1.719v.744a.797.797 0 1 0 1.593 0v-.744h5.596zM1.593 7.756h13.814v6.854c0 .44-.357.797-.797.797H2.39a.797.797 0 0 1-.797-.797V7.756z"
-                                fill="#000"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </calendar>
-                        </span>
-                      </IconPrimary>
-                    </Content>
-                  </button>
-                </Button>
+                              <calendar>
+                                <svg
+                                  fill="none"
+                                  height={17}
+                                  viewBox="0 0 17 17"
+                                  width={17}
+                                >
+                                  <path
+                                    clipRule="evenodd"
+                                    d="M4.905 0c.44 0 .797.357.797.797v1.257h5.596V.797a.797.797 0 1 1 1.594 0v1.257h1.718A2.39 2.39 0 0 1 17 4.444V14.61A2.39 2.39 0 0 1 14.61 17H2.39A2.39 2.39 0 0 1 0 14.61V4.444a2.39 2.39 0 0 1 2.39-2.39h1.719V.797c0-.44.356-.797.796-.797zm6.393 3.648v.744a.797.797 0 1 0 1.594 0v-.744h1.718c.44 0 .797.356.797.796v1.719H1.593V4.444c0-.44.357-.796.797-.796h1.719v.744a.797.797 0 1 0 1.593 0v-.744h5.596zM1.593 7.756h13.814v6.854c0 .44-.357.797-.797.797H2.39a.797.797 0 0 1-.797-.797V7.756z"
+                                    fill="#000"
+                                    fillRule="evenodd"
+                                  />
+                                </svg>
+                              </calendar>
+                            </span>
+                          </IconPrimary>
+                        </Content>
+                      </button>
+                    </Button>
+                  </span>
+                </SubmitButton>
               </span>
-            </SubmitButton>
-          </span>
-        </Input>
-      </DatePickerInput>
-      <FormStatus
-        animation={null}
-        class={null}
-        className={null}
-        hidden={false}
-        icon="exclamation"
-        icon_size="medium"
-        render_content={null}
-        status="error"
-        text="status"
-        text_id="date-picker-id-status"
-        title={null}
-      >
-        <span
-          aria-live="assertive"
-          className="dnb-form-status dnb-form-status--error dnb-form-status--has-content"
+            </span>
+          </Input>
+        </DatePickerInput>
+        <FormStatus
+          animation={null}
+          class={null}
+          className={null}
           hidden={false}
+          icon="exclamation"
+          icon_size="medium"
+          render_content={null}
+          status="error"
+          text="status"
+          text_id="date-picker-id-status"
+          title={null}
         >
           <span
-            className="dnb-form-status__shell"
+            aria-live="assertive"
+            className="dnb-form-status dnb-form-status--error dnb-form-status--has-content"
+            hidden={false}
           >
-            <IconPrimary
-              alt={null}
-              aria-hidden={true}
-              attributes={null}
-              class={null}
-              className={null}
-              color={null}
-              height={null}
-              icon="exclamation"
-              modifier={null}
-              size="medium"
-              title={null}
-              width={null}
+            <span
+              className="dnb-form-status__shell"
             >
-              <span
-                alt="exclamation"
+              <IconPrimary
+                alt={null}
                 aria-hidden={true}
-                className="dnb-icon dnb-icon--medium"
-                role="img"
+                attributes={null}
+                class={null}
+                className={null}
+                color={null}
+                height={null}
+                icon="exclamation"
+                modifier={null}
+                size="medium"
+                title={null}
+                width={null}
               >
-                <exclamation_medium>
-                  <svg
-                    fill="none"
-                    height={24}
-                    viewBox="0 0 24 24"
-                    width={24}
-                  >
-                    <path
-                      clipRule="evenodd"
-                      d="M12 3a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-1.5 0V3.75A.75.75 0 0 1 12 3zm-1.074 15.426c.29-.29.679-.426 1.074-.426s.783.135 1.074.426c.29.29.426.679.426 1.074s-.135.783-.426 1.074c-.29.29-.679.426-1.074.426s-.783-.135-1.074-.426A1.499 1.499 0 0 1 10.5 19.5c0-.395.135-.783.426-1.074z"
-                      fill="#000"
-                      fillRule="evenodd"
-                    />
-                  </svg>
-                </exclamation_medium>
+                <span
+                  alt="exclamation"
+                  aria-hidden={true}
+                  className="dnb-icon dnb-icon--medium"
+                  role="img"
+                >
+                  <exclamation_medium>
+                    <svg
+                      fill="none"
+                      height={24}
+                      viewBox="0 0 24 24"
+                      width={24}
+                    >
+                      <path
+                        clipRule="evenodd"
+                        d="M12 3a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-1.5 0V3.75A.75.75 0 0 1 12 3zm-1.074 15.426c.29-.29.679-.426 1.074-.426s.783.135 1.074.426c.29.29.426.679.426 1.074s-.135.783-.426 1.074c-.29.29-.679.426-1.074.426s-.783-.135-1.074-.426A1.499 1.499 0 0 1 10.5 19.5c0-.395.135-.783.426-1.074z"
+                        fill="#000"
+                        fillRule="evenodd"
+                      />
+                    </svg>
+                  </exclamation_medium>
+                </span>
+              </IconPrimary>
+              <span
+                className="dnb-form-status--text"
+                id="date-picker-id-status"
+              >
+                status
               </span>
-            </IconPrimary>
-            <span
-              className="dnb-form-status--text"
-              id="date-picker-id-status"
-            >
-              status
             </span>
           </span>
-        </span>
-      </FormStatus>
-      <span
-        className="dnb-date-picker__container"
-      >
+        </FormStatus>
         <span
-          className="dnb-date-picker__triangle"
-        />
+          className="dnb-date-picker__container"
+        >
+          <span
+            className="dnb-date-picker__triangle"
+          />
+        </span>
       </span>
     </span>
   </span>
@@ -906,9 +916,9 @@ exports[`DatePicker scss have to match default theme snapshot 1`] = `
     border: none;
     background-color: var(--color-white);
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16); }
-  .dnb-date-picker:not(.dnb-date-picker--opened).dnb-date-picker__status--error .dnb-input__shell:not([data-input-state='focus'])
+  .dnb-date-picker__status--error .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-input__shell:not([data-input-state='focus'])
 .dnb-date-picker__input,
-  .dnb-date-picker:not(.dnb-date-picker--opened).dnb-date-picker__status--error .dnb-input__shell:not([data-input-state='focus'])
+  .dnb-date-picker__status--error .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-input__shell:not([data-input-state='focus'])
 .dnb-date-picker__input ~ .dnb-date-picker--separator {
     color: var(--color-cherry-red); }
 "
@@ -1392,8 +1402,6 @@ a.dnb-button .dnb-button__text {
 .dnb-input {
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
-  vertical-align: middle;
   width: auto;
   font-size: var(--input-font-size); }
   .dnb-input__shell {
@@ -1402,8 +1410,6 @@ a.dnb-button .dnb-button__text {
     align-items: center;
     overflow: hidden;
     border: var(--input-border-width) solid var(--color-sea-green-alt); }
-  label + .dnb-input[class*='__form-status'] {
-    vertical-align: baseline; }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -1422,7 +1428,9 @@ a.dnb-button .dnb-button__text {
     font-size: inherit;
     line-height: 1em;
     background-color: transparent;
-    transform: translateY(var(--input-border-width)); }
+    transform: translateY(var(--input-border-width));
+    font-variant-numeric: lining-nums;
+    font-feature-settings: \\"lnum\\"; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -1488,14 +1496,29 @@ a.dnb-button .dnb-button__text {
   .dnb-input__align--right .dnb-input__placeholder,
   .dnb-input__align--right .dnb-input__input {
     text-align: right; }
-  .dnb-input--stretch,
-  .dnb-input--stretch .dnb-input__shell {
-    width: 100%; }
   .dnb-input__shell[data-has-content='true'] .dnb-input__placeholder,
   .dnb-input__shell[data-has-content='true'][data-input-state='focus'] .dnb-input__placeholder {
     display: none; }
   .dnb-input > .dnb-form-status {
     margin-top: 0.5rem; }
+  .dnb-input--stretch .dnb-input {
+    flex: 1; }
+  .dnb-input--stretch .dnb-input__shell {
+    width: 100%; }
+  .dnb-input__wrapper {
+    display: inline-flex;
+    align-items: center; }
+  .dnb-input__wrapper.dnb-input--vertical {
+    align-items: flex-start;
+    flex-direction: column; }
+  .dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
+    width: 100%; }
+  .dnb-input__wrapper.dnb-input--stretch {
+    display: flex; }
+  .dnb-input__wrapper[class*='__status'] {
+    align-items: flex-start; }
+    .dnb-input__wrapper[class*='__status'] > .dnb-form-label {
+      margin-top: 0.25rem; }
 
 .dnb-dropdown {
   font-family: var(--font-family-default);
@@ -1742,5 +1765,19 @@ a.dnb-button .dnb-button__text {
       transform: scaleX(-1); }
   .dnb-date-picker .dnb-form-status {
     margin-top: 0.375rem; }
+  .dnb-date-picker__wrapper {
+    display: inline-flex;
+    align-items: center; }
+  .dnb-date-picker__wrapper.dnb-date-picker--vertical {
+    align-items: flex-start;
+    flex-direction: column; }
+  .dnb-date-picker__wrapper.dnb-date-picker--vertical.dnb-date-picker--stretch .dnb-input {
+    width: 100%; }
+  .dnb-date-picker__wrapper.dnb-date-picker--stretch {
+    display: flex; }
+  .dnb-date-picker__wrapper[class*='__status'] {
+    align-items: flex-start; }
+    .dnb-date-picker__wrapper[class*='__status'] > .dnb-form-label {
+      margin-top: 0.25rem; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-calendar-1-9e9ea.snap.png b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-calendar-1-9e9ea.snap.png
index f59d694a9b6..847f87151d6 100644
Binary files a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-calendar-1-9e9ea.snap.png and b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-calendar-1-9e9ea.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-1-6c5ae.snap.png b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-1-6c5ae.snap.png
index e4d857c39bc..4fe2ee2f9b6 100644
Binary files a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-1-6c5ae.snap.png and b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-1-6c5ae.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-in-error-state-1-d76c4.snap.png b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-in-error-state-1-d76c4.snap.png
index df1f5380875..6c5cb6b33bd 100644
Binary files a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-in-error-state-1-d76c4.snap.png and b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/date-picker-screenshot-test-js-date-picker-screenshot-have-to-match-the-date-picker-trigger-button-in-error-state-1-d76c4.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
index 49f1f6f78c5..620ea0daf8e 100644
--- a/packages/dnb-ui-lib/src/components/form-row/FormRow.js
+++ b/packages/dnb-ui-lib/src/components/form-row/FormRow.js
@@ -165,11 +165,20 @@ export default class FormRow extends PureComponent {
 
     const context = extend(this.context, {
       formRow: {
+        useId: () => {
+          if (this.isIsUsed) {
+            // make a new ID, as we used one
+            return `dnb-form-row-${Math.round(Math.random() * 999)}` // cause we need an id anyway
+          }
+          this.isIsUsed = true
+          return id
+        },
         itsMeAgain: true,
         hasLabel: label,
         size,
         direction,
         vertical,
+        label_direction: vertical ? 'vertical' : direction,
         disabled
       }
     })
@@ -180,7 +189,7 @@ export default class FormRow extends PureComponent {
           {label && (
             <FormLabel
               id={(label_id ? label_id : id) + '-label'}
-              // for_id={id} // we don't use for_id, because we don't have a single element to target to
+              for_id={id} // we don't use for_id, because we don't have a single element to target to
               text={label}
               disabled={isTrue(disabled)}
               className="dnb-form-row__label"
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js b/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js
index 4e3e969e479..6408182583c 100644
--- a/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js
+++ b/packages/dnb-ui-lib/src/components/form-row/__tests__/FormRow.test.js
@@ -21,6 +21,7 @@ import dnb_form_row_theme_ui from '../style/themes/dnb-form-row-theme-ui.scss' /
 const props = fakeProps(require.resolve('../FormRow'), {
   optional: true
 })
+props.id = 'form-row'
 props.direction = 'horizontal'
 
 describe('FormRow component', () => {
diff --git a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
index 209d0da3b62..4ab191d5275 100644
--- a/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/form-row/__tests__/__snapshots__/FormRow.test.js.snap
@@ -6,7 +6,7 @@ exports[`FormRow component have to match snapshot 1`] = `
   className="className"
   direction="horizontal"
   disabled="disabled"
-  id="id"
+  id="form-row"
   label="label"
   label_id="label_id"
   no_label="no_label"
@@ -24,7 +24,7 @@ exports[`FormRow component have to match snapshot 1`] = `
       className="dnb-form-row__label"
       direction={null}
       disabled={false}
-      for_id={null}
+      for_id="form-row"
       id="label_id-label"
       render_content={null}
       text="label"
@@ -33,6 +33,7 @@ exports[`FormRow component have to match snapshot 1`] = `
     >
       <label
         className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+        htmlFor="form-row"
         id="label_id-label"
       >
         label
@@ -182,6 +183,8 @@ exports[`FormRow scss have to match snapshot 1`] = `
 .dnb-form-row {
   display: flex;
   flex-direction: row; }
+  .dnb-form-row__content {
+    width: 100%; }
   .dnb-form-row > .dnb-form-status {
     margin: 0.5rem 0; }
   .dnb-form-row > .dnb-form-label {
diff --git a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
index 37bb4e103ac..8d37376c6fb 100644
--- a/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
+++ b/packages/dnb-ui-lib/src/components/form-row/style/_form-row.scss
@@ -14,6 +14,10 @@
   display: flex;
   flex-direction: row;
 
+  &__content {
+    width: 100%;
+  }
+
   // TODO: we may considder this to be included with a prop later on
   // default spacing
   // &:not(#{&}--nested) {
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index ca3bbd33958..ee64d7821c9 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -38,6 +38,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     input_class={null}
     input_state={null}
     label={null}
+    label_direction={null}
     on_blur={null}
     on_change={null}
     on_focus={null}
@@ -60,49 +61,53 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
     value="test"
   >
     <span
-      className="dnb-input dnb-input--text dnb-input-masked"
+      className="dnb-input__wrapper"
     >
       <span
-        className="dnb-input__shell"
-        data-has-content="true"
-        data-input-state="virgin"
+        className="dnb-input dnb-input--text dnb-input-masked"
       >
-        <t
-          autoComplete="off"
-          className="dnb-input__input"
-          guide={true}
-          id="input-masked"
-          keepCharPositions={true}
-          mask={
-            Array [
-              /\\[a-z\\]/,
-            ]
-          }
-          name="input-masked"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          onKeyDown={[Function]}
-          pipe={null}
-          placeholderChar="placeholder_char"
-          render={[Function]}
-          showMask={true}
-          type="text"
-          value="test"
+        <span
+          className="dnb-input__shell"
+          data-has-content="true"
+          data-input-state="virgin"
         >
-          <input
+          <t
             autoComplete="off"
             className="dnb-input__input"
-            defaultValue="test"
+            guide={true}
             id="input-masked"
+            keepCharPositions={true}
+            mask={
+              Array [
+                /\\[a-z\\]/,
+              ]
+            }
             name="input-masked"
             onBlur={[Function]}
             onChange={[Function]}
             onFocus={[Function]}
             onKeyDown={[Function]}
+            pipe={null}
+            placeholderChar="placeholder_char"
+            render={[Function]}
+            showMask={true}
             type="text"
-          />
-        </t>
+            value="test"
+          >
+            <input
+              autoComplete="off"
+              className="dnb-input__input"
+              defaultValue="test"
+              id="input-masked"
+              name="input-masked"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              type="text"
+            />
+          </t>
+        </span>
       </span>
     </span>
   </Input>
@@ -587,8 +592,6 @@ a.dnb-button .dnb-button__text {
 .dnb-input {
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
-  vertical-align: middle;
   width: auto;
   font-size: var(--input-font-size); }
   .dnb-input__shell {
@@ -597,8 +600,6 @@ a.dnb-button .dnb-button__text {
     align-items: center;
     overflow: hidden;
     border: var(--input-border-width) solid var(--color-sea-green-alt); }
-  label + .dnb-input[class*='__form-status'] {
-    vertical-align: baseline; }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -617,7 +618,9 @@ a.dnb-button .dnb-button__text {
     font-size: inherit;
     line-height: 1em;
     background-color: transparent;
-    transform: translateY(var(--input-border-width)); }
+    transform: translateY(var(--input-border-width));
+    font-variant-numeric: lining-nums;
+    font-feature-settings: \\"lnum\\"; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -683,14 +686,29 @@ a.dnb-button .dnb-button__text {
   .dnb-input__align--right .dnb-input__placeholder,
   .dnb-input__align--right .dnb-input__input {
     text-align: right; }
-  .dnb-input--stretch,
-  .dnb-input--stretch .dnb-input__shell {
-    width: 100%; }
   .dnb-input__shell[data-has-content='true'] .dnb-input__placeholder,
   .dnb-input__shell[data-has-content='true'][data-input-state='focus'] .dnb-input__placeholder {
     display: none; }
   .dnb-input > .dnb-form-status {
     margin-top: 0.5rem; }
+  .dnb-input--stretch .dnb-input {
+    flex: 1; }
+  .dnb-input--stretch .dnb-input__shell {
+    width: 100%; }
+  .dnb-input__wrapper {
+    display: inline-flex;
+    align-items: center; }
+  .dnb-input__wrapper.dnb-input--vertical {
+    align-items: flex-start;
+    flex-direction: column; }
+  .dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
+    width: 100%; }
+  .dnb-input__wrapper.dnb-input--stretch {
+    display: flex; }
+  .dnb-input__wrapper[class*='__status'] {
+    align-items: flex-start; }
+    .dnb-input__wrapper[class*='__status'] > .dnb-form-label {
+      margin-top: 0.25rem; }
 
 .dnb-input-masked {
   font-family: var(--font-family-default);
diff --git a/packages/dnb-ui-lib/src/components/input/Input.js b/packages/dnb-ui-lib/src/components/input/Input.js
index 127c85d9855..fe092c86a8e 100644
--- a/packages/dnb-ui-lib/src/components/input/Input.js
+++ b/packages/dnb-ui-lib/src/components/input/Input.js
@@ -20,6 +20,8 @@ import {
 } from '../../shared/component-helper'
 import { isIE11 } from '../../shared/helpers'
 
+import Context from '../../shared/Context'
+
 const renderProps = {
   on_change: null,
   on_submit: null,
@@ -35,6 +37,7 @@ export const propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   id: PropTypes.string,
   label: PropTypes.string,
+  label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
   status: PropTypes.string,
   input_state: PropTypes.string,
   status_state: PropTypes.string,
@@ -87,6 +90,7 @@ export const defaultProps = {
   value: null,
   id: null,
   label: null,
+  label_direction: null,
   status: null,
   input_state: null,
   status_state: 'error',
@@ -128,6 +132,7 @@ export default class Input extends PureComponent {
   static propTypes = propTypes
   static defaultProps = defaultProps
   static renderProps = renderProps
+  static contextType = Context
 
   static enableWebComponent() {
     registerElement(Input.tagName, Input, defaultProps)
@@ -142,9 +147,6 @@ export default class Input extends PureComponent {
     ) {
       state.value = value
     }
-    if (props.disabled) {
-      state.inputState = 'disabled'
-    }
     if (props.input_state) {
       state.inputState = props.input_state
     }
@@ -159,11 +161,14 @@ export default class Input extends PureComponent {
 
   state = { inputState: 'virgin', value: null }
 
-  constructor(props) {
+  constructor(props, context) {
     super(props)
 
     this._ref = React.createRef()
-    this._id = props.id || `dnb-input-${Math.round(Math.random() * 999)}` // cause we need an id anyway
+    this._id =
+      props.id ||
+      (context.formRow && context.formRow.useId()) ||
+      `dnb-input-${Math.round(Math.random() * 999)}` // cause we need an id anyway
 
     // make sure we dont trigger getDerivedStateFromProps on startup
     this.state._listenForPropChanges = true
@@ -223,6 +228,7 @@ export default class Input extends PureComponent {
       type,
       size,
       label,
+      label_direction,
       status,
       status_state,
       status_animation,
@@ -251,7 +257,11 @@ export default class Input extends PureComponent {
       ...attributes
     } = props
 
-    const { value, inputState } = this.state
+    let { value, inputState } = this.state
+
+    if (disabled) {
+      inputState = 'disabled'
+    }
 
     const id = this._id
     const showStatus = status && status !== 'error'
@@ -263,9 +273,6 @@ export default class Input extends PureComponent {
       size && `dnb-input--${size}`,
       hasSubmitButton && 'dnb-input--has-submit-button',
       align && `dnb-input__align--${align}`,
-      showStatus && 'dnb-input__form-status',
-      status && `dnb-input__status--${status_state}`,
-      isTrue(stretch) && `dnb-input--stretch`,
       _className,
       className
     )
@@ -283,7 +290,7 @@ export default class Input extends PureComponent {
       value: value || '',
       type,
       id,
-      disabled,
+      disabled: isTrue(disabled),
       name: id,
       ...attributes,
       onChange: this.onChangeHandler,
@@ -292,6 +299,15 @@ export default class Input extends PureComponent {
       onBlur: this.onBlurHandler
     }
 
+    const wrapperParams = {
+      className: classnames(
+        'dnb-input__wrapper',
+        status && `dnb-input__status--${status_state}`,
+        label_direction && `dnb-input--${label_direction}`,
+        isTrue(stretch) && `dnb-input--stretch`
+      )
+    }
+
     // we may considder using: aria-details
     if (showStatus) {
       inputParams['aria-describedby'] = id + '-status'
@@ -312,7 +328,7 @@ export default class Input extends PureComponent {
       'data-input-state': inputState,
       'data-has-content': String(value || '').length > 0 ? 'true' : 'false'
     }
-    if (disabled) {
+    if (isTrue(disabled)) {
       shellParams['aria-disabled'] = true
     }
 
@@ -327,13 +343,14 @@ export default class Input extends PureComponent {
     }
 
     return (
-      <>
+      <span {...wrapperParams}>
         {label && (
           <FormLabel
             id={id + '-label'}
             for_id={id}
             text={label}
             disabled={disabled}
+            direction={label_direction}
           />
         )}
         <span className={classes}>
@@ -387,7 +404,7 @@ export default class Input extends PureComponent {
             {this.props.description}
           </span>
         )}
-      </>
+      </span>
     )
   }
 }
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/Input.screenshot.test.js b/packages/dnb-ui-lib/src/components/input/__tests__/Input.screenshot.test.js
index db0d4e88f6e..dba0b606929 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/Input.screenshot.test.js
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/Input.screenshot.test.js
@@ -40,6 +40,7 @@ describe('Input screenshot', () => {
         width: '600px' // make sure our input gets an explicit width, because of mac/linux rendering differences
       },
       selector: '[data-dnb-test="input-large"] .dnb-input',
+      simulateSelector: '[data-dnb-test="input-large"] .dnb-input__input',
       simulate: 'hover'
     })
     expect(screenshot).toMatchImageSnapshot()
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
index 548baf0de74..8eb9f8c5e05 100644
--- a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -21,6 +21,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
         "input_class": "input_class",
         "input_state": "input_state",
         "label": "label",
+        "label_direction": "'horizontal'",
         "on_blur": [Function],
         "on_change": [Function],
         "on_focus": [Function],
@@ -75,6 +76,7 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   input_class={null}
   input_state={null}
   label={null}
+  label_direction={null}
   on_blur={null}
   on_change={null}
   on_focus={null}
@@ -97,228 +99,233 @@ exports[`Input component have to match type="search" snapshot 1`] = `
   value="test"
 >
   <span
-    className="dnb-input dnb-input--search dnb-input--has-submit-button"
+    className="dnb-input__wrapper"
   >
     <span
-      className="dnb-input__shell"
-      data-has-content="true"
-      data-input-state="virgin"
-    >
-      <input
-        autoComplete="off"
-        className="dnb-input__input"
-        id="input"
-        name="input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        type="search"
-        value="test"
-      />
-    </span>
-    <SubmitButton
-      0={
-        Object {
-          "displayName": "Input",
-          "props": Object {
-            "align": "align",
-            "attributes": "attributes",
-            "autocomplete": "'on'",
-            "children": "children",
-            "class": "class",
-            "className": "className",
-            "custom_element": Object {},
-            "custom_method": [Function],
-            "description": "description",
-            "disabled": "disabled",
-            "id": "id",
-            "inputElement": [Function],
-            "input_class": "input_class",
-            "input_state": "input_state",
-            "label": "label",
-            "on_blur": [Function],
-            "on_change": [Function],
-            "on_focus": [Function],
-            "on_submit": [Function],
-            "on_submit_blur": [Function],
-            "on_submit_focus": [Function],
-            "placeholder": "placeholder",
-            "readOnly": "readOnly",
-            "selectall": "selectall",
-            "size": "size",
-            "status": "status",
-            "status_animation": "status_animation",
-            "status_state": "status_state",
-            "stretch": "stretch",
-            "submitButton": [Function],
-            "submit_button_icon": "submit_button_icon",
-            "submit_button_title": "submit_button_title",
-            "submit_button_variant": "custom type not supported, please set the correct value for submit_button_variant prop",
-            "type": "type",
-            "value": "value",
-          },
-        }
-      }
-      1={
-        Object {
-          "displayName": "SubmitButton",
-          "props": Object {
-            "disabled": "disabled",
-            "icon": "icon",
-            "icon_size": "icon_size",
-            "id": "id",
-            "on_submit": [Function],
-            "on_submit_blur": [Function],
-            "on_submit_focus": [Function],
-            "title": "title",
-            "value": "value",
-            "variant": "custom type not supported, please set the correct value for variant prop",
-          },
-        }
-      }
-      attributes={null}
-      custom_element={null}
-      custom_method={null}
-      disabled={false}
-      icon="search"
-      icon_size={null}
-      id={null}
-      input_state={null}
-      on_blur={null}
-      on_change={null}
-      on_focus={null}
-      on_submit={null}
-      on_submit_blur={null}
-      on_submit_focus={null}
-      size={null}
-      title={null}
-      value="test"
-      variant="secondary"
+      className="dnb-input dnb-input--search dnb-input--has-submit-button"
     >
       <span
-        className="dnb-input__submit-button"
+        className="dnb-input__shell"
+        data-has-content="true"
         data-input-state="virgin"
       >
-        <Button
-          bounding={false}
-          class={null}
-          className="dnb-input__submit-button__button"
-          custom_element={null}
-          custom_method={null}
-          disabled={null}
-          href={null}
-          icon="search"
-          icon_position="right"
-          icon_size={null}
-          id={null}
-          innerRef={null}
+        <input
+          autoComplete="off"
+          className="dnb-input__input"
+          id="input"
+          name="input"
           onBlur={[Function]}
-          onClick={[Function]}
+          onChange={[Function]}
           onFocus={[Function]}
-          on_click={null}
-          size={null}
-          text={null}
-          title={null}
-          type="submit"
+          onKeyDown={[Function]}
+          type="search"
           value="test"
-          variant="secondary"
+        />
+      </span>
+      <SubmitButton
+        0={
+          Object {
+            "displayName": "Input",
+            "props": Object {
+              "align": "align",
+              "attributes": "attributes",
+              "autocomplete": "'on'",
+              "children": "children",
+              "class": "class",
+              "className": "className",
+              "custom_element": Object {},
+              "custom_method": [Function],
+              "description": "description",
+              "disabled": "disabled",
+              "id": "id",
+              "inputElement": [Function],
+              "input_class": "input_class",
+              "input_state": "input_state",
+              "label": "label",
+              "label_direction": "'horizontal'",
+              "on_blur": [Function],
+              "on_change": [Function],
+              "on_focus": [Function],
+              "on_submit": [Function],
+              "on_submit_blur": [Function],
+              "on_submit_focus": [Function],
+              "placeholder": "placeholder",
+              "readOnly": "readOnly",
+              "selectall": "selectall",
+              "size": "size",
+              "status": "status",
+              "status_animation": "status_animation",
+              "status_state": "status_state",
+              "stretch": "stretch",
+              "submitButton": [Function],
+              "submit_button_icon": "submit_button_icon",
+              "submit_button_title": "submit_button_title",
+              "submit_button_variant": "custom type not supported, please set the correct value for submit_button_variant prop",
+              "type": "type",
+              "value": "value",
+            },
+          }
+        }
+        1={
+          Object {
+            "displayName": "SubmitButton",
+            "props": Object {
+              "disabled": "disabled",
+              "icon": "icon",
+              "icon_size": "icon_size",
+              "id": "id",
+              "on_submit": [Function],
+              "on_submit_blur": [Function],
+              "on_submit_focus": [Function],
+              "title": "title",
+              "value": "value",
+              "variant": "custom type not supported, please set the correct value for variant prop",
+            },
+          }
+        }
+        attributes={null}
+        custom_element={null}
+        custom_method={null}
+        disabled={false}
+        icon="search"
+        icon_size={null}
+        id={null}
+        input_state={null}
+        on_blur={null}
+        on_change={null}
+        on_focus={null}
+        on_submit={null}
+        on_submit_blur={null}
+        on_submit_focus={null}
+        size={null}
+        title={null}
+        value="test"
+        variant="secondary"
+      >
+        <span
+          className="dnb-input__submit-button"
+          data-input-state="virgin"
         >
-          <button
-            className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
+          <Button
+            bounding={false}
+            class={null}
+            className="dnb-input__submit-button__button"
+            custom_element={null}
+            custom_method={null}
+            disabled={null}
+            href={null}
+            icon="search"
+            icon_position="right"
+            icon_size={null}
+            id={null}
+            innerRef={null}
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            onMouseOut={[Function]}
+            on_click={null}
+            size={null}
+            text={null}
+            title={null}
             type="submit"
             value="test"
+            variant="secondary"
           >
-            <Content
-              bounding={false}
-              class={null}
-              className="dnb-input__submit-button__button"
-              content={null}
-              custom_element={null}
-              custom_method={null}
-              disabled={null}
-              href={null}
-              icon="search"
-              icon_position="right"
-              icon_size={null}
-              id={null}
-              innerRef={null}
-              isIconOnly={true}
+            <button
+              className="dnb-button dnb-button--secondary dnb-button--size-medium dnb-button--icon-position-right dnb-button--has-icon dnb-input__submit-button__button"
               onBlur={[Function]}
               onClick={[Function]}
               onFocus={[Function]}
-              on_click={null}
-              size={null}
-              text={null}
-              title={null}
+              onMouseOut={[Function]}
               type="submit"
               value="test"
-              variant="secondary"
             >
-              <IconPrimary
-                alt={null}
-                aria-hidden={false}
-                attributes={null}
+              <Content
+                bounding={false}
                 class={null}
-                className="dnb-button__icon"
-                color={null}
-                height={null}
+                className="dnb-input__submit-button__button"
+                content={null}
+                custom_element={null}
+                custom_method={null}
+                disabled={null}
+                href={null}
                 icon="search"
-                key="button-icon"
-                modifier={null}
+                icon_position="right"
+                icon_size={null}
+                id={null}
+                innerRef={null}
+                isIconOnly={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                on_click={null}
                 size={null}
+                text={null}
                 title={null}
-                width={null}
+                type="submit"
+                value="test"
+                variant="secondary"
               >
-                <span
-                  alt="search"
+                <IconPrimary
+                  alt={null}
                   aria-hidden={false}
-                  aria-label="search"
-                  className="dnb-icon dnb-button__icon"
-                  role="img"
+                  attributes={null}
+                  class={null}
+                  className="dnb-button__icon"
+                  color={null}
+                  height={null}
+                  icon="search"
+                  key="button-icon"
+                  modifier={null}
+                  size={null}
+                  title={null}
+                  width={null}
                 >
-                  <search>
-                    <svg
-                      fill="none"
-                      height={17}
-                      viewBox="0 0 17 17"
-                      width={17}
-                    >
-                      <g
-                        clipPath="url(#clip-06a943)"
-                        stroke="#000"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={1.5}
+                  <span
+                    alt="search"
+                    aria-hidden={false}
+                    aria-label="search"
+                    className="dnb-icon dnb-button__icon"
+                    role="img"
+                  >
+                    <search>
+                      <svg
+                        fill="none"
+                        height={17}
+                        viewBox="0 0 17 17"
+                        width={17}
                       >
-                        <path
-                          d="M9.055 11.937a5.445 5.445 0 1 0-4.26-10.023 5.445 5.445 0 0 0 4.26 10.023zm1.72-1.162L15 14.999"
-                        />
-                      </g>
-                      <defs>
-                        <clipPath
-                          id="clip-06a943"
+                        <g
+                          clipPath="url(#clip-06a943)"
+                          stroke="#000"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={1.5}
                         >
                           <path
-                            d="M0 0h16v16H0z"
-                            fill="#fff"
-                            transform="scale(1.02995)"
+                            d="M9.055 11.937a5.445 5.445 0 1 0-4.26-10.023 5.445 5.445 0 0 0 4.26 10.023zm1.72-1.162L15 14.999"
                           />
-                        </clipPath>
-                      </defs>
-                    </svg>
-                  </search>
-                </span>
-              </IconPrimary>
-            </Content>
-          </button>
-        </Button>
-      </span>
-    </SubmitButton>
+                        </g>
+                        <defs>
+                          <clipPath
+                            id="clip-06a943"
+                          >
+                            <path
+                              d="M0 0h16v16H0z"
+                              fill="#fff"
+                              transform="scale(1.02995)"
+                            />
+                          </clipPath>
+                        </defs>
+                      </svg>
+                    </search>
+                  </span>
+                </IconPrimary>
+              </Content>
+            </button>
+          </Button>
+        </span>
+      </SubmitButton>
+    </span>
   </span>
 </Input>
 `;
@@ -344,6 +351,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
         "input_class": "input_class",
         "input_state": "input_state",
         "label": "label",
+        "label_direction": "'horizontal'",
         "on_blur": [Function],
         "on_change": [Function],
         "on_focus": [Function],
@@ -398,6 +406,7 @@ exports[`Input component have to match type="text" snapshot 1`] = `
   input_class={null}
   input_state={null}
   label={null}
+  label_direction={null}
   on_blur={null}
   on_change={null}
   on_focus={null}
@@ -420,25 +429,29 @@ exports[`Input component have to match type="text" snapshot 1`] = `
   value="test"
 >
   <span
-    className="dnb-input dnb-input--text"
+    className="dnb-input__wrapper"
   >
     <span
-      className="dnb-input__shell"
-      data-has-content="true"
-      data-input-state="virgin"
+      className="dnb-input dnb-input--text"
     >
-      <input
-        autoComplete="off"
-        className="dnb-input__input"
-        id="input"
-        name="input"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        type="text"
-        value="test"
-      />
+      <span
+        className="dnb-input__shell"
+        data-has-content="true"
+        data-input-state="virgin"
+      >
+        <input
+          autoComplete="off"
+          className="dnb-input__input"
+          id="input"
+          name="input"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          type="text"
+          value="test"
+        />
+      </span>
     </span>
   </span>
 </Input>
@@ -987,8 +1000,6 @@ a.dnb-button .dnb-button__text {
 .dnb-input {
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
-  vertical-align: middle;
   width: auto;
   font-size: var(--input-font-size); }
   .dnb-input__shell {
@@ -997,8 +1008,6 @@ a.dnb-button .dnb-button__text {
     align-items: center;
     overflow: hidden;
     border: var(--input-border-width) solid var(--color-sea-green-alt); }
-  label + .dnb-input[class*='__form-status'] {
-    vertical-align: baseline; }
   .dnb-input__input {
     border: none;
     outline: none;
@@ -1017,7 +1026,9 @@ a.dnb-button .dnb-button__text {
     font-size: inherit;
     line-height: 1em;
     background-color: transparent;
-    transform: translateY(var(--input-border-width)); }
+    transform: translateY(var(--input-border-width));
+    font-variant-numeric: lining-nums;
+    font-feature-settings: \\"lnum\\"; }
   .dnb-input__placeholder {
     pointer-events: none;
     position: absolute;
@@ -1083,13 +1094,28 @@ a.dnb-button .dnb-button__text {
   .dnb-input__align--right .dnb-input__placeholder,
   .dnb-input__align--right .dnb-input__input {
     text-align: right; }
-  .dnb-input--stretch,
-  .dnb-input--stretch .dnb-input__shell {
-    width: 100%; }
   .dnb-input__shell[data-has-content='true'] .dnb-input__placeholder,
   .dnb-input__shell[data-has-content='true'][data-input-state='focus'] .dnb-input__placeholder {
     display: none; }
   .dnb-input > .dnb-form-status {
     margin-top: 0.5rem; }
+  .dnb-input--stretch .dnb-input {
+    flex: 1; }
+  .dnb-input--stretch .dnb-input__shell {
+    width: 100%; }
+  .dnb-input__wrapper {
+    display: inline-flex;
+    align-items: center; }
+  .dnb-input__wrapper.dnb-input--vertical {
+    align-items: flex-start;
+    flex-direction: column; }
+  .dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
+    width: 100%; }
+  .dnb-input__wrapper.dnb-input--stretch {
+    display: flex; }
+  .dnb-input__wrapper[class*='__status'] {
+    align-items: flex-start; }
+    .dnb-input__wrapper[class*='__status'] > .dnb-form-label {
+      margin-top: 0.25rem; }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-disabled-input-1-09630.snap.png b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-disabled-input-1-09630.snap.png
index 95dce2757c9..576e1ab9078 100644
Binary files a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-disabled-input-1-09630.snap.png and b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-disabled-input-1-09630.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-input-with-placeholder-1-2368e.snap.png b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-input-with-placeholder-1-2368e.snap.png
index 6c344e7d870..bd2b9abfb46 100644
Binary files a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-input-with-placeholder-1-2368e.snap.png and b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-input-with-placeholder-1-2368e.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-stretched-and-large-size-1-93d10.snap.png b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-stretched-and-large-size-1-93d10.snap.png
index ba514a222d5..e26a4e46da8 100644
Binary files a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-stretched-and-large-size-1-93d10.snap.png and b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/input-screenshot-test-js-input-screenshot-have-to-match-stretched-and-large-size-1-93d10.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
index 22a6c811a9c..6fcfb763f92 100644
--- a/packages/dnb-ui-lib/src/components/input/style/_input.scss
+++ b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -22,8 +22,6 @@
 .dnb-input {
   display: inline-flex;
   flex-direction: column;
-  align-items: flex-start;
-  vertical-align: middle;
 
   width: auto;
 
@@ -38,9 +36,6 @@
 
     border: var(--input-border-width) solid var(--color-sea-green-alt);
   }
-  label + &[class*='__form-status'] {
-    vertical-align: baseline;
-  }
 
   &__input {
     border: none;
@@ -71,8 +66,10 @@
     line-height: 1em; // because when ::selected is kikking in
     background-color: transparent;
 
-    // because of vertical centering
+    // because of vertical centering and the current font
     transform: translateY(var(--input-border-width));
+
+    @include numberFeature(lining-nums, lnum);
   }
 
   &__placeholder {
@@ -177,11 +174,6 @@
     text-align: right;
   }
 
-  &--stretch,
-  &--stretch &__shell {
-    width: 100%;
-  }
-
   // Hide placeholder when: 1. input has content or 2: input is in focus
   &__shell[data-has-content='true'] .dnb-input__placeholder,
   &__shell[data-has-content='true'][data-input-state='focus']
@@ -196,4 +188,35 @@
   > .dnb-form-status {
     margin-top: 0.5rem;
   }
+
+  // make the input full width
+  &--stretch & {
+    flex: 1;
+  }
+  &--stretch &__shell {
+    width: 100%;
+  }
+
+  // Wrapper layout handling
+  &__wrapper {
+    display: inline-flex;
+    align-items: center;
+  }
+  &__wrapper#{&}--vertical {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+  &__wrapper#{&}--vertical#{&}--stretch .dnb-input {
+    width: 100%;
+  }
+  &__wrapper#{&}--stretch {
+    display: flex;
+  }
+  &__wrapper[class*='__status'] {
+    align-items: flex-start;
+    > .dnb-form-label {
+      // vertical align the current font
+      margin-top: 0.25rem;
+    }
+  }
 }
diff --git a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
index 421fa703ca3..e9c690d2600 100644
--- a/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -11,7 +11,7 @@ exports[`Radio component have to match snapshot 1`] = `
   direction="horizontal"
   disabled="disabled"
   group={null}
-  id="id"
+  id="radio"
   label="label"
   label_position="left"
   on_change={[Function]}
@@ -32,8 +32,8 @@ exports[`Radio component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled={false}
-      for_id="id"
-      id="id-label"
+      for_id="radio"
+      id="radio-label"
       render_content={null}
       text="label"
       title={null}
@@ -42,8 +42,8 @@ exports[`Radio component have to match snapshot 1`] = `
       <label
         aria-hidden={false}
         className="dnb-form-label"
-        htmlFor="id"
-        id="id-label"
+        htmlFor="radio"
+        id="radio-label"
       >
         label
       </label>
@@ -54,12 +54,12 @@ exports[`Radio component have to match snapshot 1`] = `
       <input
         aria-checked={false}
         aria-label="title"
-        aria-labelledby="id-label"
+        aria-labelledby="radio-label"
         checked={false}
         className="dnb-radio__input"
         direction="horizontal"
         disabled={false}
-        id="id"
+        id="radio"
         name={null}
         onChange={[Function]}
         onClick={[Function]}
@@ -113,7 +113,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
       className={null}
       direction="horizontal"
       disabled={null}
-      id={null}
+      id="group"
       label="Label"
       label_id="group"
       no_label={false}
@@ -131,7 +131,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
           className="dnb-form-row__label"
           direction={null}
           disabled={false}
-          for_id={null}
+          for_id="group"
           id="group-label"
           render_content={null}
           text="Label"
@@ -140,6 +140,7 @@ exports[`Radio group component have to match group snapshot 1`] = `
         >
           <label
             className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+            htmlFor="group"
             id="group-label"
           >
             Label
diff --git a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
index a411920ca41..476f7cc19f6 100644
--- a/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
+++ b/packages/dnb-ui-lib/src/components/slider/style/_slider.scss
@@ -19,8 +19,6 @@
       flex: none;
       align-items: flex-start; // make sure we have the label on top
 
-      // height: 100%;
-
       min-width: inherit;
       min-height: inherit;
     }
@@ -115,12 +113,9 @@
     left: 0;
     top: 50%;
 
-    // margin: 0 calc(1px - 1px - var(--slider-space));
-
     height: var(--slider-line-height);
     transform: translate3d(0, -50%, 0);
 
-    // border-radius: calc(var(--slider-line-height) / 2);
     background-color: grey;
   }
   &--vertical &__line {
@@ -130,17 +125,11 @@
     left: 50%;
     top: 0;
 
-    // margin: calc(1px - 1px - var(--slider-space)) 0;
-
     transform: translate3d(-50%, 0, 0);
   }
 
   &__line__before {
     z-index: 2;
-    // left: 1rem; // to get the
-    // margin-left: 1rem;
-    // right: -1rem;
-    // opacity: 0.2;
   }
   &__line__after {
     z-index: 1;
diff --git a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
index 03a73050ec9..a48af24c855 100644
--- a/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap
@@ -11,7 +11,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
   disabled="disabled"
   icon="icon"
   icon_position="left"
-  id="id"
+  id="toggle-button"
   label="label"
   label_position="left"
   left_component="left_component"
@@ -34,8 +34,8 @@ exports[`ToggleButton component have to match snapshot 1`] = `
       className={null}
       direction={null}
       disabled="disabled"
-      for_id="id"
-      id="id-label"
+      for_id="toggle-button"
+      id="toggle-button-label"
       render_content={null}
       text="label"
       title={null}
@@ -43,8 +43,8 @@ exports[`ToggleButton component have to match snapshot 1`] = `
     >
       <label
         className="dnb-form-label"
-        htmlFor="id"
-        id="id-label"
+        htmlFor="toggle-button"
+        id="toggle-button-label"
       >
         label
       </label>
@@ -64,7 +64,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
         icon="icon"
         icon_position="left"
         icon_size="default"
-        id="id"
+        id="toggle-button"
         innerRef={null}
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -79,7 +79,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
         <button
           aria-pressed="false"
           className="dnb-button dnb-button--secondary dnb-button--icon-position-left dnb-button--has-text dnb-button--has-icon dnb-toggle-button__button"
-          id="id"
+          id="toggle-button"
           onClick={[Function]}
           onKeyDown={[Function]}
           onKeyUp={[Function]}
@@ -106,7 +106,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
                   custom_method={null}
                   default_state={null}
                   disabled="disabled"
-                  id="id-checkbox"
+                  id="toggle-button-checkbox"
                   label={null}
                   label_position="right"
                   on_change={null}
@@ -128,7 +128,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
             icon="icon"
             icon_position="left"
             icon_size="default"
-            id="id"
+            id="toggle-button"
             innerRef={null}
             isIconOnly={false}
             onClick={[Function]}
@@ -154,7 +154,7 @@ exports[`ToggleButton component have to match snapshot 1`] = `
                 custom_method={null}
                 default_state={null}
                 disabled="disabled"
-                id="id-checkbox"
+                id="toggle-button-checkbox"
                 label={null}
                 label_position="right"
                 on_change={null}
@@ -183,8 +183,8 @@ exports[`ToggleButton component have to match snapshot 1`] = `
                         checked={false}
                         className="dnb-checkbox__input"
                         disabled="disabled"
-                        id="id-checkbox"
-                        name="id-checkbox"
+                        id="toggle-button-checkbox"
+                        name="toggle-button-checkbox"
                         onChange={[Function]}
                         onKeyDown={[Function]}
                         onMouseOut={[Function]}
@@ -284,7 +284,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
       className={null}
       direction="horizontal"
       disabled={null}
-      id={null}
+      id="group"
       label="Label"
       label_id="group"
       no_label={false}
@@ -302,7 +302,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
           className="dnb-form-row__label"
           direction={null}
           disabled={false}
-          for_id={null}
+          for_id="group"
           id="group-label"
           render_content={null}
           text="Label"
@@ -311,6 +311,7 @@ exports[`ToggleButton group component have to match group snapshot 1`] = `
         >
           <label
             className="dnb-form-label dnb-form-label--horizontal dnb-form-row__label"
+            htmlFor="group"
             id="group-label"
           >
             Label
diff --git a/packages/dnb-ui-lib/stories/components/Input.js b/packages/dnb-ui-lib/stories/components/Input.js
index 881cb041dd0..16c9afee62a 100644
--- a/packages/dnb-ui-lib/stories/components/Input.js
+++ b/packages/dnb-ui-lib/stories/components/Input.js
@@ -7,7 +7,14 @@ import React /* , { useState, useEffect } */ from 'react'
 import { Wrapper, Box } from '../helpers'
 import styled from '@emotion/styled'
 
-import { Input, InputMasked, Button } from '../../src/components'
+import {
+  Input,
+  InputMasked,
+  Button,
+  FormSet,
+  FormRow
+  // FormLabel
+} from '../../src/components'
 
 const CustomStyle = styled.div`
   p {
@@ -21,6 +28,33 @@ export default [
     <CustomStyle>
       <Wrapper>
         <Box>
+          <FormRow vertical disabled>
+            <Input label="Vertical 1:" value="Placeholder 1 ..." stretch />
+            <Input label="Vertical 2:" value="Placeholder 2 ..." stretch />
+          </FormRow>
+        </Box>
+        <Box>
+          <FormSet>
+            <FormRow
+              size
+              label="Long label labwl Adipiscing mauris dis proin nec:"
+              use_for_id
+            >
+              <Input value="Placeholder 1 ..." stretch />
+              <Input value="Placeholder 2 ..." stretch />
+            </FormRow>
+          </FormSet>
+        </Box>
+        <Box>
+          <Input
+            label="Vertical:"
+            value="Placeholder ..."
+            stretch
+            label_direction="vertical"
+          />
+        </Box>
+        <Box>
+          Text
           <Input
             selectall
             label="Label:"
@@ -30,6 +64,7 @@ export default [
           >
             Input ...
           </Input>
+          Text
         </Box>
         <Box>
           <p className="dnb-p">