diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index 54d30dba5a..c0b698dd4f 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -22,7 +22,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 			<input :id="id"
 				ref="checkbox"
 				:disabled="disabled"
-				:checked="checked"
+				:checked="model"
 				:value="value"
 				:class="{ focusable: isFocusable }"
 				type="checkbox"
@@ -38,6 +38,7 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -65,12 +66,21 @@ export default {
 
 		/**
 		 * checked state of the the checkbox element
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: Boolean,
 			default: false,
 		},
 
+		/**
+		 * checked state of the the checkbox element
+		 */
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * value of the checkbox input
 		 */
@@ -92,9 +102,23 @@ export default {
 		'change',
 		'check',
 		'uncheck',
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'update:checked',
+		/**
+		 * Emitted when the checkbox state is changed
+		 *
+		 * @type {boolean}
+		 */
+		'update:modelValue',
 	],
 
+	setup() {
+		const { model } = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -112,7 +136,7 @@ export default {
 		 */
 		ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -124,12 +148,7 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			/**
-			 * Emitted when the checkbox state is changed
-			 *
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.checkbox.checked)
+			this.model = this.$refs.checkbox.checked
 
 			/**
 			 * Emitted when the checkbox state is changed
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index ae3a46593b..6c064a2a93 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/src/components/NcActionRadio/NcActionRadio.vue
@@ -41,6 +41,7 @@ So that only one of each name set can be selected at the same time.
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionGlobalMixin from '../../mixins/actionGlobal.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -68,12 +69,21 @@ export default {
 
 		/**
 		 * checked state of the the radio element
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: Boolean,
 			default: false,
 		},
 
+		/**
+		 * checked state of the the radio element
+		 */
+		modelValue: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Define if this radio is part of a set.
 		 * Checking the radio will disable all the
@@ -102,10 +112,23 @@ export default {
 	},
 
 	emits: [
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'update:checked',
+		/**
+		 * The radio state is changed
+		 * @type {boolean}
+		 */
+		'update:modelValue',
 		'change',
 	],
 
+	setup() {
+		const { model } = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -123,7 +146,7 @@ export default {
 		 */
 		 ariaChecked() {
 			if (this.isInSemanticMenu) {
-				return this.checked ? 'true' : 'false'
+				return this.model ? 'true' : 'false'
 			}
 			return undefined
 		},
@@ -135,12 +158,7 @@ export default {
 			this.$refs.label.click()
 		},
 		onChange(event) {
-			/**
-			 * Emitted when the radio state is changed
-			 *
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.radio.checked)
+			this.model = this.$refs.radio.checked
 
 			/**
 			 * Emitted when the radio state is changed
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 29d91bb237..ed65a599e6 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -10,17 +10,17 @@ All undocumented attributes will be bound to the textarea. e.g. `maxlength`
 ```
 <template>
 	<NcActions>
-		<NcActionTextEditable value="This is a textarea">
+		<NcActionTextEditable :modelValue.sync="This is a textarea">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable :disabled="true" value="This is a disabled textarea">
+		<NcActionTextEditable :modelValue.sync="This is a disabled textarea" disabled>
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
 		</NcActionTextEditable>
-		<NcActionTextEditable name="Please edit the text" value="This is a textarea with name">
+		<NcActionTextEditable :modelValue.sync="This is a textarea with name" name="Please edit the text">
 			<template #icon>
 				<Pencil :size="20" />
 			</template>
@@ -34,6 +34,14 @@ export default {
 	components: {
 		Pencil,
 	},
+
+	data() {
+		return {
+			text1: 'This is a textarea',
+			text2: 'This is a disabled textarea',
+			text3: 'This is a textarea with name',
+		}
+	}
 }
 </script>
 ```
@@ -66,7 +74,7 @@ export default {
 
 				<textarea :id="computedId"
 					:disabled="disabled"
-					:value="value"
+					:value="model"
 					v-bind="$attrs"
 					:class="['action-text-editable__textarea', { focusable: isFocusable }]"
 					@input="onInput" />
@@ -82,6 +90,7 @@ export default {
 </template>
 
 <script>
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 import ActionTextMixin from '../../mixins/actionText.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
@@ -114,19 +123,36 @@ export default {
 		},
 		/**
 		 * value attribute of the input field
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		value: {
 			type: String,
 			default: '',
 		},
+		/**
+		 * value attribute of the input field
+		 */
+		modelValue: {
+			type: String,
+			default: '',
+		},
 	},
 
 	emits: [
 		'input',
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'update:value',
+		'update:modelValue',
 		'submit',
 	],
 
+	setup() {
+		const { model } = useModelMigration('value', 'update:value')
+		return {
+			model,
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -150,12 +176,8 @@ export default {
 			 * @type {Event|Date}
 			 */
 			this.$emit('input', event)
-			/**
-			 * Emitted when the inputs value changes
-			 *
-			 * @type {string|Date}
-			 */
-			this.$emit('update:value', event.target.value)
+			
+			this.model = event.target.value
 		},
 		onSubmit(event) {
 			event.preventDefault()
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 5bcbc9a115..fa13f23154 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -300,6 +300,7 @@ export default {
 import NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'
 import GenRandomId from '../../utils/GenRandomId.js'
 import { t, n } from '../../l10n.js'
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 
 export default {
 	name: 'NcCheckboxRadioSwitch',
@@ -388,12 +389,21 @@ export default {
 
 		/**
 		 * Checked state. To be used with `:value.sync`
+		 * @deprecated Removed in v9 - use `modelValue` instead
 		 */
 		checked: {
 			type: [Boolean, Array, String],
 			default: false,
 		},
 
+		/**
+		 * Checkbox value
+		 */
+		modelValue: {
+			type: [Boolean, Array, String],
+			default: false,
+		},
+
 		/**
 		 * Value to be synced on check
 		 */
@@ -447,7 +457,18 @@ export default {
 		},
 	},
 
-	emits: ['update:checked'],
+	emits: [
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
+		'update:checked',
+		'update:modelValue',
+	],
+
+	setup() {
+		const { model } = useModelMigration('checked', 'update:checked')
+		return {
+			model,
+		}
+	},
 
 	computed: {
 		dataAttrs() {
@@ -531,18 +552,18 @@ export default {
 		/**
 		 * Check if that entry is checked
 		 * If value is defined, we use that as the checked value
-		 * If not, we expect true/false in this.checked
+		 * If not, we expect true/false in checked state
 		 *
 		 * @return {boolean}
 		 */
 		isChecked() {
 			if (this.value !== null) {
-				if (Array.isArray(this.checked)) {
-					return [...this.checked].indexOf(this.value) > -1
+				if (Array.isArray(this.model)) {
+					return [...this.model].indexOf(this.value) > -1
 				}
-				return this.checked === this.value
+				return this.model === this.value
 			}
-			return this.checked === true
+			return this.model === true
 		},
 
 		hasIndeterminate() {
@@ -555,7 +576,7 @@ export default {
 
 	mounted() {
 		if (this.name && this.type === TYPE_CHECKBOX) {
-			if (!Array.isArray(this.checked)) {
+			if (!Array.isArray(this.model)) {
 				throw new Error('When using groups of checkboxes, the updated value will be an array.')
 			}
 		}
@@ -566,7 +587,7 @@ export default {
 		}
 
 		// https://material.io/components/checkboxes#usage
-		if (typeof this.checked !== 'boolean' && this.type === TYPE_SWITCH) {
+		if (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {
 			throw new Error('Switches can only be used with boolean as checked prop.')
 		}
 	},
@@ -582,19 +603,19 @@ export default {
 
 			// If this is a radio, there can only be one value
 			if (this.type === TYPE_RADIO) {
-				this.$emit('update:checked', this.value)
+				this.model = this.value
 				return
 			}
 
 			// If this is a radio, there can only be one value
 			if (this.type === TYPE_SWITCH) {
-				this.$emit('update:checked', !this.isChecked)
+				this.model = !this.isChecked
 				return
 			}
 
 			// If the initial value was a boolean, let's keep it that way
-			if (typeof this.checked === 'boolean') {
-				this.$emit('update:checked', !this.checked)
+			if (typeof this.model === 'boolean') {
+				this.model = !this.model
 				return
 			}
 
@@ -604,9 +625,9 @@ export default {
 				.map(input => input.value)
 
 			if (values.includes(this.value)) {
-				this.$emit('update:checked', values.filter((v) => v !== this.value))
+				this.model = values.filter((v) => v !== this.value)
 			} else {
-				this.$emit('update:checked', [...values, this.value])
+				this.model = [...values, this.value]
 			}
 		},
 
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index 5bfd127367..157a60a380 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -217,6 +217,7 @@ import Check from 'vue-material-design-icons/Check.vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 
 import { Chrome } from 'vue-color'
+import { useModelMigration } from '../../composables/private/useModelMigration.js'
 
 const HEX_REGEX = /^#([a-f0-9]{3}|[a-f0-9]{6})$/i
 
@@ -235,10 +236,19 @@ export default {
 	props: {
 		/**
 		 * A HEX color that represents the initial value of the picker
+		 * @deprecated Removed in v9 - use `value` instead
 		 */
 		value: {
 			type: String,
-			required: true,
+			required: false,
+		},
+
+		/**
+		 * A HEX color that represents the initial value of the picker
+		 */
+		modelValue: {
+			type: String,
+			required: false,
 		},
 
 		/**
@@ -287,13 +297,22 @@ export default {
 		'submit',
 		'close',
 		'update:open',
+		/** @deprecated Removed in v9 - use `update:modelValue` instead */
 		'update:value',
+		'update:modelValue',
 		'input',
 	],
 
+	setup() {
+		const { model } = useModelMigration('value', 'update:value')
+		return {
+			model,
+		}
+	},
+
 	data() {
 		return {
-			currentColor: this.value,
+			currentColor: this.model,
 			advanced: false,
 			ariaBack: t('Back'),
 			ariaMore: t('More options'),
@@ -321,7 +340,7 @@ export default {
 	},
 
 	watch: {
-		value(color) {
+		model(color) {
 			this.currentColor = color
 		},
 	},
@@ -370,10 +389,8 @@ export default {
 			}
 			this.currentColor = color
 
-			/**
-			 * Emits a hexadecimal string e.g. '#ffffff'
-			 */
-			this.$emit('update:value', color)
+
+			this.model = color
 
 			/**
 			 * Emits a hexadecimal string e.g. '#ffffff'
diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
index aecc3065a9..75a74ed7ac 100644
--- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
+++ b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -151,12 +151,24 @@ export default {
 		 * The selected time zone does not have an influence of the selected time and date value.
 		 * You have to translate the time yourself when you want to factor in time zones.
 		 * Pass null to clear the input field.
+		 * @deprecated Removed in v9. Use `modelValue` instead.
 		 */
 		value: {
 			type: Date,
 			default: null,
 		},
 
+		/**
+		 * The date is – like the `Date` object in JavaScript – tied to UTC.
+		 * The selected time zone does not have an influence of the selected time and date value.
+		 * You have to translate the time yourself when you want to factor in time zones.
+		 * Pass null to clear the input field.
+		 */
+		modelValue: {
+			type: Date,
+			default: null,
+		},
+
 		/**
 		 * id attribute of the input field
 		 */
@@ -219,6 +231,7 @@ export default {
 
 	emits: [
 		'input',
+		'update:modelValue',
 	],
 
 	computed: {
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index 5a084ab3c4..eaf89ff1e4 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -40,7 +40,7 @@ For a list of all available props and attributes, please check the [HTMLInputEle
 						'input-field__input--success': success,
 						'input-field__input--error': error,
 					}]"
-				:value="value.toString()"
+				:value="valueWithMigration?.toString()"
 				v-on="$listeners"
 				@input="handleInput">
 			<!-- Label -->
@@ -97,6 +97,7 @@ import GenRandomId from '../../utils/GenRandomId.js'
 
 import AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'
 import Check from 'vue-material-design-icons/Check.vue'
+import { useModelMigration } from '../../composables/private/useModelMigration.js';
 
 export default {
 	name: 'NcInputField',
@@ -113,10 +114,25 @@ export default {
 		/**
 		 * The value of the input field
 		 * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
+		 * @deprecated Removed in v9. Use `modelValue` instead.
 		 */
 		value: {
 			type: [String, Number],
-			required: true,
+			required: false,
+			default: undefined,
+		},
+
+		/**
+		 * The value of the input field
+		 * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
+		 */
+		modelValue: {
+			type: [String, Number],
+			required: false,
+			default: undefined,
+			validator(modelValue) {
+				return modelValue !== undefined && this.value !== undefined
+			},
 		},
 
 		/**
@@ -244,10 +260,30 @@ export default {
 
 	emits: [
 		'update:value',
+		'update:modelValue',
 		'trailing-button-click',
 	],
 
+	model: {
+		prop: 'modelValue',
+		event: 'update:modelValue',
+	},
+
+	setup() {
+		const { model } = useModelMigration('value', 'update:value')
+		return {
+			model,
+		}
+	},
+
 	computed: {
+		valueWithMigration() {
+			if (this.value !== undefined) {
+				return this.value
+			}
+			return this.modelValue
+		},
+
 		computedId() {
 			return this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName
 		},
@@ -312,7 +348,8 @@ export default {
 		},
 
 		handleInput(event) {
-			this.$emit('update:value', this.type === 'number' && typeof this.value === 'number' ? parseFloat(event.target.value, 10) : event.target.value)
+			const newValue = this.type === 'number' && typeof this.value === 'number' ? parseFloat(event.target.value, 10) : event.target.value
+			this.model = newValue
 		},
 
 		handleTrailingButtonClick(event) {
diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
index 0d04525197..6445f2e0ff 100644
--- a/src/components/NcTextField/NcTextField.vue
+++ b/src/components/NcTextField/NcTextField.vue
@@ -201,6 +201,7 @@ export default {
 
 	emits: [
 		'update:value',
+		'update:modelValue',
 	],
 
 	computed: {
@@ -245,6 +246,7 @@ export default {
 
 		handleInput(event) {
 			this.$emit('update:value', event.target.value)
+			this.$emit('update:modelValue', event.target.value)
 		},
 	},
 }
diff --git a/src/composables/private/useModelMigration.js b/src/composables/private/useModelMigration.js
new file mode 100644
index 0000000000..d1a166856d
--- /dev/null
+++ b/src/composables/private/useModelMigration.js
@@ -0,0 +1,27 @@
+import { getCurrentInstance } from "vue"
+import { computed } from "vue"
+
+export function useModelMigration(oldModelName, oldModelEvent) {
+    const instance = getCurrentInstance()
+    console.log('instance', instance)
+    const props = getCurrentInstance().$props
+    const emit = getCurrentInstance().$emit
+
+    const model = computed({
+        get() {
+            if (props[oldModelName] !== undefined) {
+                return props[oldModelName]
+            }
+            return props.modelValue
+        },
+
+        set(value) {
+            emit('update:modelValue', value)
+            emit(oldModelEvent, value)
+        }
+    })
+
+    return {
+        model,
+    }
+}
\ No newline at end of file