diff --git a/src/components/Toggle/Toggle.Skeleton.svelte b/src/components/Toggle/Toggle.Skeleton.svelte
index e9a8ac62..db018098 100644
--- a/src/components/Toggle/Toggle.Skeleton.svelte
+++ b/src/components/Toggle/Toggle.Skeleton.svelte
@@ -3,7 +3,7 @@
   export { className as class };
   export let id = undefined;
   export let labelText = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -11,7 +11,7 @@
   const ariaLabel = labelText ? null : $$props['aria-label'] || 'Toggle is loading';
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input type="checkbox" class={cx('--toggle --skeleton')} {id} />
   <label class={cx('--toggle__label', '--skeleton')} aria-label={ariaLabel} for={id}>
     {#if labelText}
diff --git a/src/components/Toggle/Toggle.svelte b/src/components/Toggle/Toggle.svelte
index a1a9073e..611f0fdb 100644
--- a/src/components/Toggle/Toggle.svelte
+++ b/src/components/Toggle/Toggle.svelte
@@ -7,7 +7,7 @@
   export let labelText = undefined;
   export let labelA = 'Off';
   export let labelB = 'On';
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -15,37 +15,37 @@
   const dispatch = createEventDispatcher();
   const _class = cx('--form-item', className);
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
+
   let inputRef = undefined;
 
-  function handleChange(event) {
-    dispatch('change', event);
-    dispatch('toggle', { checked: inputRef.checked, id, event });
-  }
+  $: {
+    dispatch('toggle', { id, toggled });
 
-  function handleKeyUp(event) {
-    if (event.key === 'Enter') {
-      if (inputRef) {
-        inputRef.checked = !inputRef.checked;
-      }
-
-      handleChange(event);
+    if (inputRef) {
+      inputRef.checked = toggled;
     }
   }
 </script>
 
-<div class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input
-    {...props}
+    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input')}
-    bind:this={inputRef}
     checked={toggled}
-    {disabled}
-    {id}
     on:change
-    on:change={handleChange}
+    on:change={() => {
+      toggled = !toggled;
+    }}
     on:keyup
-    on:keyup={handleKeyUp} />
+    on:keyup={event => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    {disabled}
+    {id} />
   <label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
     {labelText}
     <span class={cx('--toggle__switch')}>
diff --git a/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte b/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
index 68962f7e..e61685b7 100644
--- a/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.Skeleton.svelte
@@ -3,7 +3,7 @@
   export { className as class };
   export let id = undefined;
   export let labelText = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -11,7 +11,7 @@
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle is loading';
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input type="checkbox" class={cx('--toggle', '--toggle--small', '--skeleton')} {id} />
   <label class={cx('--toggle__label --skeleton')} for={id}>
     {#if labelText}
diff --git a/src/components/ToggleSmall/ToggleSmall.svelte b/src/components/ToggleSmall/ToggleSmall.svelte
index 0340d844..4a4cb293 100644
--- a/src/components/ToggleSmall/ToggleSmall.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.svelte
@@ -7,7 +7,7 @@
   export let labelText = undefined;
   export let labelA = 'Off';
   export let labelB = 'On';
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import { cx } from '../../lib';
@@ -15,37 +15,37 @@
   const dispatch = createEventDispatcher();
   const _class = cx('--form-item', className);
   const ariaLabel = labelText ? undefined : $$props['aria-label'] || 'Toggle';
+
   let inputRef = undefined;
 
-  function handleChange(event) {
-    dispatch('change', event);
-    dispatch('toggle', { checked: inputRef.checked, id, event });
-  }
+  $: {
+    dispatch('toggle', { id, toggled });
 
-  function handleKeyUp(event) {
-    if (event.key === 'Enter') {
-      if (inputRef) {
-        inputRef.checked = !inputRef.checked;
-      }
-
-      handleChange(event);
+    if (inputRef) {
+      inputRef.checked = toggled;
     }
   }
 </script>
 
-<div class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <input
-    {...props}
+    bind:this={inputRef}
     type="checkbox"
     class={cx('--toggle-input', '--toggle-input--small')}
-    bind:this={inputRef}
     checked={toggled}
-    {disabled}
-    {id}
     on:change
-    on:change={handleChange}
+    on:change={() => {
+      toggled = !toggled;
+    }}
     on:keyup
-    on:keyup={handleKeyUp} />
+    on:keyup={event => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        toggled = !toggled;
+      }
+    }}
+    {disabled}
+    {id} />
 
   <label class={cx('--toggle-input__label')} for={id} aria-label={ariaLabel}>
     {labelText}