diff --git a/docs/pages/kcheckbox.vue b/docs/pages/kcheckbox.vue
index a64a3d1e8..1f75dfc4f 100644
--- a/docs/pages/kcheckbox.vue
+++ b/docs/pages/kcheckbox.vue
@@ -8,14 +8,12 @@
       <p>The checkbox is generally used to select one of two possible values in a form.</p>
       <DocsShow>
         <KCheckbox
+          v-model="checked1"
           label="Some label"
-          :checked="checked1"
-          @change="checked1 = !checked1"
         />
         <KCheckbox
+          v-model="checked2"
           label="Another label"
-          :checked="checked2"
-          @change="checked2 = !checked2"
         />
       </DocsShow>
     </DocsPageSection>
@@ -48,16 +46,19 @@
       title="States"
       anchor="#states"
     >
-      <p>The checked state represents an affirmative value.</p>
+      <p>
+        The <code>v-model</code> or <code>checked</code> checkbox state represents an affirmative
+        value.
+      </p>
       <p>
         Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where
         the value is neither true nor false, such as when a subset of a topic is selected:
       </p>
       <DocsShow>
         <KCheckbox
+          v-model="checked3"
           label="Topic is selected"
           :indeterminate="indeterminate3"
-          :checked="checked3"
           @change="handle3"
         />
       </DocsShow>
@@ -81,9 +82,8 @@
       <!-- eslint-enable -->
       <DocsShow>
         <KCheckbox
+          v-model="checked4"
           label="First lesson"
-          :checked="checked4"
-          @change="checked4 = !checked4"
         />
       </DocsShow>
 
@@ -102,10 +102,7 @@
       </DocsShowCode>
       <!-- eslint-enable -->
       <DocsShow>
-        <KCheckbox
-          :checked="checked5"
-          @change="checked5 = !checked5"
-        >
+        <KCheckbox v-model="checked5">
           <KLabeledIcon
             icon="lesson"
             label="First lesson"
@@ -137,6 +134,142 @@
         </template>
       </DocsDoNot>
     </DocsPageSection>
