diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
index 418a740acac..1d94374cb47 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx
@@ -1,9 +1,11 @@
 import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import { Slider, Grid } from '@dnb/eufemia/src'
 import { Field, FormError } from '@dnb/eufemia/src/extensions/forms'
+import React from 'react'
 
 export const Empty = () => {
   return (
-    <ComponentBox>
+    <ComponentBox data-visual-test="number-input">
       <Field.Number
         onFocus={(value) => console.log('onFocus', value)}
         onBlur={(value) => console.log('onBlur', value)}
@@ -104,7 +106,8 @@ export const HorizontalLayout = () => {
 
 export const Widths = () => {
   return (
-    <ComponentBox>
+    <ComponentBox hideCode>
+      <h4 className="dnb-lead">Without step controls</h4>
       <Field.Number
         label="Default width (property omitted)"
         value={123}
@@ -134,6 +137,41 @@ export const Widths = () => {
         width="stretch"
         onChange={(value) => console.log('onChange', value)}
       />
+      <h4 className="dnb-lead">With step controls</h4>
+      <Field.Number
+        showStepControls
+        label="Default width (property omitted)"
+        value={123}
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        showStepControls
+        label="Small"
+        value={123}
+        width="small"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        showStepControls
+        label="Medium"
+        value={123}
+        width="medium"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        showStepControls
+        label="Large"
+        value={123}
+        width="large"
+        onChange={(value) => console.log('onChange', value)}
+      />
+      <Field.Number
+        showStepControls
+        label="Stretch"
+        value={123}
+        width="stretch"
+        onChange={(value) => console.log('onChange', value)}
+      />
     </ComponentBox>
   )
 }
@@ -244,3 +282,87 @@ export const ValidateMaximumCustomError = () => {
     </ComponentBox>
   )
 }
+
+export const WithStepControls = () => (
+  <ComponentBox data-visual-test="number-input-step-controls">
+    <Field.Number
+      showStepControls
+      minimum={0}
+      maximum={100}
+      step={10}
+      value={50}
+    />
+  </ComponentBox>
+)
+
+export const WithStepControlsError = () => (
+  <ComponentBox
+    scope={{ FormError }}
+    data-visual-test="number-input-step-controls-error"
+  >
+    <Field.Number
+      showStepControls
+      maximum={100}
+      value={150}
+      error={new FormError('You done messed up, A-a-ron!')}
+    />
+  </ComponentBox>
+)
+
+export const WithStepControlsDisabled = () => (
+  <ComponentBox
+    scope={{ FormError }}
+    data-visual-test="number-input-step-controls-disabled"
+  >
+    <Field.Number showStepControls disabled />
+  </ComponentBox>
+)
+
+export const WithSlider = () => (
+  <ComponentBox hideCode>
+    {() => {
+      const Component = () => {
+        const [value, setValue] = React.useState(50000)
+        const settings = {
+          min: 0,
+          max: 100000,
+          step: 1000,
+        }
+        return (
+          <Grid.Container>
+            <Grid.Item
+              span={{
+                small: [1, 12],
+                medium: [1, 4],
+                large: [1, 3],
+              }}
+            >
+              <Field.Number
+                showStepControls
+                minimum={settings.min}
+                maximum={settings.max}
+                step={settings.step}
+                value={value}
+                onChange={(value) => setValue(value)}
+                width="stretch"
+                bottom="small"
+              />
+              <Slider
+                min={settings.min}
+                max={settings.max}
+                step={settings.step}
+                value={value}
+                onChange={({ value }) =>
+                  setValue(parseFloat(String(value)))
+                }
+                hideButtons
+                tooltip
+              />
+            </Grid.Item>
+          </Grid.Container>
+        )
+      }
+      return <Component />
+    }}
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
index 963824edfa8..bcb0687b8ae 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx
@@ -26,10 +26,6 @@ import * as Examples from './Examples'
 
 <Examples.Alignment />
 
-### With help
-
-<Examples.WithHelp />
-
 ### Horizontal layout
 
 <Examples.HorizontalLayout />
@@ -38,6 +34,18 @@ import * as Examples from './Examples'
 
 <Examples.Widths />
 
+### With help
+
+<Examples.WithHelp />
+
+### With step controls
+
+<Examples.WithStepControls />
+
+### With step controls in conjunction with Slider
+
+<Examples.WithSlider />
+
 ### Disabled
 
 <Examples.Disabled />
@@ -69,3 +77,8 @@ import * as Examples from './Examples'
 ### Percentage
 
 <Examples.Percentage />
+
+<VisibleWhenVisualTest>
+  <Examples.WithStepControlsError />
+  <Examples.WithStepControlsDisabled />
+</VisibleWhenVisualTest>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
index 712dc48962a..9a034ff41a0 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
+++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
@@ -8,24 +8,27 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
 
 ### Component-specific props
 
-| Property                                | Type                | Description                                                                                                                                               |
-| --------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `thousandSeparator`                     | `string`            | _(optional)_ Character to use for separating every three digits.                                                                                          |
-| `decimalSymbol`                         | `string`            | _(optional)_ What character to use for separating digits and decimals. Defaults to ','.                                                                   |
-| `decimals`                              | `number`            | _(optional)_ Max number of decimals. Values with more decimals will be rounded.                                                                           |
-| `fixedDecimals`                         | `number`            | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less.                                           |
-| `percent`                               | `boolean`           | _(optional)_ Format a number as percentage.                                                                                                               |
-| `prefix`                                | `string`            | _(optional)_ Text added before the value input.                                                                                                           |
-| `suffix`                                | `string`            | _(optional)_ Text added after the value input.                                                                                                            |
-| `minimum`                               | `number`            | _(optional)_ Validation for inclusive minimum number value (greater than or equal).                                                                       |
-| `maximum`                               | `number`            | _(optional)_ Validation for inclusive maximum number value (less than or equal).                                                                          |
-| `exclusiveMinimum`                      | `number`            | _(optional)_ Validation for exclusive minimum number value (greater than).                                                                                |
-| `exclusiveMaximum`                      | `number`            | _(optional)_ Validation for exclusive maximum number value (less than).                                                                                   |
-| `multipleOf`                            | `number`            | _(optional)_ Validation that requires the number to be a multiple of given value.                                                                         |
-| `width`                                 | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
-| `align`                                 | `string`            | _(optional)_ Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.                                                 |
-| `help`                                  | `object`            | _(optional)_ Provide a help button. Object consisting of `title` and `contents`.                                                                          |
-| `autoComplete`                          | `on` or `string`    | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).                             |
-| [Space](/uilib/layout/space/properties) | Various             | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                                                                     |
+| Property                                | Type                 | Description                                                                                                                                                     |
+| --------------------------------------- | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `thousandSeparator`                     | `string`             | _(optional)_ Character to use for separating every three digits.                                                                                                |
+| `decimalSymbol`                         | `string`             | _(optional)_ What character to use for separating digits and decimals. Defaults to ','.                                                                         |
+| `decimals`                              | `number`             | _(optional)_ Max number of decimals. Values with more decimals will be rounded.                                                                                 |
+| `fixedDecimals`                         | `number`             | _(optional)_ Fixed number of decimals. Will round numbers with more decimals, and add trailing zeros when less.                                                 |
+| `percent`                               | `boolean`            | _(optional)_ Format a number as percentage.                                                                                                                     |
+| `prefix`                                | `string`             | _(optional)_ Text added before the value input.                                                                                                                 |
+| `suffix`                                | `string`             | _(optional)_ Text added after the value input.                                                                                                                  |
+| `minimum`                               | `number`             | _(optional)_ Validation for inclusive minimum number value (greater than or equal).                                                                             |
+| `maximum`                               | `number`             | _(optional)_ Validation for inclusive maximum number value (less than or equal).                                                                                |
+| `exclusiveMinimum`                      | `number`             | _(optional)_ Validation for exclusive minimum number value (greater than).                                                                                      |
+| `exclusiveMaximum`                      | `number`             | _(optional)_ Validation for exclusive maximum number value (less than).                                                                                         |
+| `multipleOf`                            | `number`             | _(optional)_ Validation that requires the number to be a multiple of given value.                                                                               |
+| `width`                                 | `string` or `false`  | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width.       |
+| `size`                                  | `string` or `number` | _(optional)_ Size of the input field, see Input's properties for available options. Accepts, but will not forward `number` values as input's element attribute. |
+| `align`                                 | `string`             | _(optional)_ Lateral alignment of contents of input field, one of `left` (default), `center`, or `right`.                                                       |
+| `help`                                  | `object`             | _(optional)_ Provide a help button. Object consisting of `title` and `contents`.                                                                                |
+| `autoComplete`                          | `on` or `string`     | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).                                   |
+| `step`                                  | `number`             | _(optional)_ Determines step granularity when in/decreasing value input through step controls buttons or arrow keys.                                            |
+| `showStepControls`                      | `boolean`            | _(optional)_ Show buttons that in/decreases value input by the step value.                                                                                      |
+| [Space](/uilib/layout/space/properties) | Various              | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                                                                           |
 
 <DataValueReadwriteProperties type="number" />
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 50ef5e14e98..03ee914aaa4 100644
--- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -357,6 +357,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -453,6 +454,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -507,6 +514,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
@@ -1705,6 +1718,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1801,6 +1815,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -1855,6 +1875,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
index 2bfff9bdcc5..667a3ad624a 100644
--- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
index 31bd9815bf9..f967354fa6c 100644
--- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -343,6 +343,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -439,6 +440,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -493,6 +500,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
@@ -763,6 +776,7 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex
 
 .dnb-button {
   --button-background--focus: var(--sb-color-blue-light-3);
+  --button-border-radius--control-button: 3rem;
   --button-primary-shadow: var(--sb-shadow-medium);
   --button-primary-shadow--hover: var(--sb-shadow-medium);
   --button-primary-color: var(--sb-color-white);
@@ -849,6 +863,17 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) {
   color: var(--button-secondary-color--active);
   background-color: var(--button-secondary-background--active);
 }
+.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before, .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after {
+  box-shadow: none;
+  border: none;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]) {
+  box-shadow: none;
+  border: none;
+}
 html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:focus-visible[disabled] {
   cursor: not-allowed;
 }
@@ -1349,10 +1374,21 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large {
+.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button):not(.dnb-button--control-before):not(.dnb-button--control-after).dnb-button--size-large {
   width: calc(var(--button-width--large) - 0.5rem);
   line-height: calc(var(--button-height--large) - 0.5rem);
 }
+.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before, .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after {
+  box-shadow: none;
+  border: none;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]) {
+  box-shadow: none;
+  border: none;
+}
 .dnb-button--active {
   --border-color: var(--color-emerald-green);
   --border-width: 0.125rem;
diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
index 70e7b7de1b8..6b97e361397 100644
--- a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
+++ b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss
@@ -26,6 +26,7 @@
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
 
   position: relative;
 
@@ -153,6 +154,12 @@
   &--has-text#{&}--icon-position-right#{&}--size-medium {
     padding-right: 0.5rem;
   }
