diff --git a/frontend/src/components/form/api/ApiNumberField.vue b/frontend/src/components/form/api/ApiNumberField.vue
new file mode 100644
index 0000000000..2ce6affc41
--- /dev/null
+++ b/frontend/src/components/form/api/ApiNumberField.vue
@@ -0,0 +1,55 @@
+<!--
+Displays a field as a e-number-field + write access via API wrapper
+-->
+
+<template>
+  <api-wrapper v-slot="wrapper" v-bind="$props" v-on="$listeners">
+    <e-number-field
+      ref="textField"
+      :value="wrapper.localValue"
+      v-bind="$attrs"
+      :path="path"
+      :readonly="wrapper.readonly"
+      :disabled="disabled"
+      :error-messages="wrapper.errorMessages"
+      :loading="wrapper.isSaving || wrapper.isLoading ? 'secondary' : false"
+      :outlined="outlined"
+      :filled="filled"
+      :dense="dense"
+      @input="wrapper.on.input"
+      @blur="wrapper.on.blur"
+    >
+      <template #append>
+        <api-wrapper-append :wrapper="wrapper" />
+      </template>
+    </e-number-field>
+  </api-wrapper>
+</template>
+
+<script>
+import { apiPropsMixin } from '@/mixins/apiPropsMixin.js'
+import ApiWrapper from './ApiWrapper.vue'
+import ApiWrapperAppend from './ApiWrapperAppend.vue'
+
+export default {
+  name: 'ApiNumberField',
+  components: { ApiWrapper, ApiWrapperAppend },
+  mixins: [apiPropsMixin],
+  props: {
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    focus() {
+      this.$refs.textField.focus()
+    },
+  },
+}
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/form/api/ApiTextField.vue b/frontend/src/components/form/api/ApiTextField.vue
index 85efad3c5d..a216138b09 100644
--- a/frontend/src/components/form/api/ApiTextField.vue
+++ b/frontend/src/components/form/api/ApiTextField.vue
@@ -3,7 +3,7 @@ Displays a field as a e-text-field + write access via API wrapper
 -->
 
 <template>
-  <api-wrapper v-slot="wrapper" :parse="parse" v-bind="$props" v-on="$listeners">
+  <api-wrapper v-slot="wrapper" v-bind="$props" v-on="$listeners">
     <e-text-field
       ref="textField"
       :value="wrapper.localValue"
@@ -48,16 +48,6 @@ export default {
     focus() {
       this.$refs.textField.focus()
     },
-    parse(input) {
-      if (
-        (this.$attrs.inputmode === 'numeric' || this.$attrs.type === 'number') &&
-        !Number.isNaN(Number(input))
-      ) {
-        return Number(input)
-      } else {
-        return input
-      }
-    },
   },
 }
 </script>
