diff --git a/ayanova/src/components/currency-control.vue b/ayanova/src/components/currency-control.vue
index 81e4c70b..73562a90 100644
--- a/ayanova/src/components/currency-control.vue
+++ b/ayanova/src/components/currency-control.vue
@@ -12,10 +12,8 @@
       :disabled="disabled"
       :label="label"
       :rules="rules"
+      :error-messages="errorMessages"
     ></v-text-field>
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
   </div>
 </template>
 <script>
@@ -38,10 +36,7 @@ export default {
     value: { type: Number, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    }
+    errorMessages: { type: Array, default: null }
   },
   computed: {
     currencyValue() {
diff --git a/ayanova/src/components/date-native-control.vue b/ayanova/src/components/date-native-control.vue
index fda4a3e1..892d6d31 100644
--- a/ayanova/src/components/date-native-control.vue
+++ b/ayanova/src/components/date-native-control.vue
@@ -10,7 +10,7 @@
         :label="label"
         :rules="rules"
         type="date"
-        :error-messages="allErrors()"
+        :error-messages="errorMessages"
         :data-cy="'dateinput:' + testId"
       ></v-text-field>
     </template>
@@ -34,14 +34,10 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: String, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
     testId: String
   },
   computed: {
@@ -53,16 +49,6 @@ export default {
     }
   },
   methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
-      }
-      return ret;
-    },
     readonlyFormat() {
       return window.$gz.locale.utcDateToShortDateLocalized(
         this.internalValue,
diff --git a/ayanova/src/components/date-time-native-control.vue b/ayanova/src/components/date-time-native-control.vue
index 27cf96cb..0a25433f 100644
--- a/ayanova/src/components/date-time-native-control.vue
+++ b/ayanova/src/components/date-time-native-control.vue
@@ -11,7 +11,7 @@
           :label="label"
           :rules="rules"
           type="date"
-          :error-messages="allErrors()"
+          :error-messages="errorMessages"
           :data-cy="'dateinput:' + testId"
         ></v-text-field>
       </v-col>
@@ -49,14 +49,10 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: String, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
     testId: String
   },
   computed: {
@@ -74,16 +70,6 @@ export default {
     }
   },
   methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
-      }
-      return ret;
-    },
     readonlyFormat() {
       return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
         this.value,
diff --git a/ayanova/src/components/decimal-control.vue b/ayanova/src/components/decimal-control.vue
index f84560e8..4701dab5 100644
--- a/ayanova/src/components/decimal-control.vue
+++ b/ayanova/src/components/decimal-control.vue
@@ -13,10 +13,8 @@
       :disabled="disabled"
       :label="label"
       :rules="rules"
+      :error-messages="errorMessages"
     ></v-text-field>
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
   </div>
 </template>
 <script>
@@ -40,10 +38,7 @@ export default {
     value: { type: Number, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
+    errorMessages: { type: Array, default: null },
     precision: { type: Number, default: undefined }
   },
   computed: {
diff --git a/ayanova/src/components/duration-control.vue b/ayanova/src/components/duration-control.vue
index f2a405fa..9c5c1e8c 100644
--- a/ayanova/src/components/duration-control.vue
+++ b/ayanova/src/components/duration-control.vue
@@ -16,6 +16,7 @@
             :label="$ay.t('TimeSpanDays')"
             type="number"
             :data-cy="'durationdays:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -28,6 +29,7 @@
             :label="$ay.t('TimeSpanHours')"
             type="number"
             :data-cy="'durationhours:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -40,6 +42,7 @@
             :label="$ay.t('TimeSpanMinutes')"
             type="number"
             :data-cy="'durationminutes:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
         <v-col cols="3">
@@ -53,14 +56,16 @@
             :label="$ay.t('TimeSpanSeconds')"
             type="number"
             :data-cy="'durationseconds:' + testId"
+            :error="!!hasErrors"
           ></v-text-field>
         </v-col>
       </v-row>
     </template>
-
-    <p v-show="error" class="form__error v-messages theme--light error--text">
-      {{ error }}
-    </p>
+    <div class="v-messages theme--light error--text mt-n5" role="alert">
+      <div class="v-messages__wrapper">
+        <div class="v-messages__message">{{ allErrors() }}</div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -82,19 +87,19 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: String, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
+
     showSeconds: { type: Boolean, default: true },
     showDays: { type: Boolean, default: true },
     testId: String
   },
   computed: {
+    hasErrors() {
+      return this.errorMessages != null && this.errorMessages.length > 0;
+    },
     splitSpan() {
       let vm = this;
       let theDays = 0;
@@ -138,9 +143,7 @@ export default {
   methods: {
     allErrors() {
       let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
+
       if (this.errorMessages != null && this.errorMessages.length > 0) {
         ret += this.errorMessages.toString();
       }
diff --git a/ayanova/src/components/role-control.vue b/ayanova/src/components/role-control.vue
index 605d3837..2a31aef6 100644
--- a/ayanova/src/components/role-control.vue
+++ b/ayanova/src/components/role-control.vue
@@ -12,7 +12,7 @@
     :disabled="disabled"
     :label="label"
     :rules="rules"
-    :error-messages="allErrors()"
+    :error-messages="errorMessages"
     :data-cy="'roleinput:' + testId"
   ></v-select>
 </template>
@@ -46,14 +46,10 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: Number, default: 0 },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
     limitSelectionTo: { type: String, default: null }, //"inside" - no customer roles, "outside" - no non-customer roles
     testId: String
   },
@@ -72,16 +68,6 @@ export default {
     }
   },
   methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
-      }
-      return ret;
-    },
     handleInput(value) {
       let newValue = 0;
       if (value != null && value != [] && value.length > 0) {
diff --git a/ayanova/src/components/time-native-control.vue b/ayanova/src/components/time-native-control.vue
index ef4c1695..1bbee48f 100644
--- a/ayanova/src/components/time-native-control.vue
+++ b/ayanova/src/components/time-native-control.vue
@@ -9,7 +9,7 @@
         :disabled="disabled"
         :label="label"
         :rules="rules"
-        :error-messages="allErrors()"
+        :error-messages="errorMessages"
         type="time"
         :data-cy="'timeinput:' + testId"
       ></v-text-field>
@@ -37,14 +37,11 @@ export default {
   props: {
     label: String,
     rules: Array,
-    "error-messages": { type: Array, default: null },
+    errorMessages: { type: Array, default: null },
     value: { type: String, default: null },
     readonly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    error: {
-      type: String,
-      required: false
-    },
+
     testId: String
   },
   computed: {
@@ -56,16 +53,6 @@ export default {
     }
   },
   methods: {
-    allErrors() {
-      let ret = "";
-      if (this.error != null) {
-        ret = this.error;
-      }
-      if (this.errorMessages != null && this.errorMessages.length > 0) {
-        ret += this.errorMessages.toString();
-      }
-      return ret;
-    },
     readonlyFormat() {
       return window.$gz.locale.utcDateToShortTimeLocalized(
         this.value,