+  &--control-before#{&}--size-medium {
+    line-height: var(--button-height);
+  }
+  &--control-after#{&}--size-medium {
+    line-height: var(--button-height);
+  }
 
   // size large
   &--size-large {
@@ -230,6 +237,15 @@
     width: 100%;
   }
 
+  &--control-before {
+    border-radius: var(--button-border-radius--control-button) 0 0
+      var(--button-border-radius--control-button);
+  }
+  &--control-after {
+    border-radius: 0 var(--button-border-radius--control-button)
+      var(--button-border-radius--control-button) 0;
+  }
+
   &--reset {
     margin: 0;
     padding: 0;
diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss
index 4c58fdae7e9..7d1522811ff 100644
--- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss
+++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss
@@ -13,6 +13,7 @@
 .dnb-button {
   // global
   --button-background--focus: var(--sb-color-blue-light-3);
+  --button-border-radius--control-button: 3rem;
 
   // primary
   --button-primary-shadow: var(--sb-shadow-medium);
@@ -100,6 +101,15 @@
       background-color: var(--button-secondary-background--active);
     }
   }
+  &--secondary:not(#{&}--has-text)#{&}--control-before,
+  &--secondary:not(#{&}--has-text)#{&}--control-after {
+    box-shadow: none;
+    border: none;
+    @include hover() {
+      box-shadow: none;
+      border: none;
+    }
+  }
 
   &--primary,
   &--secondary {
diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
index 2e475e2c859..dfc2f2f7953 100644
--- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
+++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -77,13 +77,22 @@
       var(--color-mint-green-50)
     );
   }