+
+    <DocsPageSection
+      title="Example: v-model"
+      anchor="#example-v-model"
+    >
+      <code>v-model</code> supports array, boolean, number, string, and object.
+
+      <h3>
+        Array
+        <DocsAnchorTarget anchor="#v-model-array" />
+      </h3>
+      <p>
+        Each <code>value</code> will be added/removed from the <code>selectedGroupIds</code> array
+        based on each checkbox state.
+      </p>
+      <DocsExample
+        exampleId="v-model-array"
+        loadExample="KCheckbox/VModelArray.vue"
+      >
+        <template #html>
+          <!-- eslint-disable -->
+          <!-- prettier-ignore -->
+          <DocsShowCode language="html">
+            <KCheckbox
+              v-for="group in groups"
+              :key="group.id"
+              v-model="selectedGroupIds"
+              :label="group.name"
+              :value="group.id"
+            />
+          </DocsShowCode>
+          <!-- eslint-enable -->
+        </template>
+      </DocsExample>
+
+      <h3>
+        Boolean
+        <DocsAnchorTarget anchor="#v-model-boolean" />
+      </h3>
+      <p>
+        If checked, <code>isSelected</code> will become <code>true</code>, otherwise
+        <code>false</code>. Note that here, <code>value</code> is not needed.
+      </p>
+      <DocsExample
+        exampleId="v-model-boolean"
+        loadExample="KCheckbox/VModelBoolean.vue"
+      />
+
+      <h3>
+        Number
+        <DocsAnchorTarget anchor="#v-model-number" />
+      </h3>
+      <p>
+        If checked, <code>selectedNumber</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <DocsExample
+        exampleId="v-model-number"
+        loadExample="KCheckbox/VModelNumber.vue"
+      />
+
+      <h3>
+        String
+        <DocsAnchorTarget anchor="#v-model-string" />
+      </h3>
+      <p>
+        If checked, <code>selectedString</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <DocsExample
+        exampleId="v-model-string"
+        loadExample="KCheckbox/VModelString.vue"
+      />
+
+      <h3>
+        Object
+        <DocsAnchorTarget anchor="#v-model-object" />
+      </h3>
+      <p>
+        If checked, <code>selectedObject</code> will be set to <code>value</code>, otherwise
+        <code>null</code>.
+      </p>
+      <DocsExample
+        exampleId="v-model-object"
+        loadExample="KCheckbox/VModelObject.vue"
+      />
+    </DocsPageSection>
+
+    <DocsPageSection
+      title="Example: checked"
+      anchor="#example-checked"
+    >
+      As an alternative to <code>v-model</code>, the combination of <code>:checked</code> and
+      <code>@changed</code> can also be used to dynamically update selected choices.
+
+      <h3>
+        Multiple checkboxes
+        <DocsAnchorTarget anchor="#checked-multiple" />
+      </h3>
+      <p>
+        This example achieves the same result as v-model's
+        <a href="#v-model-array">array example</a>.
+      </p>
+      <DocsExample
+        exampleId="checked-api-multiple"
+        loadExample="KCheckbox/CheckedApiMultiple.vue"
+      >
+        <template #html>
+          <!-- eslint-disable -->
+          <!-- prettier-ignore -->
+          <DocsShowCode language="html">
+            <KCheckbox
+              v-for="group in groups"
+              :label="group.name"
+              :key="group.id"
+              :checked="groupIsSelected(group)"
+              @change="toggleGroup($event, group)"
+            />
+          </DocsShowCode>
+          <!-- eslint-enable -->
+        </template>
+      </DocsExample>
+
+      <h3>
+        Single checkbox
+        <DocsAnchorTarget anchor="#checked-single" />
+      </h3>
+      <p>
+        This example achieves the same result as v-model's
+        <a href="#v-model-boolean">boolean example</a>.
+      </p>
+      <DocsExample
+        exampleId="checked-api-single"
+        loadExample="KCheckbox/CheckedApiSingle.vue"
+      />
+    </DocsPageSection>
   </DocsPageTemplate>
 
 </template>
@@ -157,7 +290,6 @@
     },
     methods: {
       handle3() {
-        this.checked3 = !this.checked3;
         this.indeterminate3 = false;
       },
     },