diff --git a/frontend/src/components/form/api/ApiWrapper.vue b/frontend/src/components/form/api/ApiWrapper.vue
index 64afc9c9b0..769716bf15 100644
--- a/frontend/src/components/form/api/ApiWrapper.vue
+++ b/frontend/src/components/form/api/ApiWrapper.vue
@@ -142,17 +142,20 @@ export default {
     },
   },
   watch: {
-    apiValue: function (newValue) {
-      // override local value if it wasn't dirty
-      if (!this.dirty || this.overrideDirty) {
-        this.localValue = newValue
-        this.parsedLocalValue = this.parse ? this.parse(newValue) : newValue
-      }
+    apiValue: {
+      handler: function (newValue) {
+        // override local value if it wasn't dirty
+        if (!this.dirty || this.overrideDirty) {
+          this.localValue = newValue
+          this.parsedLocalValue = this.parse ? this.parse(newValue) : newValue
+        }
 
-      // clear dirty if outside value changes to same as local value (e.g. after save operation)
-      if (this.parsedLocalValue === newValue) {
-        this.dirty = false
-      }
+        // clear dirty if outside value changes to same as local value (e.g. after save operation)
+        if (this.parsedLocalValue === newValue) {
+          this.dirty = false
+        }
+      },
+      immediate: true,
     },
   },
   created() {
diff --git a/frontend/src/components/form/api/__tests__/ApiNumberField.spec.js b/frontend/src/components/form/api/__tests__/ApiNumberField.spec.js
new file mode 100644
index 0000000000..8ed1a0a2e6
--- /dev/null
+++ b/frontend/src/components/form/api/__tests__/ApiNumberField.spec.js
@@ -0,0 +1,95 @@
+import ApiNumberField from '../ApiNumberField.vue'
+import ApiWrapper from '@/components/form/api/ApiWrapper.vue'
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import flushPromises from 'flush-promises'
+import formBaseComponents from '@/plugins/formBaseComponents'
+import merge from 'lodash/merge'
+import { ApiMock } from '@/components/form/api/__tests__/ApiMock'
+import { i18n } from '@/plugins'
+import { mount as mountComponent } from '@vue/test-utils'
+import { waitForDebounce } from '@/test/util'
+
+Vue.use(Vuetify)
+Vue.use(formBaseComponents)
+
+describe('An ApiNumberField', () => {
+  let vuetify
+  let wrapper
+  let apiMock
+
+  const path = 'test-field/123'
+  const NUMBER_1 = 1.2
+  const NUMBER_1_string = '1.2'
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+    apiMock = ApiMock.create()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+    wrapper.destroy()
+  })
+
+  const mount = (options) => {
+    const app = Vue.component('App', {
+      components: { ApiNumberField },
+      props: {
+        path: { type: String, default: path },
+      },
+      template: `<div data-app>
+            <api-number-field
+              :auto-save="false"
+              :path="path"
+              uri="test-field/123"
+              label="Test field"
+              required="true"
+            />
+          </div>`,
+    })
+    apiMock.get().thenReturn(ApiMock.success(NUMBER_1).forPath(path))
+    const defaultOptions = {
+      mocks: {
+        $tc: () => {},
+        api: apiMock.getMocks(),
+      },
+    }
+    return mountComponent(app, {
+      vuetify,
+      i18n,
+      attachTo: document.body,
+      ...merge(defaultOptions, options),
+    })
+  }
+
+  test('triggers api.patch and status update if input changes', async () => {
+    apiMock.patch().thenReturn(ApiMock.success(NUMBER_1))
+    wrapper = mount()
+
+    await flushPromises()
+
+    const input = wrapper.find('input')
+    await input.setValue(NUMBER_1)
+    await input.trigger('submit')
+
+    await waitForDebounce()
+    await flushPromises()
+
+    expect(apiMock.getMocks().patch).toBeCalledTimes(1)
+    expect(wrapper.findComponent(ApiWrapper).vm.parsedLocalValue).toBe(NUMBER_1)
+  })
+
+  test('updates state if value in store is refreshed and has new value', async () => {
+    wrapper = mount()
+    apiMock.get().thenReturn(ApiMock.success(NUMBER_1).forPath(path))
+
+    wrapper.findComponent(ApiWrapper).vm.reload()
+
+    await waitForDebounce()
+    await flushPromises()
+
+    expect(wrapper.findComponent(ApiWrapper).vm.parsedLocalValue).toBe(NUMBER_1)
+    expect(wrapper.find('input[type=text]').element.value).toBe(NUMBER_1_string)
+  })
+})
diff --git a/frontend/src/components/form/api/__tests__/ApiTextField.spec.js b/frontend/src/components/form/api/__tests__/ApiTextField.spec.js
index 46afcb10a7..35e5c452e2 100644
--- a/frontend/src/components/form/api/__tests__/ApiTextField.spec.js
+++ b/frontend/src/components/form/api/__tests__/ApiTextField.spec.js
@@ -21,8 +21,6 @@ describe('An ApiTextField', () => {
   const path = 'test-field/123'
   const TEXT_1 = 'some text'
   const TEXT_2 = 'another text'
-  const NUMBER_1 = 1.2
-  const NUMBER_1_string = '1.2'
 
   beforeEach(() => {
     vuetify = new Vuetify()
@@ -34,24 +32,13 @@ describe('An ApiTextField', () => {
     wrapper.destroy()
   })
 
-  const mount = (options, number = false) => {
+  const mount = (options) => {
     const app = Vue.component('App', {
       components: { ApiTextField },
       props: {
         path: { type: String, default: path },
       },
-      template: number
-        ? `<div data-app>
-            <api-text-field
-              :auto-save="false"
-              :path="path"
-              uri="test-field/123"
-              label="Test field"
-              required="true"
-              inputmode="numeric"
-            />
-          </div>`
-        : `<div data-app>
+      template: `<div data-app>
             <api-text-field
               :auto-save="false"
               :path="path"
@@ -107,36 +94,4 @@ describe('An ApiTextField', () => {
       expect(wrapper.find('input[type=text]').element.value).toBe(TEXT_2)
     })
   })
-
-  describe('number', () => {
-    test('triggers api.patch and status update if input changes', async () => {
-      apiMock.patch().thenReturn(ApiMock.success(NUMBER_1))
-      wrapper = mount({}, true)
-
-      await flushPromises()
-
-      const input = wrapper.find('input')
-      await input.setValue(NUMBER_1)
-      await input.trigger('submit')
-
-      await waitForDebounce()
-      await flushPromises()
-
-      expect(apiMock.getMocks().patch).toBeCalledTimes(1)
-      expect(wrapper.findComponent(ApiWrapper).vm.parsedLocalValue).toBe(NUMBER_1)
-    })
-
-    test('updates state if value in store is refreshed and has new value', async () => {
-      wrapper = mount({}, true)
-      apiMock.get().thenReturn(ApiMock.success(NUMBER_1).forPath(path))
-
-      wrapper.findComponent(ApiWrapper).vm.reload()
-
-      await waitForDebounce()
-      await flushPromises()
-
-      expect(wrapper.findComponent(ApiWrapper).vm.parsedLocalValue).toBe(NUMBER_1)
-      expect(wrapper.find('input[type=text]').element.value).toBe(NUMBER_1_string)
-    })
-  })
 })
diff --git a/frontend/src/components/form/base/ENumberField.vue b/frontend/src/components/form/base/ENumberField.vue
new file mode 100644
index 0000000000..b56b4c8887
--- /dev/null
+++ b/frontend/src/components/form/base/ENumberField.vue
@@ -0,0 +1,72 @@
+<template>
+  <EParseField
+    ref="input"
+    :value="value"
+    :format="format"
+    :parse="parse"
+    :input-filter="inputFilter"
+    :required="required"
+    :vee-id="veeId"
+    :vee-rules="veeRules"
+    reset-on-blur
+    v-bind="$attrs"
+    @input="$emit('input', $event)"
+  >
+    <!-- passing through all slots -->
+    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template #scoped="{ scopedSlots }">
+      <template v-for="(_, name) in scopedSlots" :slot="name" slot-scope="slotData">
+        <slot :name="name" v-bind="slotData" />
+      </template>
+    </template>
+  </EParseField>
+</template>
+
+<script>
+import { formComponentMixin } from '@/mixins/formComponentMixin.js'
+
+export default {
+  name: 'ENumberField',
+  mixins: [formComponentMixin],
+  props: {
+    value: { type: [String, Number], required: false, default: null },
+  },
+  emits: ['input'],
+  methods: {
+    format(value) {
+      switch (value) {
+        case null:
+          return ''
+        default:
+          return value + ''
+      }
+    },
+    inputFilter(value) {
+      if (/\d/.test(value) && value.match(/^[^,]*,[^,.]+$/g)) {
+        value = value.replace(/\./g, '').replace(/,/g, '.')
+      }
+
+      // Remove all dots except the first one
+      let firstDotFound = false
+      value = value.replace(/\./g, (match) =>
+        firstDotFound ? '' : (firstDotFound = match)
+      )
+
+      // Remove everything except numbers, dots and the first minus sign
+      const negative = value.startsWith('-')
+      value = value.replace(/[^0-9.]/g, '')
+      value = negative ? '-' + value : value
+      return value
+    },
+    /**
+     * @param {string} value
+     */
+    parse(value) {
+      return isNaN(parseFloat(value)) || /^\.0*$/.test(value) ? null : parseFloat(value)
+    },
+    focus() {
+      this.$refs.input.focus()
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/form/base/EParseField.vue b/frontend/src/components/form/base/EParseField.vue
new file mode 100644
index 0000000000..9c3c6be6f8
--- /dev/null
+++ b/frontend/src/components/form/base/EParseField.vue
@@ -0,0 +1,180 @@
+<!--
+Displays a field as a textfield (can be used with v-model)
+-->
+
+<template>
+  <ValidationProvider
+    v-slot="{ errors: veeErrors }"
+    ref="validationProvider"
+    tag="div"
+    :name="validationLabel"
+    :vid="veeId ?? path"
+    :rules="veeRules"
+    :required="required"
+    class="e-form-container"
+  >
+    <v-text-field
+      ref="textField"
+      v-bind="$attrs"
+      :value="stringValue"
+      :filled="filled"
+      :required="required"
+      :hide-details="hideDetails"
+      :error-messages="veeErrors.concat(combinedErrorMessages)"
+      :label="labelOrEntityFieldLabel"
+      :class="[inputClass]"
+      type="text"
+      v-on="inputListeners"
+    >
+      <!-- passing through all slots -->
+      <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+      <slot name="scoped" :scoped-slots="$scopedSlots">
+        <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
+          <slot :name="name" v-bind="slotData" />
+        </template>
+      </slot>
+    </v-text-field>
+  </ValidationProvider>
+</template>
+
+<script>
+import { debounce } from 'lodash'
+import { formComponentPropsMixin } from '@/mixins/formComponentPropsMixin.js'
+import { ValidationProvider } from 'vee-validate'
+import { formComponentMixin } from '@/mixins/formComponentMixin.js'
+
+export default {
+  name: 'EParseField',
+  components: { ValidationProvider },
+  mixins: [formComponentPropsMixin, formComponentMixin],
+  props: {
+    value: { validator: () => true, required: true },
+    readonly: { type: Boolean, required: false, default: false },
+    disabled: { type: Boolean, required: false, default: false },
+    errorMessages: { type: Array, required: false, default: () => [] },
+
+    /**
+     * Debounce the parse function to avoid unnecessary calls and invalid values
+     */
+    debouncedParse: { type: Boolean, default: false },
+
+    resetOnBlur: { type: Boolean, default: false },
+
+    /**
+     * Format internal value for display in the UI
+     */
+    format: { type: Function, required: false, default: null },
+
+    /**
+     * Parse a user-supplied value into the internal format
+     */
+    parse: { type: Function, required: false, default: null },
+
+    /**
+     * Remove unwanted characters from the input value
+     */
+    inputFilter: { type: Function, required: false, default: null },
+  },
+  data() {
+    return {
+      /**
+       * string displayed in the text field
+       */
+      stringValue: null,
+
+      /**
+       * valid value (parsed type or null)
+       */
+      localValue: null,
+
+      parseError: null,
+
+      /**
+       * note that it is necessary to debounce in data to have one debounced function per instance, whereas
+       * debouncing in watch or methods results in one global debounced function which has unwanted effects
+       * when there are multiple instances rendered at the same time
+       */
+      debounceParseValue: debounce(this.parseValue, 500),
+    }
+  },
+  computed: {
+    combinedErrorMessages() {
+      if (this.parseError == null) {
+        return this.errorMessages
+      }
+      return [...this.errorMessages, this.parseError.message]
+    },
+    inputListeners: function () {
+      const vm = this
+      return Object.assign(
+        {},
+        // attach all $parent listeners
+        this.$listeners,
+        // override @input listener for correct handling of numeric values
+        {
+          input: vm.onInput,
+          blur: vm.onBlur,
+        }
+      )
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        // if the value is the same, we don't need to parse it again
+        this.parseError = null
+        if (val === this.localValue) {
+          return
+        }
+        this.localValue = val
+        this.stringValue = this.format?.(val) ?? val
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    onInput(value) {
+      if (this.inputFilter) {
+        value = this.inputFilter(value)
+        this.stringValue = value
+        this.$refs.textField.lazyValue = value
+      }
+      if (this.debouncedParse) {
+        this.debounceParseValue(value)
+      } else {
+        this.parseValue(value)
+      }
+    },
+    onBlur(event) {
+      if (this.resetOnBlur) {
+        this.stringValue = this.format?.(this.localValue) ?? this.localValue
+      }
+      this.$emit('blur', event)
+    },
+    setValue(val) {
+      if (
+        (this.parse?.(this.localValue) ?? this.localValue) !== (this.parse?.(val) ?? val)
+      ) {
+        this.localValue = val
+
+        this.$emit('input', val)
+      }
+    },
+    async parseValue(val) {
+      try {
+        if (this.parse != null) {
+          val = await this.parse(val)
+        }
+        this.setValue(val)
+        // after saving value, trigger validations
+        this.$refs.validationProvider.validate(this.localValue)
+      } catch (error) {
+        this.parseError = error
+      }
+    },
+    focus() {
+      this.$refs.textField.focus()
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/form/base/__tests__/ENumberField.spec.js b/frontend/src/components/form/base/__tests__/ENumberField.spec.js
new file mode 100644
index 0000000000..c32136c176
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/ENumberField.spec.js
@@ -0,0 +1,113 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+import formBaseComponents from '@/plugins/formBaseComponents'
+
+import { mount as mountComponent } from '@vue/test-utils'
+import ENumberField from '../ENumberField.vue'
+
+Vue.use(Vuetify)
+Vue.use(formBaseComponents)
+
+describe('An ENumberField', () => {
+  let vuetify
+
+  const mount = (options) => {
+    const app = Vue.component('App', {
+      components: { ENumberField },
+      data: function () {
+        return {
+          data: null,
+        }
+      },
+      template: `<div data-app><e-number-field label="test" v-model="data"/></div>`,
+    })
+    return mountComponent(app, { vuetify, attachTo: document.body, ...options })
+  }
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })
+
+  test('looks like a numberfield', async () => {
+    const wrapper = mount()
+    expect(wrapper).toMatchSnapshot('empty')
+
+    await wrapper.setData({ data: 3.14 })
+    expect(wrapper).toMatchSnapshot('with text')
+  })
+
+  test('updates text when vModel changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input').element
+    expect(input.value).toBeDefined()
+
+    const firstNumber = 0
+    await wrapper.setData({ data: firstNumber })
+    expect(input.value).toBe(`${firstNumber}`)
+
+    const secondNumber = 3.14
+    await wrapper.setData({ data: secondNumber })
+    expect(input.value).toBe(`${secondNumber}`)
+  })
+
+  test('updates vModel when value of input field changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+    const number = 3.14
+
+    input.element.value = `${number}`
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(number)
+  })
+
+  test('updates vModel with null or valid numbers', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+
+    expect(wrapper.vm.data).toBeNull()
+
+    input.element.value = '.'
+    await input.trigger('input')
+    expect(wrapper.vm.data).toBeNull()
+
+    input.element.value = '.0'
+    await input.trigger('input')
+    expect(wrapper.vm.data).toBeNull()
+
+    input.element.value = '.01'
+    await input.trigger('input')
+    expect(wrapper.vm.data).toBe(0.01)
+  })
+
+  test.each([
+    ['1', 1],
+    ['1.', 1],
+    ['1..2', 1.2],
+    ['39.5.', 39.5],
+    ["2'000", 2000],
+    ['8.000.000,20', 8000000.2],
+    ['10e3', 103],
+    ['2kg', 2],
+    ['8,000.20', 8000.2],
+    ['abc123', 123],
+    ['Hello, World?', null],
+    ['eCamp. Super!', null],
+    ['+123..456..789', 123.456789],
+    ['-10', -10],
+    ['2-4 Stück', 24],
+    ['-0', -0],
+    ['.', null],
+    ['.a', null],
+    ['.a02', 0.02],
+  ])('parses "%s" as "%s"', async (string, expected) => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+
+    input.element.value = string
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(expected)
+  })
+})
diff --git a/frontend/src/components/form/base/__tests__/EParseField.spec.js b/frontend/src/components/form/base/__tests__/EParseField.spec.js
new file mode 100644
index 0000000000..fa00651132
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/EParseField.spec.js
@@ -0,0 +1,89 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+import formBaseComponents from '@/plugins/formBaseComponents'
+
+import EParseField from '@/components/form/base/EParseField.vue'
+import { mount as mountComponent } from '@vue/test-utils'
+
+Vue.use(Vuetify)
+Vue.use(formBaseComponents)
+
+describe('An EParseField', () => {
+  let vuetify
+
+  const mount = (options) => {
+    const app = Vue.component('App', {
+      components: { EParseField },
+      data: function () {
+        return {
+          data: null,
+        }
+      },
+      methods: {
+        parse: (value) => {
+          return value === 'true' ? true : value === 'false' ? false : null
+        },
+        format: (value) => {
+          return value === null ? '' : `${value}`
+        },
+      },
+      template: `<div data-app><e-parse-field label="test" :parse="parse" :format="format" v-model="data"/></div>`,
+    })
+    return mountComponent(app, { vuetify, attachTo: document.body, ...options })
+  }
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })
+
+  test('looks like a textfield', async () => {
+    const wrapper = mount()
+    expect(wrapper).toMatchSnapshot('empty')
+
+    await wrapper.setData({ data: true })
+    expect(wrapper).toMatchSnapshot('with text')
+  })
+
+  test('updates text when vModel changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input').element
+    expect(input.value).toBeDefined()
+
+    const firstValue = true
+    await wrapper.setData({ data: firstValue })
+    expect(input.value).toBe(`${firstValue}`)
+
+    const secondValue = false
+    await wrapper.setData({ data: secondValue })
+    expect(input.value).toBe(`${secondValue}`)
+  })
+
+  test('updates vModel when value of input field changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+    const value = true
+
+    input.element.value = `${value}`
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(value)
+  })
+
+  test.each([
+    ['true', true],
+    ['false', false],
+    ['', null],
+    ['s', null],
+    ['0', null],
+    ['1', null],
+  ])('parses "%s" as "%s"', async (string, expected) => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+
+    input.element.value = `${string}`
+    await input.trigger('input')
+
+    expect(wrapper.vm.data).toBe(expected)
+  })
+})
diff --git a/frontend/src/components/form/base/__tests__/ETextField.spec.js b/frontend/src/components/form/base/__tests__/ETextField.spec.js
index 31ad409213..2ad8e90c36 100644
--- a/frontend/src/components/form/base/__tests__/ETextField.spec.js
+++ b/frontend/src/components/form/base/__tests__/ETextField.spec.js
@@ -12,7 +12,7 @@ Vue.use(formBaseComponents)
 describe('An ETextField', () => {
   let vuetify
 
-  const mount = (options, number = false) => {
+  const mount = (options) => {
     const app = Vue.component('App', {
       components: { ETextField },
       data: function () {
@@ -20,15 +20,7 @@ describe('An ETextField', () => {
           data: null,
         }
       },
-      template: number
-        ? `
-        <div data-app>
-        <e-text-field label="test" v-model.number="data"/>
-        </div>`
-        : `
-        <div data-app>
-        <e-text-field label="test" v-model="data"/>
-        </div>`,
+      template: `<div data-app><e-text-field label="test" v-model="data"/></div>`,
     })
     return mountComponent(app, { vuetify, attachTo: document.body, ...options })
   }
@@ -37,79 +29,39 @@ describe('An ETextField', () => {
     vuetify = new Vuetify()
   })
 
-  describe('text', () => {
-    test('looks like a textfield', async () => {
-      const wrapper = mount()
-      expect(wrapper).toMatchSnapshot('empty')
+  test('looks like a textfield', async () => {
+    const wrapper = mount()
+    expect(wrapper).toMatchSnapshot('empty')
 
-      await wrapper.setData({ data: 'MyText' })
-      expect(wrapper).toMatchSnapshot('with text')
-    })
-
-    test('updates text when vModel changes', async () => {
-      const wrapper = mount()
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBeNull()
-
-      const firstText = 'myText'
-      await wrapper.setData({ data: firstText })
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
-        firstText
-      )
-
-      const secondText = 'myText2'
-      await wrapper.setData({ data: secondText })
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
-        secondText
-      )
-    })
-
-    test('updates vModel when value of input field changes', async () => {
-      const wrapper = mount()
-      const input = wrapper.find('input')
-      const text = 'bla'
-
-      input.element.value = text
-      await input.trigger('input')
-
-      expect(wrapper.vm.data).toBe(text)
-    })
+    await wrapper.setData({ data: 'MyText' })
+    expect(wrapper).toMatchSnapshot('with text')
   })
 
-  describe('number', () => {
-    test('looks like a textfield', async () => {
-      const wrapper = mount({}, true)
-      expect(wrapper).toMatchSnapshot('empty')
-
-      await wrapper.setData({ data: 3.14 })
-      expect(wrapper).toMatchSnapshot('with text')
-    })
-
-    test('updates text when vModel changes', async () => {
-      const wrapper = mount({}, true)
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBeNull()
-
-      const firstText = 0
-      await wrapper.setData({ data: firstText })
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
-        `${firstText}`
-      )
-
-      const secondText = 3.14
-      await wrapper.setData({ data: secondText })
-      expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
-        `${secondText}`
-      )
-    })
+  test('updates text when vModel changes', async () => {
+    const wrapper = mount()
+    expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBeNull()
+
+    const firstText = 'myText'
+    await wrapper.setData({ data: firstText })
+    expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
+      firstText
+    )
+
+    const secondText = 'myText2'
+    await wrapper.setData({ data: secondText })
+    expect(wrapper.find('.e-form-container').element.getAttribute('value')).toBe(
+      secondText
+    )
+  })
 
-    test('updates vModel when value of input field changes', async () => {
-      const wrapper = mount({}, true)
-      const input = wrapper.find('input')
-      const text = 3.14
+  test('updates vModel when value of input field changes', async () => {
+    const wrapper = mount()
+    const input = wrapper.find('input')
+    const text = 'bla'
 
-      input.element.value = text
-      await input.trigger('input')
+    input.element.value = text
+    await input.trigger('input')
 
-      expect(wrapper.vm.data).toBe(text)
-    })
+    expect(wrapper.vm.data).toBe(text)
   })
 })
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap
new file mode 100644
index 0000000000..568544bb24
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/ENumberField.spec.js.snap
@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`An ENumberField > looks like a numberfield > empty 1`] = `
+<div data-app>
+     <div class="e-form-container"
+          label="test">
+          <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
+
+exports[`An ENumberField > looks like a numberfield > with text 1`] = `
+<div data-app>
+     <div class="e-form-container"
+          label="test">
+          <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label v-label--active theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap
new file mode 100644
index 0000000000..c6dd8b3ebf
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EParseField.spec.js.snap
@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`An EParseField > looks like a textfield > empty 1`] = `
+<div data-app>
+     <div class="e-form-container">
+          <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
+
+exports[`An EParseField > looks like a textfield > with text 1`] = `
+<div data-app>
+     <div class="e-form-container">
+          <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--enclosed">
+               <div class="v-input__control">
+                    <div class="v-input__slot">
+                         <div class="v-text-field__slot">
+                              <label class="v-label v-label--active theme--light"
+                                     for
+                                     style="left: 0px; position: absolute;">test</label>
+                              <input id
+                                     type="text">
+                         </div>
+                    </div>
+               </div>
+          </div>
+     </div>
+</div>
+`;
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
index dbecd0049a..de07222e2b 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/ETextField.spec.js.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`An ETextField > number > looks like a textfield > empty 1`] = `
+exports[`An ETextField > looks like a textfield > empty 1`] = `
 <div data-app>
      <div class="e-form-container">
           <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
@@ -20,48 +20,7 @@ exports[`An ETextField > number > looks like a textfield > empty 1`] = `
 </div>
 `;
 
-exports[`An ETextField > number > looks like a textfield > with text 1`] = `
-<div data-app>
-     <div class="e-form-container"
-          value="3.14">
-          <div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--enclosed">
-               <div class="v-input__control">
-                    <div class="v-input__slot">
-                         <div class="v-text-field__slot">
-                              <label class="v-label v-label--active theme--light"
-                                     for
-                                     style="left: 0px; position: absolute;">test</label>
-                              <input id
-                                     type="text">
-                         </div>
-                    </div>
-               </div>
-          </div>
-     </div>
-</div>
-`;
-
-exports[`An ETextField > text > looks like a textfield > empty 1`] = `
-<div data-app>
-     <div class="e-form-container">
-          <div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
-               <div class="v-input__control">
-                    <div class="v-input__slot">
-                         <div class="v-text-field__slot">
-                              <label class="v-label theme--light"
-                                     for
-                                     style="left: 0px; position: absolute;">test</label>
-                              <input id
-                                     type="text">
-                         </div>
-                    </div>
-               </div>
-          </div>
-     </div>
-</div>
-`;
-
-exports[`An ETextField > text > looks like a textfield > with text 1`] = `
+exports[`An ETextField > looks like a textfield > with text 1`] = `
 <div data-app>
      <div class="e-form-container"
           value="MyText">
diff --git a/frontend/src/components/material/DialogMaterialItemForm.vue b/frontend/src/components/material/DialogMaterialItemForm.vue
index e916515fed..2c398feedb 100644
--- a/frontend/src/components/material/DialogMaterialItemForm.vue
+++ b/frontend/src/components/material/DialogMaterialItemForm.vue
@@ -1,9 +1,9 @@
 <template>
   <e-form name="materialItem">
-    <e-text-field
-      v-model.number="localMaterialItem.quantity"
+    <e-number-field
+      v-model="localMaterialItem.quantity"
       path="quantity"
-      inputmode="numeric"
+      inputmode="decimal"
       autofocus
     />
     <e-text-field v-model="localMaterialItem.unit" path="unit" maxlength="32" />
diff --git a/frontend/src/components/material/MaterialCreateItem.vue b/frontend/src/components/material/MaterialCreateItem.vue
index 3ba1ad0848..85c2af6e79 100644
--- a/frontend/src/components/material/MaterialCreateItem.vue
+++ b/frontend/src/components/material/MaterialCreateItem.vue
@@ -7,11 +7,11 @@
     @keyup.enter="submitForm"
   >
     <td class="pt-1">
-      <e-text-field
+      <e-number-field
         ref="quantity"
-        v-model.number="materialItem.quantity"
+        v-model="materialItem.quantity"
         dense
-        inputmode="numeric"
+        inputmode="decimal"
         path="quantity"
       />
     </td>
diff --git a/frontend/src/components/material/MaterialTable.vue b/frontend/src/components/material/MaterialTable.vue
index a92059fc20..6891f9e307 100644
--- a/frontend/src/components/material/MaterialTable.vue
+++ b/frontend/src/components/material/MaterialTable.vue
@@ -28,13 +28,13 @@
     </template>
 
     <template #[`item.quantity`]="{ item }">
-      <api-text-field
+      <api-number-field
         v-if="!item.readonly"
         :disabled="layoutMode || disabled"
         dense
         :uri="item.uri"
         path="quantity"
-        inputmode="numeric"
+        inputmode="decimal"
       />
       <span v-if="item.readonly">{{ item.quantity }}</span>
     </template>
@@ -218,6 +218,7 @@ import { errorToMultiLineToast } from '@/components/toast/toasts'
 import * as Sentry from '@sentry/browser'
 import { serverErrorToString } from '@/helpers/serverError.js'
 import PromptEntityDelete from '@/components/prompt/PromptEntityDelete.vue'
+import ApiNumberField from '@/components/form/api/ApiNumberField.vue'
 
 // Non-breaking space
 const nbsp = '\u00A0'
@@ -227,6 +228,7 @@ export default {
   components: {
     PromptEntityDelete,
     ApiTextField,
+    ApiNumberField,
     ApiSelect,
     DialogMaterialItemCreate,
     DialogMaterialItemEdit,
diff --git a/frontend/src/plugins/formBaseComponents.js b/frontend/src/plugins/formBaseComponents.js
index c17d282130..ea12546919 100644
--- a/frontend/src/plugins/formBaseComponents.js
+++ b/frontend/src/plugins/formBaseComponents.js
@@ -4,6 +4,8 @@ import ECheckbox from '@/components/form/base/ECheckbox.vue'
 import EColorPicker from '@/components/form/base/EColorPicker.vue'
 import EDatePicker from '@/components/form/base/EDatePicker.vue'
 import EForm from '@/components/form/base/EForm.vue'
+import ENumberField from '@/components/form/base/ENumberField.vue'
+import EParseField from '@/components/form/base/EParseField.vue'
 import ERichtext from '@/components/form/base/ERichtext.vue'
 import ESelect from '@/components/form/base/ESelect.vue'
 import ESwitch from '@/components/form/base/ESwitch.vue'
@@ -17,6 +19,8 @@ class FormBaseComponentsPlugin {
     Vue.component('EColorPicker', EColorPicker)
     Vue.component('EDatePicker', EDatePicker)
     Vue.component('EForm', EForm)
+    Vue.component('ENumberField', ENumberField)
+    Vue.component('EParseField', EParseField)
     Vue.component('ERichtext', ERichtext)
     Vue.component('ESelect', ESelect)
     Vue.component('ESwitch', ESwitch)
diff --git a/frontend/src/views/dev/Controls.vue b/frontend/src/views/dev/Controls.vue
index fd902deb2a..39a08404f0 100644
--- a/frontend/src/views/dev/Controls.vue
+++ b/frontend/src/views/dev/Controls.vue
@@ -32,16 +32,16 @@
           <component
             :is="item.component('v')"
             v-if="item.component('v') !== ''"
-            v-bind="{ ...item.props, ...config }"
             v-model="item.value"
+            v-bind="{ ...item.props, ...config }"
           />
           <span v-else v-text="item.value" />
         </template>
         <template #[`item.e`]="{ item }">
           <component
             :is="item.component('e')"
-            v-bind="{ ...item.props, ...config }"
             v-model="item.value"
+            v-bind="{ ...item.props, ...config }"
           />
         </template>
         <template #[`item.api`]="{ item }">
@@ -68,6 +68,7 @@
 import ContentCard from '@/components/layout/ContentCard.vue'
 import VTiptapEditor from '@/components/form/tiptap/VTiptapEditor.vue'
 import ETextField from '@/components/form/base/ETextField.vue'
+import ENumberField from '@/components/form/base/ENumberField.vue'
 import ETextarea from '@/components/form/base/ETextarea.vue'
 import ERichtext from '@/components/form/base/ERichtext.vue'
 import ECheckbox from '@/components/form/base/ECheckbox.vue'
@@ -77,6 +78,7 @@ import EDatePicker from '@/components/form/base/EDatePicker.vue'
 import ETimePicker from '@/components/form/base/ETimePicker.vue'
 import EColorPicker from '@/components/form/base/EColorPicker.vue'
 import ApiTextField from '@/components/form/api/ApiTextField.vue'
+import ApiNumberField from '@/components/form/api/ApiNumberField.vue'
 import ApiTextarea from '@/components/form/api/ApiTextarea.vue'
 import ApiRichtext from '@/components/form/api/ApiRichtext.vue'
 import ApiCheckbox from '@/components/form/api/ApiCheckbox.vue'
@@ -95,6 +97,8 @@ export default {
     VTextField,
     ETextField,
     ApiTextField,
+    ENumberField,
+    ApiNumberField,
     VTextarea,
     ETextarea,
     ApiTextarea,
@@ -125,6 +129,7 @@ export default {
     labelText: 'Label',
 
     textfieldValue: 'FFFFFFFFFF',
+    numberfieldValue: 10,
     textareaValue: 'FFFFFFFFFF',
     richtextValue: '<p>FFFFFFFFFF</p>',
     checkboxValue: false,
@@ -155,12 +160,12 @@ export default {
           },
         },
         {
-          id: 'text-field.numeric',
-          component: (type) => `${type}-text-field`,
+          id: 'number-field',
+          component: (type) => (type === 'v' ? '' : `${type}-number-field`),
+          value: this.numberfieldValue,
           props: {
-            'v-model.number': this.textfieldValue,
             placeholder: this.placeholder,
-            inputmode: 'numeric',
+            inputmode: 'decimal',
             path: 'quantity',
             uri: this.materialUri,
           },