diff --git a/packages/ui-library/src/components/forms/number-input/index.css.ts b/packages/ui-library/src/components/forms/number-input/index.css.ts
index ec604f506..e3cf674fd 100644
--- a/packages/ui-library/src/components/forms/number-input/index.css.ts
+++ b/packages/ui-library/src/components/forms/number-input/index.css.ts
@@ -20,7 +20,7 @@ export const { tokenizedLight: wrapperLight, tokenizedDark: wrapperDark } = rend
         background-color: transparent;
       }
 
-      &.mode1 {
+      &.split {
         &.sm {
           > .custom-stepper-button {
             width: ${StepperCombo.SM.Vertical.Width};
@@ -154,7 +154,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
 
     return typeSafeNestedCss`
       .stepper-combo {
-        &.mode2 {
+        &.horizontal {
           display: grid;
           grid-template-columns: 1fr 0 1fr;
           justify-content: center;
@@ -184,7 +184,7 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           }
         }
 
-        &.mode3 {
+        &.vertical {
           display: grid;
           grid-template-rows: 1fr 0 1fr;
           justify-content: center;
@@ -239,11 +239,11 @@ export const { tokenizedLight: StepperComboLight, tokenizedDark: StepperComboDar
           cursor: not-allowed;
         }
 
-        &.mode2 {
+        &.horizontal {
           width: unset;
         }
 
-        &.mode3 {
+        &.vertical {
           width: inherit;
         }
       }
@@ -271,7 +271,7 @@ export const baseStyle = typeSafeNestedCss`
       -moz-appearance: textfield;
     }
 
-    &.mode1 {
+    &.split {
       > button:first-of-type {
         order: -2;
       }
@@ -289,8 +289,8 @@ export const baseStyle = typeSafeNestedCss`
       }
     }
 
-    &.mode2,
-    &.mode3 {
+    &.horizontal,
+    &.vertical {
       .unit.prepend {
         order: -1;
       }
diff --git a/packages/ui-library/src/components/forms/number-input/index.stories.ts b/packages/ui-library/src/components/forms/number-input/index.stories.ts
index 5417b8efa..44a7fb55b 100644
--- a/packages/ui-library/src/components/forms/number-input/index.stories.ts
+++ b/packages/ui-library/src/components/forms/number-input/index.stories.ts
@@ -36,7 +36,7 @@ const defaultParams: BlrNumberInputType = {
   totalDigits: 0,
   unit: 'kg',
   value: 0,
-  variant: 'mode3',
+  stepperVariant: 'vertical',
 };
 
 export default {
@@ -53,13 +53,12 @@ export default {
         category: 'Appearance',
       },
     },
-    variant: {
+    stepperVariant: {
       name: 'stepperVariant',
-      description: ' Choose variant of the stepper that is used in the component.',
-      options: ['mode1', 'mode2', 'mode3'],
+      description: ' Choose stepperVariant of the stepper that is used in the component.',
+      options: ['split', 'horizontal', 'vertical'],
       control: {
         type: 'radio',
-        labels: ['vertical', 'horizontal', 'split'],
       },
       table: {
         category: 'Appearance',
@@ -77,7 +76,7 @@ export default {
       name: 'value',
       description: 'Enter the value the component should have.',
       table: {
-        category: 'Content/ Settings',
+        category: 'Conten / Settings',
       },
       control: {
         type: 'number',
@@ -88,7 +87,7 @@ export default {
       name: 'decimals',
       description: 'Enter how many decimals the value of the component has.',
       table: {
-        category: 'Content/ Settings',
+        category: 'Content / Settings',
       },
       control: {
         type: 'number',
@@ -98,23 +97,35 @@ export default {
       name: 'leadingZeros',
       description: 'Enter how many leadingZeros the value of the component has.',
       table: {
-        category: 'Content/ Settings',
+        category: 'Content / Settings',
       },
       control: {
         type: 'number',
       },
     },
+
     unit: {
       name: 'unit',
       description: 'Enter the unit for the number input.',
-      options: [Units],
+      options: [undefined, ...Units],
       control: {
         type: 'select',
       },
       table: {
-        category: 'Content/ Settings',
+        category: 'Content / Settings',
       },
     },
+    //  prependUnit: {
+    //   name: 'prependUnit',
+    //   description: 'NumberInput	Content / Settings	hasUnit	Choose if unit is displayed as a prefix, suffix or if no unit should be displayed.	"none"	Radio: "none", "prefix", "suffix"	was named "prependUnit" before and did function differently	',
+    //   control: {
+    //     type: 'boolean',
+    //   },
+
+    //   table: {
+    //     category: 'Content/ Settings',
+    //   },
+    // },
     step: {
       name: 'step',
       description: 'Enter how much the value should change when the steppers buttons are used.',
@@ -142,18 +153,132 @@ export default {
       },
       table: {
         disable: false,
-        category: 'Content/ Settings',
+        category: 'Content / Settings',
       },
       if: { arg: 'hasLabel', eq: true },
     },
-
-    theme: {
-      options: Themes,
-      control: { type: 'select' },
+    labelAppendix: {
+      name: 'labelAppendix',
+      description:
+        'Enter string used as an appendix to the label. Use this to inform the user in case this field is required.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        disable: false,
+        category: 'Content / Settings',
+      },
+      if: { arg: 'hasLabel', eq: true },
+    },
+    showHint: {
+      name: 'hasHint',
+      description: ' Choose if component has a hint message. ',
+      defaultValue: true,
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        disable: false,
+        category: 'Content/ Settings',
+      },
+    },
+    hintText: {
+      name: 'hintMessage',
+      description: 'Enter string used used as hint message.',
+      if: { arg: 'showHint', eq: true },
+      table: {
+        disable: false,
+        category: 'Content/ Settings',
+      },
     },
     hintIcon: {
+      name: 'hintMessageIcon',
+      description: 'Select an icon which is displayed in front of the hint message.',
+      if: { arg: 'showHint', eq: true },
+      options: [undefined, ...PureIconKeys],
+      control: { type: 'select' },
+      table: {
+        disable: false,
+        category: 'Content / Settings',
+      },
+    },
+    disabled: {
+      name: 'disabled',
+      description:
+        'Choose if component is disabled. Prevents the user to select or change the value of this component.   ',
+      defaultValue: false,
+      table: {
+        disable: false,
+        category: 'States',
+      },
+    },
+    readonly: {
+      name: 'readonly',
+      description: 'Choose if component is readonly. The user can select but not change the value of this component.',
+      defaultValue: false,
+      table: {
+        disable: false,
+        category: 'States',
+      },
+    },
+    // Validation
+    required: {
+      name: 'required',
+      description: 'Choose if the component must hold a value after an interaction or a submit.',
+      defaultValue: false,
+      table: {
+        disable: false,
+        category: 'Validations',
+      },
+    },
+    hasError: {
+      name: 'hasError',
+      description: 'Choose if component has an error.',
+      defaultValue: false,
+      table: {
+        disable: false,
+        category: 'Validations',
+      },
+    },
+    errorMessage: {
+      name: 'errorMessage',
+      description: 'Enter string used used as error message.',
+      table: {
+        category: 'Validations',
+      },
+      if: { arg: 'hasError', eq: true },
+    },
+    errorIcon: {
+      name: 'errorMessageIcon',
+      description: 'Select an icon which is displayed in front of the error message.',
+      table: {
+        disable: false,
+        category: 'Validations',
+      },
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
+      if: { arg: 'hasError', eq: true },
+    },
+    theme: {
+      options: Themes,
+      control: { type: 'select' },
+    },
+    //Technical attributes
+    numberInputId: {
+      name: 'numberInputId',
+      description: 'Unique identifier for this component.',
+      table: {
+        disable: false,
+        category: 'Technical Attributes',
+      },
+    },
+    name: {
+      name: 'name',
+      description: 'For a < form > element, the name attribute is used as a reference when the data is submitted. ',
+      table: {
+        disable: false,
+        category: 'Technical Attributes',
+      },
     },
   },
   parameters: {
@@ -237,7 +362,7 @@ const args: BlrNumberInputType = {
   labelAppendix: '(Appendix)',
   numberInputId: ' ',
   placeholder: 'Placeholder-text',
-  prependUnit: false,
+  prependUnit: true,
   readonly: false,
   required: false,
   showHint: false,
@@ -247,7 +372,7 @@ const args: BlrNumberInputType = {
   totalDigits: 0,
   unit: 'kg',
   value: 0,
-  variant: 'mode3',
+  stepperVariant: 'vertical',
 };
 
 BlrNumberInput.args = args;
@@ -294,18 +419,69 @@ export const SizeVariant = () => {
 
 SizeVariant.storyName = 'Appearance';
 
-export const Example1 = () =>
+export const StepperVariant = () =>
   html`
-    <div style="max-width: 290px;">
+    <div class="wrapper">
+      ${BlrNumberInputRenderFunction({
+        ...defaultParams,
+        stepperVariant: 'split',
+        label: 'vertical',
+        labelAppendix: '',
+        unit: '%',
+      })}
+    </div>
+    <div class="wrapper">
+      ${BlrNumberInputRenderFunction({
+        ...defaultParams,
+        stepperVariant: 'horizontal',
+        label: 'horizontal',
+        labelAppendix: '',
+        unit: '%',
+      })}
+    </div>
+    <div class="wrapper">
       ${BlrNumberInputRenderFunction({
         ...defaultParams,
-        label: ' Default format',
+        stepperVariant: 'vertical',
+        label: 'split',
+        labelAppendix: '',
+        unit: '%',
       })}
     </div>
   `;
 
-Example1.storyName = 'Default';
+StepperVariant.storyName = 'stepperVariant';
+
+//Content/ Settings Placeholder
+/**
+ * The placeholder component can display a placeholder text. This is recommended to improve usability.
+ */
+export const Placeholder = () => {
+  return html`
+    ${sharedStyles}
+    <div class="wrapper">
+      ${BlrNumberInputRenderFunction({
+        ...defaultParams,
+        theme: 'Light',
+        size: 'md',
+        label: 'Has placeholder',
+        labelAppendix: '',
+      })}
+    </div>
+    <div class="wrapper">
+      ${BlrNumberInputRenderFunction({
+        ...defaultParams,
+        theme: 'Light',
+        size: 'md',
+        label: "Hasn't placeholder",
+        labelAppendix: '',
+        placeholder: '',
+      })}
+    </div>
+  `;
+};
 
+Placeholder.storyName = 'Content/ Settings';
 export const Example2 = () =>
   html`
     <div style="max-width: 290px;">
diff --git a/packages/ui-library/src/components/forms/number-input/index.ts b/packages/ui-library/src/components/forms/number-input/index.ts
index 88f92c631..816a17d7a 100644
--- a/packages/ui-library/src/components/forms/number-input/index.ts
+++ b/packages/ui-library/src/components/forms/number-input/index.ts
@@ -24,7 +24,7 @@ export class BlrNumberInput extends LitElement {
   protected _numberFieldNode!: HTMLInputElement;
 
   @property() numberInputId!: string;
-  @property() variant: 'mode1' | 'mode2' | 'mode3' = 'mode1';
+  @property() stepperVariant: 'split' | 'horizontal' | 'vertical' = 'split';
   @property() label!: string;
   @property() disabled?: boolean;
   @property() placeholder?: string;
@@ -98,7 +98,7 @@ export class BlrNumberInput extends LitElement {
     const buttonClass = classMap({
       'custom-stepper-button': true,
       [iconSizeVariant]: true,
-      [this.variant]: true,
+      [this.stepperVariant]: true,
     });
 
     const button = html`
@@ -115,15 +115,15 @@ export class BlrNumberInput extends LitElement {
   }
 
   protected renderMode() {
-    switch (this.variant) {
-      case 'mode1': {
+    switch (this.stepperVariant) {
+      case 'split': {
         return html`
           ${this.getButtonTemplate('blrMinus', this.stepperDown)} ${this.getButtonTemplate('blrPlus', this.stepperUp)}
         `;
       }
-      case 'mode2': {
+      case 'horizontal': {
         return html`
-          <div class="stepper-combo mode2 horizontal ${this.size}">
+          <div class="stepper-combo horizontal horizontal ${this.size}">
             ${this.getButtonTemplate('blrMinus', this.stepperDown)}
             ${BlrDividerRenderFunction({
               directionVariant: 'vertical',
@@ -133,9 +133,9 @@ export class BlrNumberInput extends LitElement {
           </div>
         `;
       }
-      case 'mode3': {
+      case 'vertical': {
         return html`
-          <div class="stepper-combo mode3 vertical ${this.size}">
+          <div class="stepper-combo vertical vertical ${this.size}">
             ${this.getButtonTemplate('blrChevronUp', this.stepperUp)}
             ${BlrDividerRenderFunction({
               directionVariant: 'horizontal',
@@ -169,7 +169,7 @@ export class BlrNumberInput extends LitElement {
         'input-wrapper': true,
         'disabled': this.disabled || false,
         [`${this.size}`]: this.size,
-        [this.variant || 'mode1']: this.variant || 'mode1',
+        [this.stepperVariant || 'split']: this.stepperVariant || 'split',
         'error-input': this.hasError || false,
       });
 
diff --git a/packages/ui-library/src/globals/constants.ts b/packages/ui-library/src/globals/constants.ts
index 57d2f6a03..8102188a1 100644
--- a/packages/ui-library/src/globals/constants.ts
+++ b/packages/ui-library/src/globals/constants.ts
@@ -22,7 +22,7 @@ export const Units = [
   'ml',
   's',
   'min',
-];
+] as const;
 export const InputTypes = ['text', 'email', 'password'] as const;
 export const ButtonGroupSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;