diff --git a/examples/KCheckbox/CheckedApiMultiple.vue b/examples/KCheckbox/CheckedApiMultiple.vue
new file mode 100644
index 000000000..ffdbaed5f
--- /dev/null
+++ b/examples/KCheckbox/CheckedApiMultiple.vue
@@ -0,0 +1,43 @@
+<template>
+
+  <div>
+    <KCheckbox
+      v-for="group in groups"
+      :key="group.id"
+      :label="group.name"
+      :checked="groupIsSelected(group)"
+      @change="toggleGroup($event, group)"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        groups: [
+          { id: 'group-1', name: 'First group' },
+          { id: 'group-2', name: 'Second group' },
+          { id: 'group-3', name: 'Third group' },
+        ],
+        selectedGroupIds: ['group-1'],
+      };
+    },
+    methods: {
+      groupIsSelected({ id }) {
+        return this.selectedGroupIds.includes(id);
+      },
+      toggleGroup(isChecked, { id }) {
+        if (isChecked) {
+          this.selectedGroupIds = [...this.selectedGroupIds, id];
+        } else {
+          this.selectedGroupIds = this.selectedGroupIds.filter(groupId => groupId !== id);
+        }
+      },
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/CheckedApiSingle.vue b/examples/KCheckbox/CheckedApiSingle.vue
new file mode 100644
index 000000000..7c7e544aa
--- /dev/null
+++ b/examples/KCheckbox/CheckedApiSingle.vue
@@ -0,0 +1,22 @@
+<template>
+
+  <KCheckbox
+    :label="`isSelected = ${isSelected}`"
+    :checked="isSelected"
+    @change="isSelected = $event"
+  />
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        isSelected: true,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/Deselected.vue b/examples/KCheckbox/Deselected.vue
index 1069d29d2..252753333 100644
--- a/examples/KCheckbox/Deselected.vue
+++ b/examples/KCheckbox/Deselected.vue
@@ -1,8 +1,21 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Deselected checkbox"
-    :checked="false"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/DeselectedDisabled.vue b/examples/KCheckbox/DeselectedDisabled.vue
index bfbff53b1..de6180bc3 100644
--- a/examples/KCheckbox/DeselectedDisabled.vue
+++ b/examples/KCheckbox/DeselectedDisabled.vue
@@ -1,9 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Deselected disabled checkbox"
-    :checked="false"
     :disabled="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/Indeterminate.vue b/examples/KCheckbox/Indeterminate.vue
index bf902985f..ceb05babf 100644
--- a/examples/KCheckbox/Indeterminate.vue
+++ b/examples/KCheckbox/Indeterminate.vue
@@ -1,8 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Indeterminate checkbox"
     :indeterminate="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/IndeterminateDisabled.vue b/examples/KCheckbox/IndeterminateDisabled.vue
index 0c100c823..2712f97b1 100644
--- a/examples/KCheckbox/IndeterminateDisabled.vue
+++ b/examples/KCheckbox/IndeterminateDisabled.vue
@@ -1,9 +1,23 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Indeterminate disabled checkbox"
     :indeterminate="true"
     :disabled="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/LabelInDefaultSlot.vue b/examples/KCheckbox/LabelInDefaultSlot.vue
index c516fcd1d..b045decff 100644
--- a/examples/KCheckbox/LabelInDefaultSlot.vue
+++ b/examples/KCheckbox/LabelInDefaultSlot.vue
@@ -1,7 +1,23 @@
 <template>
 
-  <KCheckbox showLabel>
+  <KCheckbox
+    v-model="inputValue"
+    showLabel
+  >
     <span>Label from default slot</span>
   </KCheckbox>
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/Selected.vue b/examples/KCheckbox/Selected.vue
index 13d9ce1da..0e6b0c37d 100644
--- a/examples/KCheckbox/Selected.vue
+++ b/examples/KCheckbox/Selected.vue
@@ -1,8 +1,21 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Selected checkbox"
-    :checked="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: true,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/SelectedDisabled.vue b/examples/KCheckbox/SelectedDisabled.vue
index 7769b99b7..2fcb74c56 100644
--- a/examples/KCheckbox/SelectedDisabled.vue
+++ b/examples/KCheckbox/SelectedDisabled.vue
@@ -1,9 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Selected disabled checkbox"
-    :checked="true"
     :disabled="true"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: true,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/VModelArray.vue b/examples/KCheckbox/VModelArray.vue
new file mode 100644
index 000000000..165edf8cb
--- /dev/null
+++ b/examples/KCheckbox/VModelArray.vue
@@ -0,0 +1,31 @@
+<template>
+
+  <div>
+    <KCheckbox
+      v-for="group in groups"
+      :key="group.id"
+      v-model="selectedGroupIds"
+      :label="group.name"
+      :value="group.id"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        groups: [
+          { id: 'group-1', name: 'First group' },
+          { id: 'group-2', name: 'Second group' },
+          { id: 'group-3', name: 'Third group' },
+        ],
+        selectedGroupIds: ['group-1'],
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/VModelBoolean.vue b/examples/KCheckbox/VModelBoolean.vue
new file mode 100644
index 000000000..5b41501f5
--- /dev/null
+++ b/examples/KCheckbox/VModelBoolean.vue
@@ -0,0 +1,21 @@
+<template>
+
+  <KCheckbox
+    v-model="isSelected"
+    :label="`isSelected = ${isSelected}`"
+  />
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        isSelected: true,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/VModelNumber.vue b/examples/KCheckbox/VModelNumber.vue
new file mode 100644
index 000000000..96b6fb7bd
--- /dev/null
+++ b/examples/KCheckbox/VModelNumber.vue
@@ -0,0 +1,22 @@
+<template>
+
+  <KCheckbox
+    v-model="selectedNumber"
+    :label="`selectedNumber = ${selectedNumber}`"
+    :value="1"
+  />
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        selectedNumber: 1,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/VModelObject.vue b/examples/KCheckbox/VModelObject.vue
new file mode 100644
index 000000000..9bf5a091d
--- /dev/null
+++ b/examples/KCheckbox/VModelObject.vue
@@ -0,0 +1,22 @@
+<template>
+
+  <KCheckbox
+    v-model="selectedObject"
+    :label="`selectedObject = ${JSON.stringify(selectedObject)}`"
+    :value="{ id: 1, name: 'Name 1' }"
+  />
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        selectedObject: { id: 1, name: 'Name 1' },
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/VModelString.vue b/examples/KCheckbox/VModelString.vue
new file mode 100644
index 000000000..1e460bf13
--- /dev/null
+++ b/examples/KCheckbox/VModelString.vue
@@ -0,0 +1,22 @@
+<template>
+
+  <KCheckbox
+    v-model="selectedString"
+    :label="`selectedString = ${selectedString}`"
+    :value="'String'"
+  />
+
+</template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        selectedString: 'String',
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/WithDescription.vue b/examples/KCheckbox/WithDescription.vue
index 79e7add35..1938a4785 100644
--- a/examples/KCheckbox/WithDescription.vue
+++ b/examples/KCheckbox/WithDescription.vue
@@ -1,8 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Checkbox with description"
     description="This is a helpful description text below the checkbox label"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/examples/KCheckbox/WithoutLabel.vue b/examples/KCheckbox/WithoutLabel.vue
index da22f7d59..5f145a8e6 100644
--- a/examples/KCheckbox/WithoutLabel.vue
+++ b/examples/KCheckbox/WithoutLabel.vue
@@ -1,8 +1,22 @@
 <template>
 
   <KCheckbox
+    v-model="inputValue"
     label="Hidden label"
     :showLabel="false"
   />
 
 </template>
+
+
+<script>
+
+  export default {
+    data() {
+      return {
+        inputValue: false,
+      };
+    },
+  };
+
+</script>
diff --git a/lib/KCheckbox/index.vue b/lib/KCheckbox/index.vue
index ebb035007..dd48db231 100644
--- a/lib/KCheckbox/index.vue
+++ b/lib/KCheckbox/index.vue
@@ -2,6 +2,7 @@
 
   <div
     class="k-checkbox-container"
+    data-testid="k-checkbox-container"
     :class="{ 'k-checkbox-disabled': disabled }"
     :style="{ pointerEvents: presentational ? 'none' : 'auto' }"
     @click="toggleCheck"
@@ -15,7 +16,8 @@
           type="checkbox"
           class="k-checkbox-input"
           :aria-checked="ariaChecked"
-          :checked="checked"
+          :checked="isChecked"
+          :value="value"
           :indeterminate.prop="indeterminate"
           :disabled="disabled"
           @click.stop="toggleCheck"
@@ -29,18 +31,21 @@
           :style="[notBlank, activeOutline]"
           class="checkbox-icon"
           icon="indeterminateCheck"
+          data-testid="icon-indeterminateCheck"
         />
         <KIcon
-          v-else-if="!indeterminate && checked"
+          v-else-if="!indeterminate && isChecked"
           :style="[notBlank, activeOutline]"
           class="checkbox-icon"
           icon="checked"
+          data-testid="icon-checked"
         />
         <KIcon
           v-else
           :style="[blank, activeOutline]"
           class="checkbox-icon"
           icon="unchecked"
+          data-testid="icon-unchecked"
         />
       </div>
 
@@ -75,11 +80,12 @@
 
 <script>
 
-  /**
-   * Used for toggling boolean user input
-   */
   export default {
     name: 'KCheckbox',
+    model: {
+      prop: 'inputValue',
+      event: 'change',
+    },
     props: {
       /**
        * Text label
@@ -104,19 +110,49 @@
         default: true,
       },
       /**
-       * Checked state
+       * Reactive v-model checkbox state. Updates with the `change` event.
+       */
+      /*
+       * The reactive state of the checkbox which is used with v-model.
+       * It is changed with the "change" event.
+       * If used as an array, "value" prop is added/removed from it based on the checkbox state.
+       * If used as a boolean, it is set to true when checked and false when unchecked.
+       * If used as any other type, it is set to "value" prop when checked and null when unchecked.
+       */
+      inputValue: {
+        type: [Array, Boolean, Number, String, Object],
+        default: undefined, // Use undefined to differentiate if it’s passed
+      },
+      /**
+       * Legacy API checkbox state. (Note: Use either `v-model` or `checked`.
+       * If both are passed, `v-model` takes precedence.)
        */
       checked: {
         type: Boolean,
         default: false,
       },
       /**
-       * Indeterminate state. Overrides `checked` state
+       * Indeterminate state. Overrides `v-model` or `checked` checkbox state.
        */
       indeterminate: {
         type: Boolean,
         default: false,
       },
+      /**
+       * The value that (1) will be added to the `v-model` array, or (2) `v-model` will be set to,
+       * when the checkbox is checked.
+       */
+      /*
+       * The value of the checkbox.
+       * If the checkbox is used with a v-model of array type,
+       * then this value would be added/removed from the array based on the checkbox state.
+       * If the checkbox is used with a v-model of any other type, then the v-model would
+       * be set to this value when the checkbox is checked and set to null when unchecked.
+       */
+      value: {
+        type: [Number, String, Object],
+        default: null,
+      },
       /**
        * Disabled state
        */
@@ -145,10 +181,51 @@
     },
     data: () => ({
       isActive: false,
+      lastUserEvent: null,
     }),
     computed: {
+      usingLegacyApi() {
+        return this.inputValue === undefined;
+      },
+      isChecked: {
+        get() {
+          if (this.usingLegacyApi) return this.checked;
+
+          if (Array.isArray(this.inputValue)) {
+            return this.inputValue.includes(this.value);
+          }
+          if (typeof this.inputValue === 'boolean') {
+            return this.inputValue;
+          }
+          return this.inputValue !== null;
+        },
+        set(checked) {
+          if (Array.isArray(this.inputValue)) {
+            const index = this.inputValue.indexOf(this.value);
+            if (checked && index === -1) {
+              this.updateInputValue([this.value, ...this.inputValue]);
+            } else if (!checked && index !== -1) {
+              const newInputValue = [...this.inputValue];
+              newInputValue.splice(index, 1);
+              this.updateInputValue(newInputValue);
+            }
+            return;
+          }
+
+          if (this.usingLegacyApi || typeof this.inputValue === 'boolean') {
+            this.updateInputValue(checked);
+            return;
+          }
+
+          if (checked) {
+            this.updateInputValue(this.value);
+          } else {
+            this.updateInputValue(null);
+          }
+        },
+      },
       ariaChecked() {
-        return this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return this.indeterminate ? 'mixed' : this.isChecked ? 'true' : 'false';
       },
       id() {
         return `k-checkbox-${this._uid}`;
@@ -178,17 +255,27 @@
     methods: {
       toggleCheck(event) {
         if (!this.disabled) {
+          // Store the event that triggered this state change (mouse or keyboard)
+          // so it can be forwarded with the emitted `change` event.
+          this.lastUserEvent = event || null;
           this.$refs.kCheckboxInput.focus();
-          /**
-           * Emits change event
-           */
-          this.$emit('change', !this.checked, event);
+          this.isChecked = !this.isChecked;
         }
       },
+      updateInputValue(newValue) {
+        /**
+         * Emits change event with the new checkbox state.
+         * Used by v-model or legacy API to keep the checkbox state in sync.
+         * The original user event that triggered the change (if any)
+         * is forwarded as a second argument for legacy API compatibility.
+         */
+        this.$emit('change', newValue, this.lastUserEvent);
+        this.lastUserEvent = null; // Reset after emitting the change event
+      },
       markInactive() {
         this.isActive = false;
         /**
-         * Emits blur event, useful for validation
+         * Emits blur event, useful for validation.
          */
         this.$emit('blur');
       },
diff --git a/lib/__tests__/KCheckbox.spec.js b/lib/__tests__/KCheckbox.spec.js
index f46d365f2..4c4bbaa4c 100644
--- a/lib/__tests__/KCheckbox.spec.js
+++ b/lib/__tests__/KCheckbox.spec.js
@@ -1,91 +1,130 @@
-import { shallowMount } from '@vue/test-utils';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import VueRouter from 'vue-router';
 import KCheckbox from '../KCheckbox';
 
+const renderComponent = (props = {}, slots = {}) =>
+  render(KCheckbox, {
+    props,
+    routes: new VueRouter(),
+    slots,
+  });
+
 describe('KCheckbox component', () => {
   it(`smoke test`, () => {
-    const wrapper = shallowMount(KCheckbox);
-    expect(wrapper.exists()).toBe(true);
+    renderComponent();
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
   });
 
   describe('props', () => {
     it(`a label should appear with checkbox`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'test',
-        },
-      });
-      expect(wrapper.find('label').text()).toEqual('test');
+      renderComponent({ label: 'test' });
+      expect(screen.getByLabelText('test')).toBeInTheDocument();
+    });
+
+    it(`a checked checkbox icon should appear when inputValue is 'true'`, () => {
+      renderComponent({ label: 'checked', inputValue: true });
+      expect(screen.getByTestId('icon-checked')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-indeterminateCheck')).not.toBeInTheDocument();
+    });
+    it(`an unchecked checkbox icon should appear when inputValue is 'false'`, () => {
+      renderComponent({ label: 'unchecked', inputValue: false });
+      expect(screen.queryByTestId('icon-checked')).not.toBeInTheDocument();
+      expect(screen.getByTestId('icon-unchecked')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-indeterminateCheck')).not.toBeInTheDocument();
     });
+    it(`a checked checkbox icon should appear when inputValue is 0`, () => {
+      renderComponent({ label: 'checked', inputValue: 0 });
+      expect(screen.getByTestId('icon-checked')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-indeterminateCheck')).not.toBeInTheDocument();
+    });
+
     it(`a checked checkbox icon should appear when checked is 'true'`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'checked',
-          checked: true,
-        },
-      });
-      expect(wrapper.find(`[icon="checked"]`).element).toBeTruthy();
-      expect(wrapper.find(`[icon="unchecked"]`).element).toBeFalsy();
-      expect(wrapper.find(`[icon="indeterminateCheck"]`).element).toBeFalsy();
+      renderComponent({ label: 'checked', checked: true });
+      expect(screen.getByTestId('icon-checked')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-indeterminateCheck')).not.toBeInTheDocument();
     });
     it(`an unchecked checkbox icon should appear when checked is 'false'`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'unchecked',
-          checked: false,
-        },
-      });
-      expect(wrapper.find(`[icon="checked"]`).element).toBeFalsy();
-      expect(wrapper.find(`[icon="unchecked"]`).element).toBeTruthy();
-      expect(wrapper.find(`[icon="indeterminateCheck"]`).element).toBeFalsy();
+      renderComponent({ label: 'unchecked', checked: false });
+      expect(screen.queryByTestId('icon-checked')).not.toBeInTheDocument();
+      expect(screen.getByTestId('icon-unchecked')).toBeInTheDocument();
+      expect(screen.queryByTestId('icon-indeterminateCheck')).not.toBeInTheDocument();
     });
+
     it(`indeterminateCheck icon should show when indeterminate is 'true'`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'indeterminate',
-          indeterminate: true,
-        },
-      });
-      expect(wrapper.find(`[icon="checked"]`).element).toBeFalsy();
-      expect(wrapper.find(`[icon="unchecked"]`).element).toBeFalsy();
-      expect(wrapper.find(`[icon="indeterminateCheck"]`).element).toBeTruthy();
+      renderComponent({ label: 'indeterminate', indeterminate: true });
+      expect(screen.queryByTestId('icon-checked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.getByTestId('icon-indeterminateCheck')).toBeInTheDocument();
     });
