diff --git a/packages/primevue/src/togglebutton/BaseToggleButton.vue b/packages/primevue/src/togglebutton/BaseToggleButton.vue
index a721fa68d..96fc60097 100644
--- a/packages/primevue/src/togglebutton/BaseToggleButton.vue
+++ b/packages/primevue/src/togglebutton/BaseToggleButton.vue
@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import ToggleButtonStyle from 'primevue/togglebutton/style';
 
 export default {
     name: 'BaseToggleButton',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: Boolean,
         onIcon: String,
         offIcon: String,
         onLabel: {
@@ -21,14 +20,6 @@ export default {
             type: String,
             default: 'left'
         },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false
diff --git a/packages/primevue/src/toggleswitch/ToggleSwitch.vue b/packages/primevue/src/toggleswitch/ToggleSwitch.vue
index 2044eb19e..752c4807a 100755
--- a/packages/primevue/src/toggleswitch/ToggleSwitch.vue
+++ b/packages/primevue/src/toggleswitch/ToggleSwitch.vue
@@ -34,7 +34,7 @@ export default {
     name: 'ToggleSwitch',
     extends: BaseToggleSwitch,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    emits: ['change', 'focus', 'blur'],
     methods: {
         getPTOptions(key) {
             const _ptm = key === 'root' ? this.ptmi : this.ptm;
@@ -50,7 +50,7 @@ export default {
             if (!this.disabled && !this.readonly) {
                 const newValue = this.checked ? this.falseValue : this.trueValue;
 
-                this.$emit('update:modelValue', newValue);
+                this.updateValue(newValue, event);
                 this.$emit('change', event);
             }
         },
@@ -59,11 +59,12 @@ export default {
         },
         onBlur(event) {
             this.$emit('blur', event);
+            this.formField.onBlur?.(event);
         }
     },
     computed: {
         checked() {
-            return this.modelValue === this.trueValue;
+            return this.d_value === this.trueValue;
         }
     }
 };
diff --git a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
index dc1c8a854..d61c97576 100644
--- a/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
+++ b/packages/primevue/src/toggleswitch/style/ToggleSwitchStyle.js
@@ -120,7 +120,7 @@ const classes = {
         {
             'p-toggleswitch-checked': instance.checked,
             'p-disabled': props.disabled,
-            'p-invalid': props.invalid
+            'p-invalid': instance.$invalid
         }
     ],
     input: 'p-toggleswitch-input',