diff --git a/docs/src/pages/components/Toggle.svx b/docs/src/pages/components/Toggle.svx
index 9a74efcd..727cc63c 100644
--- a/docs/src/pages/components/Toggle.svx
+++ b/docs/src/pages/components/Toggle.svx
@@ -15,6 +15,10 @@ components: ["Toggle", "ToggleSkeleton"]
 
 <Toggle labelText="Push notifications" toggled />
 
+### Reactive example
+
+<FileSource src="/framed/Toggle/ToggleReactive" />
+
 ### Custom labels
 
 <Toggle labelText="Push notifications" labelA="No" labelB="Yes" />
diff --git a/docs/src/pages/framed/Toggle/ToggleReactive.svelte b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
new file mode 100644
index 00000000..e1f5549f
--- /dev/null
+++ b/docs/src/pages/framed/Toggle/ToggleReactive.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { Toggle, Button } from "carbon-components-svelte";
+
+  let toggled = true;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Toggle labelText="Push notifications" bind:toggled />
+
+<div>
+  <Button size="small" on:click="{() => (toggled = !toggled)}">
+    Toggle
+    {toggled ? 'off' : 'on'}
+  </Button>
+</div>
+
+<div>Toggled: {toggled}</div>