-    it(`'showLabel' should not show the label when 'false'`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'no label',
-          showLabel: false,
-        },
-      });
-      expect(wrapper.find('.visuallyhidden').exists()).toBeTruthy();
+    it(`indeterminate state should override 'inputValue' when indeterminate is 'true'`, () => {
+      renderComponent({ label: 'indeterminate', inputValue: true, indeterminate: true });
+      expect(screen.queryByTestId('icon-checked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.getByTestId('icon-indeterminateCheck')).toBeInTheDocument();
     });
-    it(`a description is displayed when that prop is not null`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'description',
-          description: 'I am a description',
-        },
-      });
-      expect(wrapper.find('.description').text()).toEqual(wrapper.props().description);
+    it(`indeterminate state should override 'checked' when indeterminate is 'true'`, () => {
+      renderComponent({ label: 'indeterminate', checked: true, indeterminate: true });
+      expect(screen.queryByTestId('icon-checked')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('icon-unchecked')).not.toBeInTheDocument();
+      expect(screen.getByTestId('icon-indeterminateCheck')).toBeInTheDocument();
+    });
+
+    it(`label is visuallyhidden when showLabel is 'false'`, () => {
+      renderComponent({ label: 'no label', showLabel: false });
+      const label = screen.getByText('no label');
+      expect(label).toHaveClass('visuallyhidden');
+    });
+    it(`a description is displayed when description is not null`, () => {
+      renderComponent({ label: 'description', description: 'I am a description' });
+      expect(screen.getByText('I am a description')).toBeInTheDocument();
     });
     it(`checkbox is in disabled state when disabled is 'true'`, () => {
-      const wrapper = shallowMount(KCheckbox, {
-        propsData: {
-          label: 'disabled',
-          disabled: true,
-        },
-      });
-      expect(wrapper.find('.disabled')).toBeTruthy();
+      renderComponent({ label: 'disabled', disabled: true });
+      const checkbox = screen.getByLabelText('disabled');
+      expect(checkbox).toBeDisabled();
     });
   });
 
   it(`should render the default's slot content in <label>`, () => {
-    const wrapper = shallowMount(KCheckbox, {
-      slots: {
-        default: { template: '<span><span>Icon</span>Label</span>' },
-      },
+    renderComponent({}, { default: '<span><span>Icon</span>Slot Label</span>' });
+    expect(screen.getByText('Slot Label')).toBeInTheDocument();
+  });
+
+  describe('event handling when the checkbox is clicked', () => {
+    it('when using legacy API, should emit a change event with the new checkbox state', async () => {
+      const { emitted } = renderComponent({ label: 'unchecked to checked', checked: false });
+      const checkbox = screen.getByTestId('k-checkbox-container');
+      await userEvent.click(checkbox);
+      const events = emitted();
+      expect(events).toHaveProperty('change');
+      expect(events.change).toHaveLength(1);
+      expect(events.change[0][0]).toEqual(true); // was false, now toggled to true
+    });
+    it('when using v-model, should emit an change event with the new checkbox state', async () => {
+      const { emitted } = renderComponent({ label: 'unchecked to checked', inputValue: false });
+      const checkbox = screen.getByTestId('k-checkbox-container');
+      await userEvent.click(checkbox);
+      const events = emitted();
+      expect(events).toHaveProperty('change');
+      expect(events.change).toHaveLength(1);
+      expect(events.change[0][0]).toEqual(true); // was false, now toggled to true
+    });
+    it('when both checked and inputValue are passed, v-model takes precedence', async () => {
+      const { emitted } = renderComponent({
+        label: 'unchecked to checked',
+        checked: true,
+        inputValue: false,
+      });
+      const checkbox = screen.getByTestId('k-checkbox-container');
+      await userEvent.click(checkbox);
+      const events = emitted();
+      expect(events).toHaveProperty('change');
+      expect(events.change).toHaveLength(1);
+      expect(events.change[0][0]).toEqual(true); // was false, now toggled to true
     });
-    const label = wrapper.find('label');
-    expect(label.exists()).toBeTruthy();
-    expect(label.html()).toContain('<span><span>Icon</span>Label</span>');
   });
 });