diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 7cb261088e86308b5515f87d0daa9e0febd2e686..f1c4d88af5418b612566e34958c0c7215903f176 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -30,6 +30,7 @@ import { ImageComponent } from './element-components/image.component';
 import { VideoComponent } from './element-components/video.component';
 import { AudioComponent } from './element-components/audio.component';
 import { CorrectionComponent } from './element-components/compound-components/correction.component';
+import { NumberFieldComponent } from './element-components/number-field.component';
 
 @NgModule({
   imports: [
@@ -48,6 +49,7 @@ import { CorrectionComponent } from './element-components/compound-components/co
     ButtonComponent,
     TextComponent,
     TextFieldComponent,
+    NumberFieldComponent,
     TextAreaComponent,
     ImageComponent,
     AudioComponent,
diff --git a/projects/common/component-utils.ts b/projects/common/component-utils.ts
index c257cdc6cf7b576cb2f184e298bf89e74ca8c8a6..ff27332843113f1235f45076b50695c25243fbce 100644
--- a/projects/common/component-utils.ts
+++ b/projects/common/component-utils.ts
@@ -2,6 +2,7 @@ import { ComponentFactory, ComponentFactoryResolver } from '@angular/core';
 import { TextComponent } from './element-components/text.component';
 import { ButtonComponent } from './element-components/button.component';
 import { TextFieldComponent } from './element-components/text-field.component';
+import { NumberFieldComponent } from './element-components/number-field.component';
 import { TextAreaComponent } from './element-components/text-area.component';
 import { CheckboxComponent } from './element-components/checkbox.component';
 import { DropdownComponent } from './element-components/dropdown.component';
@@ -22,6 +23,8 @@ export function getComponentFactory(
       return componentFactoryResolver.resolveComponentFactory(ButtonComponent);
     case 'text-field':
       return componentFactoryResolver.resolveComponentFactory(TextFieldComponent);
+    case 'number-field':
+      return componentFactoryResolver.resolveComponentFactory(NumberFieldComponent);
     case 'text-area':
       return componentFactoryResolver.resolveComponentFactory(TextAreaComponent);
     case 'checkbox':
diff --git a/projects/common/element-components/number-field.component.ts b/projects/common/element-components/number-field.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57f55d7458a09505518e8ca3c1d5353e7bcd1f24
--- /dev/null
+++ b/projects/common/element-components/number-field.component.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { NumberFieldElement } from '../unit';
+import { FormElementComponent } from '../form-element-component.directive';
+
+@Component({
+  selector: 'app-number-field',
+  template: `
+    <mat-form-field [style.width.px]="elementModel.width"
+                    [style.height.px]="elementModel.height"
+                    [style.background-color]="elementModel.backgroundColor"
+                    [style.color]="elementModel.fontColor"
+                    [style.font-family]="elementModel.font"
+                    [style.font-size.px]="elementModel.fontSize"
+                    [style.font-weight]="elementModel.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+      <input matInput [formControl]="elementFormControl" type="number"
+             placeholder="{{elementModel.label}}">
+    </mat-form-field>
+  `
+})
+export class NumberFieldComponent extends FormElementComponent {
+  elementModel!: NumberFieldElement;
+}
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 3d7e1116f8420a85d52077d0611d8b6b950d7074..5fc6eee6bbcb10468bf0f5664a007c769f6afa37 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -14,7 +14,8 @@ import { FormElementComponent } from '../form-element-component.directive';
                     [style.font-weight]="elementModel.bold ? 'bold' : ''"
                     [style.font-style]="elementModel.italic ? 'italic' : ''"
                     [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-      <input matInput [formControl]="elementFormControl"
+      <input matInput type="text"
+             [formControl]="elementFormControl"
              placeholder="{{elementModel.label}}">
     </mat-form-field>
   `
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 6ef04adeb8598dc50a842c772d7d22df6c4e9acb..abc86e3ebc44f8cf830dba5be2c356c74fecf664 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -65,6 +65,10 @@ export interface TextFieldElement extends InputUIElement, TextUIElement, Surface
   value: string;
 }
 
+export interface NumberFieldElement extends InputUIElement, TextUIElement, SurfaceUIElement {
+  value: number;
+}
+
 export interface TextAreaElement extends InputUIElement, TextUIElement, SurfaceUIElement {
   value: string;
   resizeEnabled: boolean;
diff --git a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
index 646d1bc48c6795dba91f0022b5c49efa0d64cc38..b91c56a6ce6f49bade4c541aace359d212940fdc 100644
--- a/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/ui-element-toolbox/ui-element-toolbox.component.html
@@ -16,6 +16,10 @@
         <mat-icon>text_fields</mat-icon>
         Eingabefeld
       </button>
+      <button mat-raised-button (click)="addUIElement('number-field')">
+        <mat-icon>pin</mat-icon>
+        Eingabefeld (Zahlen)
+      </button>
       <button mat-raised-button (click)="addUIElement('text-area')">
         <mat-icon>notes</mat-icon>
         Eingabefeld (mehrzeilig)
diff --git a/projects/editor/src/app/model/UnitFactory.ts b/projects/editor/src/app/model/UnitFactory.ts
index b0417927ebc3d55d2f90e7e1d4728d3ad7d23a04..3ff2861ad9445307be171226ea12db539c716db3 100644
--- a/projects/editor/src/app/model/UnitFactory.ts
+++ b/projects/editor/src/app/model/UnitFactory.ts
@@ -3,7 +3,7 @@ import {
   CheckboxElement, CompoundElementCorrection, DropdownElement,
   ImageElement, TextElement, RadioButtonGroupElement, SurfaceUIElement,
   TextFieldElement, TextUIElement, Unit, UnitPage, UnitPageSection, UnitUIElement,
-  VideoElement, InputUIElement, TextAreaElement
+  VideoElement, InputUIElement, TextAreaElement, NumberFieldElement
 } from '../../../../common/unit';
 
 export function createUnit(): Unit {
@@ -94,6 +94,14 @@ export function createTextfieldElement(): TextFieldElement {
   };
 }
 
+export function createNumberfieldElement(): NumberFieldElement {
+  return <NumberFieldElement>{
+    ...createTextUIElement('number-field'),
+    ...createSurfaceUIElement(),
+    ...createInputUIElement('Example Label', undefined)
+  };
+}
+
 export function createTextareaElement(): TextAreaElement {
   return <TextAreaElement>{
     resizeEnabled: false,
diff --git a/projects/editor/src/app/unit.service.ts b/projects/editor/src/app/unit.service.ts
index 40c1207422d3be947884669b0441834e1a1c5a3a..6381b18ddbd50e4e449c8d64e4c4983652156e08 100644
--- a/projects/editor/src/app/unit.service.ts
+++ b/projects/editor/src/app/unit.service.ts
@@ -133,6 +133,9 @@ export class UnitService {
       case 'text-field':
         newElement = UnitFactory.createTextfieldElement();
         break;
+      case 'number-field':
+        newElement = UnitFactory.createNumberfieldElement();
+        break;
       case 'text-area':
         newElement = UnitFactory.createTextareaElement();
         break;