diff --git a/example/package.json b/example/package.json
index 4f19ee36..3bee8146 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "@jsonforms/core": "3.1.0-alpha.2",
     "@jsonforms/vue2": "3.1.0-alpha.2",
-    "@jsonforms/vue2-vuetify": "^3.1.0-alpha.2",
+    "@jsonforms/vue2-vuetify": "3.1.0-alpha.2",
     "ajv-keywords": "^5.1.0",
     "core-js": "^3.9.1",
     "json-refs": "^3.0.15",
diff --git a/example/src/components/DemoForm.vue b/example/src/components/DemoForm.vue
index e8d2de47..7288ea7e 100644
--- a/example/src/components/DemoForm.vue
+++ b/example/src/components/DemoForm.vue
@@ -51,8 +51,8 @@
 
 <script lang="ts">
 import { PropType } from 'vue';
-import { Example, ResolvedSchema } from '@/core/types';
-import { Ajv } from 'ajv';
+import { JsonExample, ResolvedSchema } from '@/core/types';
+import type Ajv from 'ajv';
 import {
   ValidationMode,
   JsonFormsUISchemaRegistryEntry,
@@ -71,7 +71,7 @@ export default {
     JsonForms,
   },
   props: {
-    example: { type: Object as PropType<Example>, required: true },
+    example: { type: Object as PropType<JsonExample>, required: true },
     renderers: {
       required: true,
       type: Array as PropType<JsonFormsRendererRegistryEntry[]>,
@@ -128,7 +128,7 @@ export default {
   watch: {
     example: {
       deep: true,
-      handler(newExample: Example, oldExample: Example): void {
+      handler(newExample: JsonExample, oldExample: JsonExample): void {
         this.resolveSchema(newExample.input.schema);
         this.i18n.translate = createTranslator(
           this.locale,
diff --git a/example/src/core/types.ts b/example/src/core/types.ts
index 95b1d294..1596d586 100644
--- a/example/src/core/types.ts
+++ b/example/src/core/types.ts
@@ -2,20 +2,34 @@ import {
   UISchemaElement,
   JsonSchema,
   JsonFormsRendererRegistryEntry,
+  JsonFormsUISchemaRegistryEntry,
 } from '@jsonforms/core';
 
 export type Example = {
   id: string;
   title: string;
+  note?: string;
   input: {
     schema?: JsonSchema;
     uischema?: UISchemaElement;
+    uischemas?: JsonFormsUISchemaRegistryEntry[];
     data: string | number | boolean | any[] | Record<string, any>;
     i18n?: Record<string, any>;
     renderers?: JsonFormsRendererRegistryEntry[];
   };
 };
 
+export type JsonExampleInput = Omit<Example['input'], 'uischemas'> & {
+  uischemas?: {
+    tester: string;
+    uischema: UISchemaElement;
+  }[];
+};
+
+export type JsonExample = Omit<Example, 'input'> & {
+  input: JsonExampleInput;
+};
+
 export type ResolvedSchema = {
   schema?: JsonSchema;
   resolved: boolean;
diff --git a/example/src/examples/categorization-stepper-nav/uischema.json b/example/src/examples/categorization-stepper-nav/uischema.json
index 1509ace5..a7735ac4 100644
--- a/example/src/examples/categorization-stepper-nav/uischema.json
+++ b/example/src/examples/categorization-stepper-nav/uischema.json
@@ -121,6 +121,7 @@
   ],
   "options": {
     "variant": "stepper",
-    "showNavButtons": true
+    "showNavButtons": true,
+    "vertical": false
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization-stepper/uischema.json b/example/src/examples/categorization-stepper/uischema.json
index ba7bd947..5af9cc38 100644
--- a/example/src/examples/categorization-stepper/uischema.json
+++ b/example/src/examples/categorization-stepper/uischema.json
@@ -120,6 +120,7 @@
     }
   ],
   "options": {
-    "variant": "stepper"
+    "variant": "stepper",
+    "vertical": false
   }
-}
\ No newline at end of file
+}
diff --git a/example/src/examples/categorization/uischema.json b/example/src/examples/categorization/uischema.json
index 17eaeeb4..8e8365c6 100644
--- a/example/src/examples/categorization/uischema.json
+++ b/example/src/examples/categorization/uischema.json
@@ -118,5 +118,8 @@
         }
       }
     }
-  ]
-}
\ No newline at end of file
+  ],
+  "options": {
+    "vertical": false
+  }
+}
diff --git a/example/src/examples/index.ts b/example/src/examples/index.ts
index d887864d..964a7420 100644
--- a/example/src/examples/index.ts
+++ b/example/src/examples/index.ts
@@ -46,8 +46,9 @@ import { input as rule } from './rule';
 import { input as verticalLayout } from './vertical-layout';
 import { input as huge } from './huge';
 import { input as ifThenElse } from './if-then-else';
+import { JsonExample } from '@/core/types';
 