-  &--secondary:not(#{&}--has-text):not(
-      #{&}--input-button
-    )#{&}--size-large {
+  &--secondary:not(#{&}--has-text):not(#{&}--input-button):not(
+      #{&}--control-before
+    ):not(#{&}--control-after)#{&}--size-large {
     // Make exception for icon button as it should be smaller than the original large button
     width: calc(var(--button-width--large) - 0.5rem);
     line-height: calc(var(--button-height--large) - 0.5rem);
   }
+  &--secondary:not(#{&}--has-text)#{&}--control-before,
+  &--secondary:not(#{&}--has-text)#{&}--control-after {
+    box-shadow: none;
+    border: none;
+    @include hover() {
+      box-shadow: none;
+      border: none;
+    }
+  }
 
   // simulate active state
   &--active {
diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 7cf5714d99a..5759b29526c 100644
--- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -357,6 +357,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -453,6 +454,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -507,6 +514,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
@@ -1612,6 +1625,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -1708,6 +1722,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -1762,6 +1782,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
@@ -2215,6 +2241,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -2311,6 +2338,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -2365,6 +2398,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
index f12f18f1b0c..6e38ccae19f 100644
--- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -364,6 +364,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -460,6 +461,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -514,6 +521,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
index 426f99835cb..c28471b6754 100644
--- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
@@ -365,6 +365,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -461,6 +462,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -515,6 +522,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
index f5bdd3d591a..44181b10bd4 100644
--- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -436,6 +436,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -532,6 +533,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -586,6 +593,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap
index 9f4105f3f3f..2b848f86112 100644
--- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap
index 33f17efa5d7..8e8d5cfed8d 100644
--- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
index ea0eb2c2eb9..e1899f5a7b6 100644
--- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
index 1f851f29736..b20501b5bc2 100644
--- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
@@ -357,6 +357,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -453,6 +454,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -507,6 +514,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/input/Input.js b/packages/dnb-eufemia/src/components/input/Input.js
index 7a782b9a428..b689720bb27 100644
--- a/packages/dnb-eufemia/src/components/input/Input.js
+++ b/packages/dnb-eufemia/src/components/input/Input.js
@@ -505,10 +505,10 @@ export default class Input extends React.PureComponent {
         {label && (
           <FormLabel
             id={id + '-label'}
-            for_id={id}
+            forId={id}
             text={label}
-            label_direction={label_direction}
-            sr_only={label_sr_only}
+            labelDirection={label_direction}
+            srOnly={label_sr_only}
             disabled={disabled}
             skeleton={skeleton}
           />
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
index 9413e22bd4a..e399922c2a6 100644
--- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
index df741e13056..8f77824dfef 100644
--- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap
@@ -357,6 +357,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -453,6 +454,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -507,6 +514,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 1ccfa2e8088..289526cdd34 100644
--- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
index bf37f0f9dac..8548097968c 100644
--- a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
index 48ea7adf388..b313218e018 100644
--- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap
index 01e91575244..193eb2dd80e 100644
--- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
index 9f8b2ca94a9..b2764e2e027 100644
--- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap
@@ -350,6 +350,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -446,6 +447,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -500,6 +507,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
index 40d093b7a01..666a4d9a122 100644
--- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -391,6 +391,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -487,6 +488,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -541,6 +548,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
index c5e58e3858a..246af213ccb 100644
--- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
+++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
@@ -436,6 +436,7 @@ button .dnb-form-status__text {
   --button-border-radius--small: calc(var(--button-height--small) / 2);
   --button-border-radius--medium: calc(var(--button-height--medium) / 2);
   --button-border-radius--large: calc(var(--button-height--large) / 2);
+  --button-border-radius--control-button: 0.25rem;
   position: relative;
   user-select: none;
   /* stylelint-disable-next-line */
@@ -532,6 +533,12 @@ button .dnb-form-status__text {
 .dnb-button--has-text.dnb-button--icon-position-right.dnb-button--size-medium {
   padding-right: 0.5rem;
 }
+.dnb-button--control-before.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
+.dnb-button--control-after.dnb-button--size-medium {
+  line-height: var(--button-height);
+}
 .dnb-button--size-large {
   width: var(--button-width--large);
   border-radius: var(--button-border-radius--large);
@@ -586,6 +593,12 @@ button .dnb-form-status__text {
 .dnb-button--stretch {
   width: 100%;
 }
+.dnb-button--control-before {
+  border-radius: var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button);
+}
+.dnb-button--control-after {
+  border-radius: 0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0;
+}
 .dnb-button--reset {
   margin: 0;
   padding: 0;
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.screenshot.test.ts
index f91508c8c78..5cde95a38c1 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.screenshot.test.ts
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/Expiry.screenshot.test.ts
@@ -8,7 +8,7 @@ import {
   setupPageScreenshot,
 } from '../../../../../core/jest/jestSetupScreenshots'
 
-describe.each(['ui', 'sbanken'])('Anchor for %s', (themeName) => {
+describe.each(['ui', 'sbanken'])('Expiry field for %s', (themeName) => {
   setupPageScreenshot({
     themeName,
     url: '/uilib/extensions/forms/feature-fields/Expiry',
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-expiry-with-help-button.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-expiry-with-help-button.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-disabled-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-disabled-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-empty-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-empty-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-error-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-error-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-error-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-sbanken-have-to-match-the-input-filled-in-value.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-expiry-with-help-button.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-expiry-with-help-button.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-disabled-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-disabled-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-empty-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-empty-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-error-state.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-error-state.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-error-state.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png
similarity index 100%
rename from packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/anchor-for-ui-have-to-match-the-input-filled-in-value.snap.png
rename to packages/dnb-eufemia/src/extensions/forms/Field/Expiry/__tests__/__image_snapshots__/expiry-field-for-ui-have-to-match-the-input-filled-in-value.snap.png
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
index 9d8d549ea67..b291e68f76d 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -1,14 +1,16 @@
 import React, { useContext, useMemo, useCallback } from 'react'
 import { JSONSchema7 } from 'json-schema'
-import { InputMasked, HelpButton } from '../../../../components'
+import { InputMasked, HelpButton, Button } from '../../../../components'
 import { InputMaskedProps } from '../../../../components/InputMasked'
-import { InputAlign } from '../../../../components/Input'
+import type { InputAlign, InputSize } from '../../../../components/Input'
 import SharedContext from '../../../../shared/Context'
 import classnames from 'classnames'
 import FieldBlock from '../../FieldBlock'
 import { useDataValue } from '../../hooks'
 import { FieldProps, FieldHelpProps } from '../../types'
 import { pickSpacingProps } from '../../../../components/flex/utils'
+import { ButtonProps, ButtonSize } from '../../../../components/Button'
+import { clamp } from '../../../../components/slider/SliderHelpers'
 
 interface ErrorMessages {
   required?: string
@@ -26,6 +28,7 @@ export type Props = FieldHelpProps &
     currency?: InputMaskedProps['as_currency']
     percent?: InputMaskedProps['as_percent']
     mask?: InputMaskedProps['mask']
+    step?: number
     // Formatting
     thousandSeparator?: string | true
     decimalSymbol?: string
@@ -39,8 +42,10 @@ export type Props = FieldHelpProps &
     exclusiveMaximum?: number // aka less than
     multipleOf?: number
     // Styling
+    size?: InputSize
     width?: false | 'small' | 'medium' | 'large' | 'stretch'
     align?: InputAlign
+    showStepControls?: boolean
   }
 
 function NumberComponent(props: Props) {
@@ -51,11 +56,13 @@ function NumberComponent(props: Props) {
     currency,
     percent,
     mask,
+    step = 1,
     thousandSeparator,
     decimalSymbol,
     decimalLimit = 12,
     prefix,
     suffix,
+    showStepControls,
   } = props
 
   const errorMessages = useMemo(
@@ -99,11 +106,11 @@ function NumberComponent(props: Props) {
   const fromInput = useCallback(
     ({ value, numberValue }: { value: string; numberValue: number }) => {
       if (value === '') {
-        return emptyValue
+        return props.emptyValue
       }
       return numberValue
     },
-    []
+    [props.emptyValue]
   )
 
   const maskProps: Partial<InputMaskedProps> = useMemo(() => {
@@ -148,8 +155,11 @@ function NumberComponent(props: Props) {
     schema,
     toInput,
     fromInput,
+    size:
+      props.size !== 'small' && props.size !== 'large'
+        ? 'medium'
+        : props.size,
     width: props.width ?? 'medium',
-    align: props.align ?? 'left',
   }
 
   const {
@@ -164,12 +174,14 @@ function NumberComponent(props: Props) {
     labelDescription,
     labelSecondary,
     value,
+    minimum,
+    maximum,
     disabled,
     info,
     warning,
     error,
     help,
-    emptyValue,
+    size,
     width,
     align,
     handleFocus,
@@ -177,49 +189,142 @@ function NumberComponent(props: Props) {
     handleChange,
   } = useDataValue(preparedProps)
 
+  const onKeyDownHandler = useCallback(
+    ({ key, event }) => {
+      let numberValue = null
+
+      switch (key) {
+        case 'ArrowUp':
+          numberValue = clamp((value as number) + step, minimum, maximum)
+          break
+        case 'ArrowDown':
+          numberValue = clamp((value as number) - step, minimum, maximum)
+          break
+      }
+
+      if (numberValue !== null) {
+        event.persist()
+        event.preventDefault()
+        handleChange({ numberValue })
+      }
+    },
+    [handleChange, maximum, minimum, step, value]
+  )
+
+  const fieldBlockProps = {
+    className: classnames('dnb-forms-field-number', className),
+    contentClassName: classnames(
+      'dnb-forms-field-number__contents',
+      showStepControls && 'dnb-forms-field-number__contents--has-controls',
+      disabled && 'dnb-forms-field-number__contents--is-disabled',
+      error && 'dnb-forms-field-number__contents--has-error'
+    ),
+    forId: id,
+    layout,
+    label,
+    labelDescription,
+    labelSecondary,
+    info,
+    warning,
+    error,
+    disabled,
+    width: width === 'stretch' ? width : undefined,
+    contentsWidth: width !== false ? width : undefined,
+    ...pickSpacingProps(props),
+  }
+
+  const increaseProps: ButtonProps = showStepControls && {
+    'aria-hidden': true,
+    className: 'dnb-button--control-after',
+    variant: 'secondary',
+    icon: 'add',
+    size: convertInputSizeToButtonSize(size),
+    tabIndex: -1,
+    disabled: disabled || value >= maximum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp((value as number) + step, minimum, maximum),
+      })
+    },
+    title: sharedContext?.translation.Slider.addTitle?.replace(
+      '%s',
+      String(value + step)
+    ),
+  }
+
+  const decreaseProps: ButtonProps = showStepControls && {
+    ...increaseProps,
+    className: 'dnb-button--control-before',
+    icon: 'subtract',
+    disabled: disabled || value <= minimum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp((value as number) - step, minimum, maximum),
+      })
+    },
+    title: sharedContext?.translation.Slider.subtractTitle?.replace(
+      '%s',
+      String(value - step)
+    ),
+  }
+
+  const ariaParams = showStepControls && {
+    role: 'spinbutton',
+    'aria-valuemin': String(minimum),
+    'aria-valuemax': String(maximum),
+    'aria-valuenow': String(value), // without it, VO will read an invlaid value
+    'aria-valuetext': String(value), // without it, VO will read %
+  }
+
+  const inputProps = {
+    id,
+    name,
+    autoComplete,
+    className: classnames(
+      'dnb-forms-field-number__input',
+      `dnb-input--${size}`,
+      inputClassName
+    ),
+    step,
+    placeholder,
+    value,
+    align,
+    ...maskProps,
+    onKeyDown: onKeyDownHandler,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    disabled,
+    status: error ? 'error' : undefined,
+    stretch: width !== undefined,
+    suffix:
+      help && !showStepControls ? (
+        <HelpButton title={help.title}>{help.contents}</HelpButton>
+      ) : undefined,
+    ...ariaParams,
+  }
+
   return (
-    <FieldBlock
-      className={classnames('dnb-forms-field-number', className)}
-      forId={id}
-      layout={layout}
-      label={label}
-      labelDescription={labelDescription}
-      labelSecondary={labelSecondary}
-      info={info}
-      warning={warning}
-      error={error}
-      disabled={disabled}
-      width={width === 'stretch' ? width : undefined}
-      contentsWidth={width !== false ? width : undefined}
-      {...pickSpacingProps(props)}
-    >
-      <InputMasked
-        id={id}
-        name={name}
-        autoComplete={autoComplete}
-        className={classnames(
-          'dnb-forms-field-number__input',
-          inputClassName
-        )}
-        placeholder={placeholder}
-        value={value}
-        {...maskProps}
-        align={align}
-        on_focus={handleFocus}
-        on_blur={handleBlur}
-        on_change={handleChange}
-        disabled={disabled}
-        status={error ? 'error' : undefined}
-        stretch={width !== undefined}
-        suffix={
-          help ? (
-            <HelpButton title={help.title}>{help.contents}</HelpButton>
-          ) : undefined
-        }
-      />
+    <FieldBlock {...fieldBlockProps} asFieldset={false}>
+      {showStepControls && <Button {...decreaseProps} />}
+      <InputMasked {...inputProps} />
+      {showStepControls && <Button {...increaseProps} />}
+      {help && showStepControls && (
+        <HelpButton title={help.title}>{help.contents}</HelpButton>
+      )}
     </FieldBlock>
   )
 }
 
+const convertInputSizeToButtonSize = (
+  inputSize: InputSize
+): ButtonSize => {
+  const buttonSize =
+    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1
+      ? inputSize
+      : 'medium'
+  return buttonSize as ButtonSize
+}
+
 NumberComponent._supportsSpacingProps = true
 export default NumberComponent
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts
new file mode 100644
index 00000000000..8ac06292623
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.screenshot.test.ts
@@ -0,0 +1,74 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../../../../core/jest/jestSetupScreenshots'
+
+describe.each(['ui', 'sbanken'])('Number field for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/extensions/forms/base-fields/Number',
+  })
+
+  describe('with step control buttons', () => {
+    it('matches the default state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls"] .dnb-forms-field-number',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('matches the hover state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls"] .dnb-forms-field-number',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('matches the focus state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls"] .dnb-forms-field-number',
+        simulateSelector:
+          '[data-visual-test="number-input-step-controls"] .dnb-input',
+        simulate: 'focusclick',
+        waitAfterSimulate: 250,
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('matches the disabled state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls-disabled"] .dnb-forms-field-number',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('matches the control button hover state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls"] .dnb-forms-field-number',
+        simulateSelector:
+          '[data-visual-test="number-input-step-controls"] .dnb-button--control-before',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('matches the error state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="number-input-step-controls-error"] .dnb-forms-field-number',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+  })
+})
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
index 517e2109697..ed1cb7aae41 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { axeComponent, wait } from '../../../../../core/jest/jestSetup'
-import { screen, render } from '@testing-library/react'
+import { screen, render, fireEvent, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import * as Field from '../../'
 
@@ -91,7 +91,7 @@ describe('Field.Number', () => {
 
     it('formats with percent', () => {
       render(<Field.Number value={12345} percent />)
-      expect(document.querySelector('input').value).toBe('12 345 %')
+      expect(document.querySelector('input')).toHaveValue('12 345 %')
     })
 
     it('formats with same decimal limit', () => {
@@ -101,7 +101,7 @@ describe('Field.Number', () => {
 
     it('formats with smaller decimal limit', () => {
       render(<Field.Number value={5876.789} decimalLimit={2} />)
-      expect(document.querySelector('input').value).toBe('5876,78')
+      expect(document.querySelector('input')).toHaveValue('5876,78')
     })
 
     it('formats with higher decimal limit', () => {
@@ -232,6 +232,135 @@ describe('Field.Number', () => {
     })
   })
 
+  describe('with step controls', () => {
+    it('renders with control buttons', () => {
+      render(<Field.Number showStepControls />)
+      const buttons = document.querySelectorAll('.dnb-button')
+      expect(buttons.length).toBe(2)
+    })
+
+    it('controls input value correctly using control buttons', () => {
+      render(<Field.Number showStepControls value={0} step={10} />)
+      const input = document.querySelector('input')
+      const [decreaseButton, increaseButton] = Array.from(
+        document.querySelectorAll('.dnb-button')
+      )
+
+      fireEvent.click(increaseButton)
+      expect(input).toHaveValue('10')
+
+      fireEvent.click(decreaseButton)
+      expect(input).toHaveValue('0')
+    })
+
+    it('controls input value correctly using arrow keys', async () => {
+      render(<Field.Number showStepControls value={0} step={10} />)
+
+      const input = document.querySelector('input')
+
+      act(() => {
+        input.focus()
+      })
+
+      await userEvent.keyboard('{ArrowUp}')
+
+      expect(input).toHaveValue('10')
+
+      await userEvent.keyboard('{ArrowDown}')
+
+      expect(input).toHaveValue('0')
+    })
+
+    it('respects input max/min props', () => {
+      render(
+        <Field.Number
+          showStepControls
+          value={1}
+          maximum={2}
+          minimum={0}
+          step={3}
+        />
+      )
+
+      const input = document.querySelector('input')
+      const [decreaseButton, increaseButton] = Array.from(
+        document.querySelectorAll('.dnb-button')
+      )
+
+      expect(increaseButton).not.toBeDisabled()
+      expect(decreaseButton).not.toBeDisabled()
+
+      fireEvent.click(increaseButton)
+      expect(input).toHaveValue('2')
+      expect(increaseButton).toBeDisabled()
+
+      fireEvent.click(increaseButton)
+      expect(input).toHaveValue('2')
+
+      fireEvent.click(decreaseButton)
+      expect(input).toHaveValue('0')
+      expect(increaseButton).not.toBeDisabled()
+      expect(decreaseButton).toBeDisabled()
+
+      fireEvent.click(decreaseButton)
+      expect(input).toHaveValue('0')
+    })
+
+    it('has correct accessibility props', () => {
+      const settings = {
+        showStepControls: true,
+        value: 10,
+        maximum: 20,
+        minimum: 0,
+        step: 5,
+      }
+      render(<Field.Number {...settings} />)
+
+      const input = document.querySelector('.dnb-input__input')
+      const [decreaseButton, increaseButton] = Array.from(
+        document.querySelectorAll('.dnb-button')
+      )
+
+      expect(input).toHaveAttribute('role', 'spinbutton')
+      expect(input).toHaveAttribute(
+        'aria-valuemin',
+        String(settings.minimum)
+      )
+      expect(input).toHaveAttribute(
+        'aria-valuemax',
+        String(settings.maximum)
+      )
+      expect(input).toHaveAttribute(
+        'aria-valuenow',
+        String(settings.value)
+      )
+      expect(input).toHaveAttribute(
+        'aria-valuetext',
+        String(settings.value)
+      )
+
+      expect(decreaseButton).toHaveAttribute('aria-hidden', 'true')
+      expect(increaseButton).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    it('should validate with ARIA rules', async () => {
+      const element = render(
+        <Field.Number
+          label="Label"
+          showStepControls
+          value={5}
+          maximum={20}
+          minimum={10}
+          step={5}
+          required
+          validateInitially
+        />
+      )
+
+      expect(await axeComponent(element)).toHaveNoViolations()
+    })
+  })
+
   it('should validate with ARIA rules', async () => {
     const element = render(
       <Field.Number label="Label" required validateInitially />
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png
new file mode 100644
index 00000000000..8ee9b37d9b2
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-control-button-hover-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png
new file mode 100644
index 00000000000..d1e74414cba
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-default-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png
new file mode 100644
index 00000000000..7cde9351385
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-disabled-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png
new file mode 100644
index 00000000000..f23bfc5e9d8
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-error-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png
new file mode 100644
index 00000000000..f0c6a19858d
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-focus-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png
new file mode 100644
index 00000000000..f0c6a19858d
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-sbanken-with-step-control-buttons-matches-the-hover-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png
new file mode 100644
index 00000000000..810da4afd4a
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-control-button-hover-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png
new file mode 100644
index 00000000000..cb2a05a1b50
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-default-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png
new file mode 100644
index 00000000000..2f7e6200350
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-disabled-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png
new file mode 100644
index 00000000000..e07161711aa
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-error-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png
new file mode 100644
index 00000000000..db0b5c064c3
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-focus-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png
new file mode 100644
index 00000000000..db0b5c064c3
Binary files /dev/null and b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/__image_snapshots__/number-field-for-ui-with-step-control-buttons-matches-the-hover-state.snap.png differ
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.test.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.test.stories.tsx
new file mode 100644
index 00000000000..83af64dce14
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.test.stories.tsx
@@ -0,0 +1,23 @@
+import { Field } from '../../..'
+
+export default {
+  title: 'Eufemia/Extensions/Forms/Number',
+}
+
+export const Number = () => {
+  return (
+    <>
+      <Field.Number label="Label" bottom />
+      <Field.Number
+        label="Label"
+        showStepControls
+        value={5}
+        maximum={20}
+        minimum={10}
+        step={5}
+        required
+        validateInitially
+      />
+    </>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
new file mode 100644
index 00000000000..d39bd5addf6
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/dnb-number.scss
@@ -0,0 +1,176 @@
+@import '../../../../../style/core/utilities.scss';
+@import '../../style/field-sizes.scss';
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
+  );
+
+  &__contents {
+    display: flex;
+    align-items: center;
+
+    &--has-controls {
+      border-radius: 0.25rem;
+      @include fakeBorder(
+        var(--number-control-button-border-color),
+        0.0625rem
+      );
+      @include hover() {
+        @include fakeBorder(
+          var(--number-control-button-border-color),
+          0.125rem
+        );
+      }
+
+      &:focus-within {
+        html[data-whatinput='keyboard'] & {
+          @include fakeBorder(
+            var(--number-control-button-border-color--focus),
+            var(--number-control-button-border-width--focus)
+          );
+        }
+      }
+
+      .dnb-input {
+        &__shell {
+          border-radius: 0;
+          box-shadow: none;
+          @include hover() {
+            box-shadow: none;
+          }
+        }
+        &:not([data-input-state='disabled']):not(:active) {
+          // Focus
+          &[data-input-state='focus'] {
+            .dnb-input__shell {
+              @include removeFocusRing();
+            }
+          }
+        }
+      }
+
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        @include hover() {
+          background-color: var(
+            --number-control-button-background-color--hover
+          );
+          color: var(--number-control-button-color--hover);
+        }
+        @include active() {
+          background-color: var(
+            --number-control-button-background-color--active
+          );
+          color: var(--number-control-button-color--active);
+        }
+      }
+    }
+
+    &--has-controls#{&}--has-error {
+      @include fakeBorder(var(--number-control-button--error), 0.125rem);
+      @include hover() {
+        @include fakeBorder(var(--number-control-button--error), 0.125rem);
+      }
+
+      .dnb-input__status--error {
+        &:not([data-input-state='disabled']):not(:hover):not(:active) {
+          .dnb-input__shell {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        color: var(--number-control-button--error);
+        @include hover() {
+          background-color: var(--number-control-button--error-contrast);
+          color: var(--number-control-button--error);
+        }
+        @include active() {
+          background-color: var(--number-control-button--error);
+          color: var(--number-control-button--error-contrast);
+        }
+        &[disabled] {
+          color: var(--number-control-button--error-contrast);
+        }
+      }
+    }
+
+    &--has-controls#{&}--is-disabled {
+      @include fakeBorder(var(--color-black-55), 0.0625rem);
+      @include hover() {
+        @include fakeBorder(var(--color-black-55), 0.0625rem);
+      }
+
+      .dnb-input {
+        &[data-input-state='disabled'] {
+          .dnb-input__shell {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .dnb-input[data-input-state='disabled'] & {
+        @include fakeBorder(var(--color-black-55), 0.0625rem);
+      }
+
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
+        background-color: var(--color-black-3);
+        color: var(--color-black-20);
+      }
+    }
+
+    &--has-controls.dnb-forms-field-block__contents--width-small {
+      width: calc(
+        var(--forms-field-width--small) +
+          var(--forms-field-block--number-control-buttons-width--small)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--small);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-medium {
+      width: calc(
+        var(--forms-field-width--medium) +
+          var(--forms-field-block--number-control-buttons-width--medium)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--medium);
+      }
+    }
+    &--has-controls.dnb-forms-field-block__contents--width-large {
+      width: calc(
+        var(--forms-field-width--large) +
+          var(--forms-field-block--number-control-buttons-width--large)
+      );
+      .dnb-button--control-before,
+      .dnb-button--control-after {
+        width: var(--number-control-button-width--large);
+      }
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss
new file mode 100644
index 00000000000..76f11785544
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss
@@ -0,0 +1,81 @@
+@import '../../../../../../style/core/utilities.scss';
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--sb-color-purple-alternative);
+  --number-control-button-border-color--hover: var(
+    --sb-color-purple-alternative
+  );
+  --number-control-button-border-color--focus: var(--focus-ring-color);
+  --number-control-button-border-width--focus: var(--focus-ring-width);
+  --number-control-button-background-color--hover: #e0d0ff;
+  --number-control-button-color--hover: var(--sb-color-purple-alternative);
+  --number-control-button-background-color--active: #1c1b4e;
+  --number-control-button-color--active: #e0d0ff;
+  --number-control-button--error: var(--sb-color-red);
+  --number-control-button--error-contrast: var(--sb-color-magenta-light-2);
+
+  &__contents {
+    &--has-controls {
+      background-color: #1c1b4e;
+      border-radius: 3rem;
+      .dnb-input {
+        position: relative;
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0.25rem;
+          bottom: 0.25rem;
+          border-left: 0.0625rem solid #e0d0ff;
+          content: '';
+          z-index: 1;
+        }
+        &::before {
+          left: -1px;
+        }
+        &::after {
+          right: -1px;
+        }
+      }
+      .dnb-button--control-before:not(:disabled):active
+        ~ .dnb-input::before {
+        z-index: -1;
+      }
+      .dnb-button--control-after:not(:disabled):active {
+        z-index: 1;
+      }
+    }
+
+    &--has-controls#{&}--has-error {
+      .dnb-input {
+        &::before,
+        &::after {
+          border-left: 0.0625rem solid
+            var(--number-control-button--error-contrast);
+        }
+      }
+    }
+
+    &--has-controls#{&}--is-disabled {
+      @include fakeBorder(var(--sb-color-gray-dark), 0.0625rem);
+      @include hover() {
+        @include fakeBorder(var(--sb-color-gray-dark), 0.0625rem);
+      }
+      background-color: var(--sb-color-gray-light);
+      .dnb-input {
+        &__input {
+          color: var(--sb-color-gray-dark);
+        }
+        &::before,
+        &::after {
+          border-left: 0.0625rem solid var(--sb-color-gray-dark);
+        }
+      }
+
+      .dnb-button--control-before[disabled],
+      .dnb-button--control-after[disabled] {
+        color: var(--sb-color-gray-dark);
+        background-color: var(--sb-color-gray-light);
+      }
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss
new file mode 100644
index 00000000000..9269297c6dd
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss
@@ -0,0 +1,15 @@
+.dnb-forms-field-number {
+  --number-control-button-border-color: var(--color-sea-green);
+  --number-control-button-border-color--hover: var(--color-emerald-green);
+  --number-control-button-border-color--focus: var(--color-emerald-green);
+  --number-control-button-background-color--hover: var(
+    --color-mint-green-12
+  );
+  --number-control-button-color--hover: var(--color-emerald-green);
+  --number-control-button-background-color--active: var(
+    --color-mint-green-50
+  );
+  --number-control-button-color--active: var(--color-sea-green);
+  --number-control-button--error: var(--color-fire-red);
+  --number-control-button--error-contrast: var(--color-fire-red-8);
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index 296302bda72..dd843bd28f6 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -237,6 +237,10 @@ function useEnableFieldset({
   nestedFieldBlockContext,
 }) {
   return useMemo(() => {
+    if (asFieldset === false) {
+      return false
+    }
+
     let result = asFieldset
 
     if (label && !result && !nestedFieldBlockContext) {
diff --git a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
index 00f0ab9e434..2797a6ffb55 100644
--- a/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
+++ b/packages/dnb-eufemia/src/style/dnb-ui-forms.scss
@@ -7,6 +7,7 @@
 @import './core/utilities.scss';
 @import '../extensions/forms/Field/ArraySelection/style/dnb-array-selection.scss';
 @import '../extensions/forms/Field/Expiry/style/dnb-expiry.scss';
+@import '../extensions/forms/Field/Number/style/dnb-number.scss';
 @import '../extensions/forms/Field/PhoneNumber/style/dnb-phone-number.scss';
 @import '../extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss';
 @import '../extensions/forms/Field/Selection/style/dnb-selection.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
index 97040d1cc22..26eab0121c7 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-extensions.scss
@@ -14,4 +14,5 @@ $THEME_FALLBACK: 'ui';
  * You may want to update it by running "yarn build" locally.
  */
 
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
 @import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
index 40cf3603c51..036c86e84de 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/eiendom-theme-forms.scss
@@ -13,3 +13,5 @@ $THEME_FALLBACK: 'ui';
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
+
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
index 97040d1cc22..47722f81834 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-extensions.scss
@@ -14,4 +14,5 @@ $THEME_FALLBACK: 'ui';
  * You may want to update it by running "yarn build" locally.
  */
 
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
 @import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
index 40cf3603c51..7e4bcef3a1a 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-forms.scss
@@ -13,3 +13,5 @@ $THEME_FALLBACK: 'ui';
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
+
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-sbanken.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
index 897d0ae7c5d..72ac13ac6e5 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-extensions.scss
@@ -10,4 +10,5 @@
  * You may want to update it by running "yarn build" locally.
  */
 
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';
 @import '../../../extensions/payment-card/style/themes/dnb-payment-card-theme-ui.scss';
diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
index 40cf3603c51..036c86e84de 100644
--- a/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
+++ b/packages/dnb-eufemia/src/style/themes/theme-ui/ui-theme-forms.scss
@@ -13,3 +13,5 @@ $THEME_FALLBACK: 'ui';
  * NB: The content below is auto generated by the "themeFactory".
  * You may want to update it by running "yarn build" locally.
  */
+
+@import '../../../extensions/forms/Field/Number/style/themes/dnb-number-theme-ui.scss';