diff --git a/client/src/components/ui/Toggle.vue b/client/src/components/ui/Toggle.vue
index ef9864fd..e4770b04 100644
--- a/client/src/components/ui/Toggle.vue
+++ b/client/src/components/ui/Toggle.vue
@@ -1,7 +1,9 @@
 <template>
   <label
     :for="id"
+    data-cy="toggle-container"
     :class="['toggle', { 'toggle--bordered': bordered }]"
+    @click.capture.prevent="$emit('input', !checked)"
   >
     <input
       :checked="checked"
@@ -9,10 +11,15 @@
       data-cy="toggle-checkbox"
       type="checkbox"
       :id="id"
-      @change.prevent="$emit('input', $event.target.checked)"
     />
-    <span class="toggle__toggle-wrapper">
-      <span class="toggle__toggle" />
+    <span
+      data-cy="toggle-wrapper"
+      class="toggle__toggle-wrapper"
+    >
+      <span
+        class="toggle__toggle"
+        data-cy="toggle-handle"
+      />
     </span>
     <span
       class="toggle__label"
@@ -38,6 +45,7 @@ export default {
       default: true,
     },
   },
+  emits: ['input'],
 
   data() {
     return {