diff --git a/src/components/Toggle/Toggle.svelte b/src/components/Toggle/Toggle.svelte
index e9ea762e..07b8f920 100644
--- a/src/components/Toggle/Toggle.svelte
+++ b/src/components/Toggle/Toggle.svelte
@@ -9,20 +9,17 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
 
   let inputRef = undefined;
 
-  $: {
+  afterUpdate(() => {
+    inputRef.checked = toggled;
     dispatch('toggle', { id, toggled });
-
-    if (inputRef) {
-      inputRef.checked = toggled;
-    }
-  }
+  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
diff --git a/src/components/ToggleSmall/ToggleSmall.svelte b/src/components/ToggleSmall/ToggleSmall.svelte
index 76d31b8b..a06b7336 100644
--- a/src/components/ToggleSmall/ToggleSmall.svelte
+++ b/src/components/ToggleSmall/ToggleSmall.svelte
@@ -9,20 +9,17 @@
   export let labelB = 'On';
   export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, afterUpdate } from 'svelte';
   import { cx } from '../../lib';
 
   const dispatch = createEventDispatcher();
 
   let inputRef = undefined;
 
-  $: {
+  afterUpdate(() => {
+    inputRef.checked = toggled;
     dispatch('toggle', { id, toggled });
-
-    if (inputRef) {
-      inputRef.checked = toggled;
-    }
-  }
+  });
 </script>
 
 <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>