-export const examples = [
+export const examples: JsonExample[] = [
   {
     id: 'main',
     title: 'Main',
diff --git a/example/src/i18n/i18n.ts b/example/src/i18n/i18n.ts
index f7af747e..6a3e70c8 100644
--- a/example/src/i18n/i18n.ts
+++ b/example/src/i18n/i18n.ts
@@ -20,9 +20,9 @@ export const createTranslator = (
     defaultMessage: string | undefined,
     values?: any
   ): string | undefined => {
-    if (!localeTranslations) return defaultMessage;
-
-    const message = get(localeTranslations, id);
+    const message = localeTranslations
+      ? get(localeTranslations, id)
+      : defaultMessage;
     if (message && values) {
       return translateWithParams(message, values) ?? defaultMessage;
     }
diff --git a/example/src/views/example/Example.vue b/example/src/views/example/Example.vue
index 00e0f602..e0800f8c 100644
--- a/example/src/views/example/Example.vue
+++ b/example/src/views/example/Example.vue
@@ -247,7 +247,7 @@
 
 <script lang="ts">
 import { examples } from '@/examples';
-import { find } from 'lodash';
+import find from 'lodash/find';
 import { sync } from 'vuex-pathify';
 
 import DemoForm from '@/components/DemoForm.vue';
@@ -259,7 +259,7 @@ import {
   EditorApi,
   getMonacoModelForUri,
 } from '@/core/jsonSchemaValidation';
-import { Example } from '@/core/types';
+import { JsonExample } from '@/core/types';
 import type { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import { JsonFormsChangeEvent } from '@jsonforms/vue2';
 import {
@@ -286,7 +286,7 @@ export default {
     return {
       activeTab: 0,
       examples,
-      example: undefined,
+      example: undefined as JsonExample | undefined,
       errors: undefined as
         | ErrorObject<string, Record<string, any>, unknown>[]
         | undefined,
@@ -314,34 +314,34 @@ export default {
       return this.$route.query?.view === 'form-only';
     },
   },
-  mounted() {
+  mounted(): void {
     this.setExample(
       find(this.examples, (example) => example.id === this.$route.params.id)
     );
   },
   watch: {
-    '$route.params.id'(id) {
+    '$route.params.id'(id: string): void {
       this.setExample(find(this.examples, (example) => example.id === id));
     },
   },
   methods: {
-    onChange(event: JsonFormsChangeEvent) {
+    onChange(event: JsonFormsChangeEvent): void {
       this.$store.set(
         'app/monaco@dataModel',
         getMonacoModelForUri(
-          monaco.Uri.parse(this.toDataUri(this.example.id)),
+          monaco.Uri.parse(this.toDataUri(this.example!.id)),
           event.data ? JSON.stringify(event.data, null, 2) : ''
         )
       );
       this.errors = event.errors;
     },
-    setExample(example: Example): void {
+    setExample(example?: JsonExample): void {
       if (example) {
         this.example = cloneDeep(example);
         this.updateMonacoModels(this.example);
       }
     },
-    reloadMonacoSchema() {
+    reloadMonacoSchema(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -360,7 +360,7 @@ export default {
         this.toast('Original example schema loaded. Apply it to take effect.');
       }
     },
-    saveMonacoSchema() {
+    saveMonacoSchema(): void {
       const model = this.monacoSchemaModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -384,7 +384,7 @@ export default {
         }
       }
     },
-    reloadMonacoUiSchema() {
+    reloadMonacoUiSchema(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -405,7 +405,7 @@ export default {
         );
       }
     },
-    saveMonacoUiSchema() {
+    saveMonacoUiSchema(): void {
       const model = this.monacoUiSchemaModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -430,7 +430,7 @@ export default {
         }
       }
     },
-    reloadMonacoData() {
+    reloadMonacoData(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -449,7 +449,7 @@ export default {
         this.toast('Original example data loaded. Apply it to take effect.');
       }
     },
-    saveMonacoData() {
+    saveMonacoData(): void {
       const model = this.monacoDataModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -473,7 +473,7 @@ export default {
         }
       }
     },
-    reloadMonacoI18N() {
+    reloadMonacoI18N(): void {
       const example = find(
         this.examples,
         (example) => example.id === this.$route.params.id
@@ -492,7 +492,7 @@ export default {
         this.toast('Original example i18n loaded. Apply it to take effect.');
       }
     },
-    saveMonacoI18N() {
+    saveMonacoI18N(): void {
       const model = this.monacoI18NModel as monaco.editor.ITextModel;
       const example = this.example;
 
@@ -517,7 +517,7 @@ export default {
         }
       }
     },
-    registerValidations(editor: EditorApi) {
+    registerValidations(editor: EditorApi): void {
       configureJsonSchemaValidation(editor, ['*.schema.json']);
       configureUISchemaValidation(editor, ['*.uischema.json']);
       for (let example of examples) {
@@ -536,7 +536,7 @@ export default {
         }
       }
     },
-    updateMonacoModels(example) {
+    updateMonacoModels(example: JsonExample): void {
       this.$store.set(
         'app/monaco@schemaModel',
         getMonacoModelForUri(
diff --git a/lerna.json b/lerna.json
index da0c7701..5a7b5967 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,7 +1,4 @@
 {
-  "packages": [
-    "vue2-vuetify",
-    "example"
-  ],
+  "packages": ["vue2-vuetify", "example"],
   "version": "3.1.0-alpha.2"
 }
diff --git a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
index 057865ae..db3e249a 100644
--- a/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
+++ b/vue2-vuetify/src/additional/ListWithDetailRenderer.vue
@@ -1,9 +1,5 @@
 <template>
-  <v-container
-    v-if="control.visible"
-    fill-height
-    :class="styles.listWithDetail.root"
-  >
+  <v-container v-if="control.visible" :class="styles.listWithDetail.root">
     <v-row>
       <v-col class="pa-0">
         <v-toolbar flat :class="styles.listWithDetail.toolbar">
@@ -23,7 +19,7 @@
                 text
                 elevation="0"
                 small
-                :aria-label="`Add to ${control.label}`"
+                :aria-label="control.translations.addAriaLabel"
                 v-on="onTooltip"
                 :class="styles.listWithDetail.addButton"
                 @click="addButtonClick"
@@ -38,13 +34,13 @@
                 <v-icon>mdi-plus</v-icon>
               </v-btn>
             </template>
-            {{ `Add to ${control.label}` }}
+            {{ control.translations.addTooltip }}
           </v-tooltip>
         </v-toolbar>
       </v-col>
     </v-row>
     <v-row v-if="dataLength === 0" :class="styles.listWithDetail.noData">
-      <v-col>No data</v-col>
+      <v-col> {{ control.translations.noDataMessage }} </v-col>
     </v-row>
     <v-row v-else>
       <v-col class="shrink pa-0">
@@ -108,7 +104,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Move up"
+                        :aria-label="control.translations.upAriaLabel"
                         :disabled="index <= 0 || !control.enabled"
                         :class="styles.listWithDetail.itemMoveUp"
                         @click.native="moveUpClick($event, index)"
@@ -116,7 +112,7 @@
                         <v-icon class="notranslate">mdi-arrow-up</v-icon>
                       </v-btn>
                     </template>
-                    Move Up
+                    {{ t('array.btn.moveUp.tooltip', 'Move Up') }}
                   </v-tooltip>
                 </v-list-item-action>
                 <v-list-item-action v-if="appliedOptions.showSortButtons">
@@ -129,7 +125,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Move down"
+                        :aria-label="control.translations.downAriaLabel"
                         :disabled="index >= dataLength - 1 || !control.enabled"
                         :class="styles.listWithDetail.itemMoveDown"
                         @click.native="moveDownClick($event, index)"
@@ -137,7 +133,7 @@
                         <v-icon class="notranslate">mdi-arrow-down</v-icon>
                       </v-btn>
                     </template>
-                    Move Down
+                    {{ t('array.btn.moveDown.tooltip', 'Move Down') }}
                   </v-tooltip>
                 </v-list-item-action>
                 <v-list-item-action>
@@ -150,7 +146,7 @@
                         elevation="0"
                         small
                         class="ma-0"
-                        aria-label="Delete"
+                        :aria-label="control.translations.removeAriaLabel"
                         :class="styles.listWithDetail.itemDelete"
                         @click.native="removeItemsClick($event, [index])"
                         :disabled="
@@ -164,7 +160,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    Delete
+                    {{ control.translations.removeTooltip }}
                   </v-tooltip>
                 </v-list-item-action>
               </v-list-item>
@@ -173,7 +169,7 @@
         </v-list-item-group>
       </v-col>
       <v-col v-if="selectedIndex === undefined" class="grow">
-        <span class="text-h6">No Selection</span>
+        <span class="text-h6">{{ control.translations.noSelection }}</span>
       </v-col>
       <v-col v-else :class="`grow ${styles.listWithDetail.itemContent}`">
         <dispatch-renderer
@@ -211,7 +207,7 @@ import {
   RendererProps,
   useJsonFormsArrayControl,
 } from '@jsonforms/vue2';
-import { useVuetifyArrayControl } from '../util';
+import { useTranslator, useVuetifyArrayControl } from '../util';
 import {
   VList,
   VListItemGroup,
@@ -273,10 +269,12 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const selectedIndex = ref<number | undefined>(undefined);
+    const t = useTranslator();
 
     return {
       ...useVuetifyArrayControl(useJsonFormsArrayControl(props)),
       selectedIndex,
+      t,
     };
   },
   computed: {
diff --git a/vue2-vuetify/src/complex/AnyOfRenderer.vue b/vue2-vuetify/src/complex/AnyOfRenderer.vue
index 2302e45c..db621d16 100644
--- a/vue2-vuetify/src/complex/AnyOfRenderer.vue
+++ b/vue2-vuetify/src/complex/AnyOfRenderer.vue
@@ -69,7 +69,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsAnyOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
     const selectedIndex = ref(control.indexOfFittingSchema || 0);
 
     return {
diff --git a/vue2-vuetify/src/complex/ArrayControlRenderer.vue b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
index 89effc71..5a7e3bf6 100644
--- a/vue2-vuetify/src/complex/ArrayControlRenderer.vue
+++ b/vue2-vuetify/src/complex/ArrayControlRenderer.vue
@@ -18,7 +18,7 @@
               text
               elevation="0"
               small
-              :aria-label="`Add to ${control.label}`"
+              :aria-label="control.translations.addAriaLabel"
               v-on="onTooltip"
               :class="styles.arrayList.addButton"
               :disabled="
@@ -33,7 +33,7 @@
               <v-icon>mdi-plus</v-icon>
             </v-btn>
           </template>
-          {{ `Add to ${control.label}` }}
+          {{ control.translations.addTooltip }}
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
@@ -102,7 +102,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Move up"
+                        :aria-label="control.translations.upAriaLabel"
                         :disabled="index <= 0 || !control.enabled"
                         :class="styles.arrayList.itemMoveUp"
                         @click.native="moveUpClick($event, index)"
@@ -110,7 +110,7 @@
                         <v-icon class="notranslate">mdi-arrow-up</v-icon>
                       </v-btn>
                     </template>
-                    Move Up
+                    {{ t('array.btn.moveUp.tooltip', 'Move Up') }}
                   </v-tooltip>
                   <v-tooltip bottom>
                     <template v-slot:activator="{ on: onTooltip }">
@@ -121,7 +121,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Move down"
+                        :aria-label="control.translations.downAriaLabel"
                         :disabled="index >= dataLength - 1 || !control.enabled"
                         :class="styles.arrayList.itemMoveDown"
                         @click.native="moveDownClick($event, index)"
@@ -129,7 +129,7 @@
                         <v-icon class="notranslate">mdi-arrow-down</v-icon>
                       </v-btn>
                     </template>
-                    Move Down
+                    {{ t('array.btn.moveDown.tooltip', 'Move Down') }}
                   </v-tooltip>
                   <v-tooltip bottom>
                     <template v-slot:activator="{ on: onTooltip }">
@@ -139,7 +139,7 @@
                         text
                         elevation="0"
                         small
-                        aria-label="Delete"
+                        :aria-label="control.translations.removeAriaLabel"
                         :class="styles.arrayList.itemDelete"
                         :disabled="
                           !control.enabled ||
@@ -153,7 +153,7 @@
                         <v-icon class="notranslate">mdi-delete</v-icon>
                       </v-btn>
                     </template>
-                    Delete
+                    {{ control.translations.removeTooltip }}
                   </v-tooltip>
                 </td>
               </tr>
@@ -162,7 +162,7 @@
         </v-row>
       </v-container>
       <v-container v-if="dataLength === 0" :class="styles.arrayList.noData">
-        No data
+        {{ control.translations.noDataMessage }}
       </v-container>
     </v-card-text>
   </v-card>
@@ -190,7 +190,7 @@ import {
   useJsonFormsArrayControl,
   RendererProps,
 } from '@jsonforms/vue2';
-import { useVuetifyArrayControl } from '../util';
+import { useTranslator, useVuetifyArrayControl } from '../util';
 import {
   VCard,
   VCardTitle,
@@ -235,7 +235,9 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVuetifyArrayControl(useJsonFormsArrayControl(props));
+    const t = useTranslator();
+
+    return { ...useVuetifyArrayControl(useJsonFormsArrayControl(props)), t };
   },
   computed: {
     arraySchema(): JsonSchema | undefined {
diff --git a/vue2-vuetify/src/complex/OneOfRenderer.vue b/vue2-vuetify/src/complex/OneOfRenderer.vue
index 01270ce0..2e7bbc6e 100644
--- a/vue2-vuetify/src/complex/OneOfRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfRenderer.vue
@@ -42,18 +42,28 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5"> Clear form? </v-card-title>
+        <v-card-title class="text-h5">
+          {{ t('form.clear.title', 'Clear form?') }}
+        </v-card-title>
 
         <v-card-text>
-          Your data will be cleared if you select this new option. Do you want
-          to proceed?
+          {{
+            t(
+              'form.clear.text',
+              'Your data will be cleared. Do you want to proceed?'
+            )
+          }}
         </v-card-text>
 
         <v-card-actions>
           <v-spacer></v-spacer>
 
-          <v-btn text @click="cancel"> No </v-btn>
-          <v-btn text ref="confirm" @click="confirm"> Yes </v-btn>
+          <v-btn text @click="cancel">
+            {{ t('form.clear.cancel', 'No') }}
+          </v-btn>
+          <v-btn text ref="confirm" @click="confirm">
+            {{ t('form.clear.confirm', 'Yes') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -116,7 +126,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsOneOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
 
     const selectedIndex = ref(control.indexOfFittingSchema);
     const selectIndex = ref(selectedIndex.value);
diff --git a/vue2-vuetify/src/complex/OneOfTabRenderer.vue b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
index be2434eb..50cfc136 100644
--- a/vue2-vuetify/src/complex/OneOfTabRenderer.vue
+++ b/vue2-vuetify/src/complex/OneOfTabRenderer.vue
@@ -35,18 +35,28 @@
 
     <v-dialog v-model="dialog" persistent max-width="600" @keydown.esc="cancel">
       <v-card>
-        <v-card-title class="text-h5"> Clear form? </v-card-title>
+        <v-card-title class="text-h5">
+          {{ t('form.clear.title', 'Clear form?') }}
+        </v-card-title>
 
         <v-card-text>
-          Your data will be cleared if you navigate away from this tab. Do you
-          want to proceed?
+          {{
+            t(
+              'form.clear.text',
+              'Your data will be cleared. Do you want to proceed?'
+            )
+          }}
         </v-card-text>
 
         <v-card-actions>
           <v-spacer></v-spacer>
 
-          <v-btn text @click="cancel"> No </v-btn>
-          <v-btn text ref="confirm" @click="confirm"> Yes </v-btn>
+          <v-btn text @click="cancel">
+            {{ t('form.clear.cancel', 'No') }}
+          </v-btn>
+          <v-btn text ref="confirm" @click="confirm">
+            {{ t('form.clear.confirm', 'Yes') }}
+          </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -86,7 +96,7 @@ import {
   VTabs,
   VTabsItems,
 } from 'vuetify/lib';
-import { useVuetifyControl } from '../util';
+import { useTranslator, useVuetifyControl } from '../util';
 import { CombinatorProperties } from './components';
 
 const controlRenderer = defineComponent({
@@ -111,12 +121,13 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     const input = useJsonFormsOneOfControl(props);
-    const control = (input.control as any).value as typeof input.control;
+    const control = input.control.value;
 
     const selectedIndex = ref(control.indexOfFittingSchema || 0);
     const tabIndex = ref(selectedIndex.value);
     const newSelectedIndex = ref(0);
     const dialog = ref(false);
+    const t = useTranslator();
 
     return {
       ...useVuetifyControl(input),
@@ -124,6 +135,7 @@ const controlRenderer = defineComponent({
       tabIndex,
       dialog,
       newSelectedIndex,
+      t,
     };
   },
   computed: {
diff --git a/vue2-vuetify/src/complex/components/AdditionalProperties.vue b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
index ab87a3d9..c3232903 100644
--- a/vue2-vuetify/src/complex/components/AdditionalProperties.vue
+++ b/vue2-vuetify/src/complex/components/AdditionalProperties.vue
@@ -1,6 +1,9 @@
 <template>
-  <v-card v-if="control.visible" elevation="0">
-    <v-card-title>
+  <v-card
+    v-if="control.visible"
+    v-bind="vuetifyProps('v-card', { elevation: '0' })"
+  >
+    <v-card-title v-bind="vuetifyProps('v-card-title')">
       <v-toolbar flat>
         <v-toolbar-title>{{ additionalPropertiesTitle }}</v-toolbar-title>
         <v-spacer></v-spacer>
@@ -38,7 +41,7 @@
         </v-tooltip>
       </v-toolbar>
     </v-card-title>
-    <v-container>
+    <v-container v-bind="vuetifyProps('v-container')">
       <v-row
         v-for="(element, index) in additionalPropertyItems"
         :key="`${index}`"
@@ -96,10 +99,9 @@ import {
   useJsonFormsControlWithDetail,
 } from '@jsonforms/vue2';
 import Ajv, { ValidateFunction } from 'ajv';
-import get from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
 import startCase from 'lodash/startCase';
-import { defineComponent, PropType, Ref, ref } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 import {
   VBtn,
   VCard,
@@ -117,7 +119,12 @@ import {
 } from 'vuetify/lib';
 import { DisabledIconFocus } from '../../controls/directives';
 import { useStyles } from '../../styles';
-import { useAjv, useControlAppliedOptions, useTranslator } from '../../util';
+import {
+  useAjv,
+  useControlAppliedOptions,
+  useTranslator,
+  useVuetifyProps,
+} from '../../util';
 
 type Input = ReturnType<typeof useJsonFormsControlWithDetail>;
 interface AdditionalPropertyType {
@@ -165,16 +172,17 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const control = props.input.control as any as Ref<
-      typeof props.input.control
-    >;
+    const control = props.input.control;
     const reservedPropertyNames = Object.keys(
-      control.value.schema.properties || {}
+      (control.value.schema && control.value.schema.properties) || {}
     );
 
-    const additionalKeys = Object.keys(control.value.data).filter(
-      (k) => !reservedPropertyNames.includes(k)
-    );
+    const additionalKeys =
+      control.value.data && isPlainObject(control.value.data)
+        ? Object.keys(control.value.data).filter(
+            (k) => !reservedPropertyNames.includes(k)
+          )
+        : [];
 
     const toAdditionalPropertyType = (
       propName: string,
@@ -183,7 +191,11 @@ export default defineComponent({
       let propSchema: JsonSchema | undefined = undefined;
       let propUiSchema: UISchemaElement | undefined = undefined;
 
-      if (control.value.schema.patternProperties) {
+      if (
+        control.value.schema &&
+        control.value.schema.patternProperties &&
+        typeof control.value.schema.patternProperties === 'object'
+      ) {
         const matchedPattern = Object.keys(
           control.value.schema.patternProperties
         ).find((pattern) => new RegExp(pattern).test(propName));
@@ -194,6 +206,8 @@ export default defineComponent({
 
       if (
         !propSchema &&
+        control.value.schema &&
+        control.value.schema.additionalProperties &&
         typeof control.value.schema.additionalProperties === 'object'
       ) {
         propSchema = control.value.schema.additionalProperties;
@@ -237,7 +251,7 @@ export default defineComponent({
     additionalKeys.forEach((propName) => {
       const additionalProperty = toAdditionalPropertyType(
         propName,
-        control.value.data[propName]
+        control.value.data?.[propName]
       );
       additionalPropertyItems.value.push(additionalProperty);
     });
@@ -252,11 +266,17 @@ export default defineComponent({
 
     // TODO: create issue against jsonforms to add propertyNames into the JsonSchema interface
     // propertyNames exist in draft-6 but not defined in the JsonSchema
-    if (typeof (control.value.schema as any).propertyNames === 'object') {
+    if (
+      control.value.schema &&
+      (control.value.schema as any).propertyNames &&
+      typeof (control.value.schema as any).propertyNames === 'object'
+    ) {
       propertyNameSchema = (control.value.schema as any).propertyNames;
     }
 
     if (
+      control.value.schema &&
+      control.value.schema.patternProperties &&
       typeof control.value.schema.additionalProperties !== 'object' &&
       typeof control.value.schema.patternProperties === 'object'
     ) {
@@ -277,11 +297,7 @@ export default defineComponent({
       ).compile(propertyNameSchema);
     }
 
-    const vuetifyProps = (path: string) => {
-      const props = get(appliedOptions.value?.vuetify, path);
-
-      return props && isPlainObject(props) ? props : {};
-    };
+    const vuetifyProps = useVuetifyProps(appliedOptions);
 
     const t = useTranslator();
     return {
@@ -311,6 +327,7 @@ export default defineComponent({
     },
     maxPropertiesReached(): boolean {
       return (
+        this.control.schema &&
         this.control.schema.maxProperties !== undefined && // we have maxProperties constraint
         this.control.data && // we have data to check
         // the current number of properties in the object is greater or equals to the maxProperties
@@ -328,6 +345,7 @@ export default defineComponent({
     },
     minPropertiesReached(): boolean {
       return (
+        this.control.schema &&
         this.control.schema.minProperties !== undefined && // we have minProperties constraint
         this.control.data && // we have data to check
         // the current number of properties in the object is less or equals to the minProperties
@@ -380,9 +398,10 @@ export default defineComponent({
       const additionalProperties = this.control.schema.additionalProperties;
 
       const label =
+        additionalProperties &&
         typeof additionalProperties === 'object' &&
-        Object.prototype.hasOwnProperty.call(additionalProperties, 'title')
-          ? additionalProperties.title ?? 'Additional Properties'
+        additionalProperties.title
+          ? additionalProperties.title
           : 'Additional Properties';
 
       return this.t(this.i18nKey('title'), label);
@@ -415,7 +434,7 @@ export default defineComponent({
       handler(newData) {
         // revert back any undefined values back to the default value when the key is part of the addtional properties since we want to preserved the key
         // for example when we have a string additonal property then when we clear the text component the componet by default sets the value to undefined to remove the property from the object - for additional properties we do not want that behaviour
-        if (typeof this.control.data === 'object') {
+        if (this.control.data && typeof this.control.data === 'object') {
           const keys = Object.keys(newData);
           let hasChanges = false;
           this.additionalPropertyItems.forEach((ap) => {
@@ -463,6 +482,7 @@ export default defineComponent({
         }
 
         if (
+          this.control.data &&
           typeof this.control.data === 'object' &&
           additionalProperty.schema
         ) {
@@ -479,7 +499,7 @@ export default defineComponent({
       this.additionalPropertyItems = this.additionalPropertyItems.filter(
         (d) => d.propertyName !== propName
       );
-      if (typeof this.control.data === 'object') {
+      if (this.control.data && typeof this.control.data === 'object') {
         delete this.control.data[propName];
         this.input.handleChange(this.control.path, this.control.data);
       }
diff --git a/vue2-vuetify/src/controls/IntegerControlRenderer.vue b/vue2-vuetify/src/controls/IntegerControlRenderer.vue
index 2c418566..76e041a2 100644
--- a/vue2-vuetify/src/controls/IntegerControlRenderer.vue
+++ b/vue2-vuetify/src/controls/IntegerControlRenderer.vue
@@ -21,7 +21,7 @@
         :error-messages="control.errors"
         :value="inputValue"
         :clearable="hover"
-        v-bind="vuetifyProps('v-text-field')"
+        v-bind="vuetifyProps('v-text-field', { type: 'number' })"
         @input="onInputChange"
         @focus="isFocused = true"
         @blur="isFocused = false"
diff --git a/vue2-vuetify/src/controls/NumberControlRenderer.vue b/vue2-vuetify/src/controls/NumberControlRenderer.vue
index ccd61557..549dc2e4 100644
--- a/vue2-vuetify/src/controls/NumberControlRenderer.vue
+++ b/vue2-vuetify/src/controls/NumberControlRenderer.vue
@@ -21,7 +21,7 @@
         :error-messages="control.errors"
         :value="inputValue"
         :clearable="hover"
-        v-bind="vuetifyProps('v-text-field')"
+        v-bind="vuetifyProps('v-text-field', { type: 'number' })"
         @input="onInputChange"
         @focus="isFocused = true"
         @blur="isFocused = false"
diff --git a/vue2-vuetify/src/controls/components/ValidationBadge.vue b/vue2-vuetify/src/controls/components/ValidationBadge.vue
index b119a58f..de1f4f8d 100644
--- a/vue2-vuetify/src/controls/components/ValidationBadge.vue
+++ b/vue2-vuetify/src/controls/components/ValidationBadge.vue
@@ -17,7 +17,7 @@
         </v-badge>
       </template>
 
-      <p>Validation Errors</p>
+      <p>{{ header }}</p>
       <p
         v-for="(message, index) in tooltipMessages"
         :key="`${index}`"
@@ -76,6 +76,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    header: {
+      type: String,
+      default: 'Validation Errors',
+    },
   },
   computed: {
     tooltipMessages(): string[] {
diff --git a/vue2-vuetify/src/layouts/CategorizationRenderer.vue b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
index f422bcd8..798eddd1 100644
--- a/vue2-vuetify/src/layouts/CategorizationRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationRenderer.vue
@@ -1,7 +1,11 @@
 <template>
-  <v-container v-if="layout.visible" :class="styles.categorization.root">
+  <v-container
+    v-if="layout.visible"
+    :class="styles.categorization.root"
+    v-bind="vuetifyProps('v-container')"
+  >
     <v-row
-      v-if="appliedOptions.vertical == true"
+      v-if="appliedOptions.vertical === true"
       v-bind="vuetifyProps('v-row')"
     >
       <v-col v-bind="vuetifyProps('v-col.v-tabs')">
@@ -13,6 +17,7 @@
           <v-tab
             v-for="(_, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab')"
           >
             {{ visibleCategoryLabels[index] }}
           </v-tab>
@@ -27,6 +32,7 @@
           <v-tab-item
             v-for="(element, index) in visibleCategories"
             :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab-item')"
           >
             <dispatch-renderer
               :schema="layout.schema"
@@ -41,33 +47,37 @@
       </v-col>
     </v-row>
     <v-row v-else v-bind="vuetifyProps('v-row')">
-      <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
-        <v-tab
-          v-for="(_, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
-        >
-          {{ visibleCategoryLabels[index] }}
-        </v-tab>
-      </v-tabs>
+      <v-col v-bind="vuetifyProps('v-col.v-tabs')">
+        <v-tabs v-model="activeCategory" v-bind="vuetifyProps('v-tabs')">
+          <v-tab
+            v-for="(_, index) in visibleCategories"
+            :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab')"
+          >
+            {{ visibleCategoryLabels[index] }}
+          </v-tab>
+        </v-tabs>
 
-      <v-tabs-items
-        v-model="activeCategory"
-        v-bind="vuetifyProps('v-tabs-items')"
-      >
-        <v-tab-item
-          v-for="(element, index) in visibleCategories"
-          :key="`${layout.path}-${index}`"
+        <v-tabs-items
+          v-model="activeCategory"
+          v-bind="vuetifyProps('v-tabs-items')"
         >
-          <dispatch-renderer
-            :schema="layout.schema"
-            :uischema="element"
-            :path="layout.path"
-            :enabled="layout.enabled"
-            :renderers="layout.renderers"
-            :cells="layout.cells"
-          />
-        </v-tab-item>
-      </v-tabs-items>
+          <v-tab-item
+            v-for="(element, index) in visibleCategories"
+            :key="`${layout.path}-${index}`"
+            v-bind="vuetifyProps('v-tab-item')"
+          >
+            <dispatch-renderer
+              :schema="layout.schema"
+              :uischema="element"
+              :path="layout.path"
+              :enabled="layout.enabled"
+              :renderers="layout.renderers"
+              :cells="layout.cells"
+            />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-col>
     </v-row>
   </v-container>
 </template>
diff --git a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
index 58bb38b8..48402593 100644
--- a/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
+++ b/vue2-vuetify/src/layouts/CategorizationStepperRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="layout.visible" :class="styles.categorization.root">
     <v-stepper
-      v-if="appliedOptions.vertical == true"
-      non-linear
+      v-if="appliedOptions.vertical === true"
       v-model="activeCategory"
+      vertical
       v-bind="vuetifyProps('v-stepper')"
     >
       <template v-for="(element, index) in visibleCategories">
@@ -11,12 +11,17 @@
           :key="`${layout.path}-${index}`"
           :step="index + 1"
           editable
+          v-bind="vuetifyProps('v-stepper-step')"
         >
           {{ visibleCategoryLabels[index] }}
         </v-stepper-step>
 
-        <v-stepper-content :key="`${layout.path}-${index}`" :step="index + 1">
-          <v-card elevation="0">
+        <v-stepper-content
+          :key="`${layout.path}-${index}`"
+          :step="index + 1"
+          v-bind="vuetifyProps('v-stepper-content')"
+        >
+          <v-card v-bind="vuetifyProps('v-card')">
             <dispatch-renderer
               :schema="layout.schema"
               :uischema="element"
@@ -29,24 +34,33 @@
             <div v-if="!!appliedOptions.showNavButtons">
               <v-divider></v-divider>
 
-              <v-card-actions>
+              <v-card-actions v-bind="vuetifyProps('v-card-actions')">
                 <v-btn
                   text
                   left
                   :disabled="activeCategory - 1 <= 0"
                   @click="activeCategory--"
+                  v-bind="vuetifyProps('v-btn.back')"
                 >
-                  Back
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.back', { label: 'Back' }).label
+                    )
+                  }}
                 </v-btn>
                 <v-spacer></v-spacer>
                 <v-btn
                   text
                   right
-                  color="primary"
                   :disabled="activeCategory - 1 >= visibleCategories.length - 1"
                   @click="activeCategory++"
+                  v-bind="vuetifyProps('v-btn.next', { color: 'primary' })"
                 >
-                  Next
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.next', { label: 'Next' }).label
+                    )
+                  }}
                 </v-btn>
               </v-card-actions>
             </div>
@@ -56,16 +70,16 @@
     </v-stepper>
     <v-stepper
       v-else
-      non-linear
       v-model="activeCategory"
       v-bind="vuetifyProps('v-stepper')"
     >
-      <v-stepper-header>
+      <v-stepper-header v-bind="vuetifyProps('v-stepper-header')">
         <template v-for="(_, index) in visibleCategories">
           <v-stepper-step
             :key="`${layout.path}-${index}`"
             :step="index + 1"
             editable
+            v-bind="vuetifyProps('v-stepper-step')"
           >
             {{ visibleCategoryLabels[index] }}
           </v-stepper-step>
@@ -76,13 +90,14 @@
         </template>
       </v-stepper-header>
 
-      <v-stepper-items>
+      <v-stepper-items v-bind="vuetifyProps('v-stepper-items')">
         <v-stepper-content
           v-for="(element, index) in visibleCategories"
           :key="`${layout.path}-${index}`"
           :step="index + 1"
+          v-bind="vuetifyProps('v-stepper-content')"
         >
-          <v-card elevation="0">
+          <v-card v-bind="vuetifyProps('v-card')">
             <dispatch-renderer
               :schema="layout.schema"
               :uischema="element"
@@ -95,24 +110,34 @@
             <div v-if="!!appliedOptions.showNavButtons">
               <v-divider></v-divider>
 
-              <v-card-actions>
+              <v-card-actions v-bind="vuetifyProps('v-card-actions')">
                 <v-btn
                   text
                   left
                   :disabled="activeCategory - 1 <= 0"
                   @click="activeCategory--"
+                  v-bind="vuetifyProps('v-btn.back')"
                 >
-                  Back
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.back', { label: 'Back' }).label
+                    )
+                  }}
                 </v-btn>
                 <v-spacer></v-spacer>
                 <v-btn
-                  text
                   right
-                  color="primary"
                   :disabled="activeCategory - 1 >= visibleCategories.length - 1"
                   @click="activeCategory++"
+                  v-bind="
+                    vuetifyProps('v-btn.next', { color: 'primary', text: true })
+                  "
                 >
-                  Next
+                  {{
+                    translateByText(
+                      vuetifyProps('v-btn.next', { label: 'Next' }).label
+                    )
+                  }}
                 </v-btn>
               </v-card-actions>
             </div>
@@ -202,6 +227,11 @@ const layoutRenderer = defineComponent({
       });
     },
   },
+  methods: {
+    translateByText(text: string): string {
+      return this.t(text, text);
+    },
+  },
 });
 
 export default layoutRenderer;
diff --git a/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue b/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
index 4be8e16b..1150ae9c 100644
--- a/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
+++ b/vue2-vuetify/src/layouts/VerticalLayoutRenderer.vue
@@ -1,7 +1,6 @@
 <template>
   <v-container
     v-if="layout.visible"
-    fill-height
     :class="`${styles.verticalLayout.root}`"
     v-bind="vuetifyProps('v-container')"
   >
diff --git a/vue2-vuetify/src/util/composition.ts b/vue2-vuetify/src/util/composition.ts
index 140c6d78..f8644f48 100644
--- a/vue2-vuetify/src/util/composition.ts
+++ b/vue2-vuetify/src/util/composition.ts
@@ -40,6 +40,20 @@ export const useComputedLabel = <I extends { control: any }>(
   });
 };
 
+export const useVuetifyProps = (
+  appliedOptions: ComputedRef<Record<string, any>>
+) => {
+  return (path: string, defaultProps?: Record<string, any>) => {
+    const props = get(appliedOptions.value?.vuetify, path);
+
+    if (props && isPlainObject(props)) {
+      return defaultProps ? merge({}, defaultProps, props) : props;
+    } else {
+      return defaultProps ?? {};
+    }
+  };
+};
+
 /**
  * Adds styles, appliedOptions and vuetifyProps
  */
@@ -52,11 +66,8 @@ export const useVuetifyLabel = <I extends { label: any }>(input: I) => {
       cloneDeep(input.label.value.uischema.options)
     )
   );
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
-    return props && isPlainObject(props) ? props : {};
-  };
   return {
     ...input,
     appliedOptions,
@@ -106,11 +117,7 @@ export const useVuetifyControl = <
 
   const styles = useStyles(input.control.value.uischema);
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,
@@ -160,11 +167,7 @@ export const useVuetifyLayout = <I extends { layout: any }>(input: I) => {
     );
   });
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,
@@ -184,11 +187,7 @@ export const useVuetifyArrayControl = <I extends { control: any }>(
 
   const computedLabel = useComputedLabel(input, appliedOptions);
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   const childLabelForIndex = (index: number | null) => {
     if (index === null) {
@@ -231,11 +230,7 @@ export const useVuetifyBasicControl = <I extends { control: any }>(
 ) => {
   const appliedOptions = useControlAppliedOptions(input);
 
-  const vuetifyProps = (path: string) => {
-    const props = get(appliedOptions.value?.vuetify, path);
-
-    return props && isPlainObject(props) ? props : {};
-  };
+  const vuetifyProps = useVuetifyProps(appliedOptions);
 
   return {
     ...input,