Add form support to `Checkbox`

packages/primevue/src/checkbox/BaseCheckbox.vue

@@ -1,18 +1,13 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseInput from '@primevue/core/baseinput';
 import CheckboxStyle from 'primevue/checkbox/style';
 
 export default {
     name: 'BaseCheckbox',
-    extends: BaseComponent,
+    extends: BaseInput,
     props: {
         value: null,
-        modelValue: null,
         binary: Boolean,
-        name: {
-            type: String,
-            default: null
-        },
         indeterminate: {
             type: Boolean,
             default: false
@@ -25,18 +20,6 @@ export default {
             type: null,
             default: false
         },
-        variant: {
-            type: String,
-            default: null
-        },
-        invalid: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
         readonly: {
             type: Boolean,
             default: false

packages/primevue/src/checkbox/Checkbox.vue

@@ -40,7 +40,7 @@ export default {
     name: 'Checkbox',
     extends: BaseCheckbox,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'focus', 'blur', 'update:indeterminate'],
+    emits: ['change', 'focus', 'blur', 'update:indeterminate'],
     data() {
         return {
             d_indeterminate: this.indeterminate
@@ -70,8 +70,8 @@ export default {
                 if (this.binary) {
                     newModelValue = this.d_indeterminate ? this.trueValue : this.checked ? this.falseValue : this.trueValue;
                 } else {
-                    if (this.checked || this.d_indeterminate) newModelValue = this.modelValue.filter((val) => !equals(val, this.value));
-                    else newModelValue = this.modelValue ? [...this.modelValue, this.value] : [this.value];
+                    if (this.checked || this.d_indeterminate) newModelValue = this.d_value.filter((val) => !equals(val, this.value));
+                    else newModelValue = this.d_value ? [...this.d_value, this.value] : [this.value];
                 }
 
                 if (this.d_indeterminate) {
@@ -79,7 +79,7 @@ export default {
                     this.$emit('update:indeterminate', this.d_indeterminate);
                 }
 
-                this.$emit('update:modelValue', newModelValue);
+                this.updateValue(newModelValue, event);
                 this.$emit('change', event);
             }
         },
@@ -88,11 +88,12 @@ export default {
         },
         onBlur(event) {
             this.$emit('blur', event);
+            this.formField.onBlur?.(event);
         }
     },
     computed: {
         checked() {
-            return this.d_indeterminate ? false : this.binary ? this.modelValue === this.trueValue : contains(this.value, this.modelValue);
+            return this.d_indeterminate ? false : this.binary ? this.d_value === this.trueValue : contains(this.value, this.d_value);
         }
     },
     components: {

packages/primevue/src/checkbox/style/CheckboxStyle.js

@@ -120,8 +120,8 @@ const classes = {
         {
             'p-checkbox-checked': instance.checked,
             'p-disabled': props.disabled,
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
+            'p-invalid': instance.$invalid,
+            'p-variant-filled': instance.$variant === 'filled'
         }
     ],
     box: 'p-checkbox-box',