diff --git a/docs/src/pages/components/ContentSwitcher.svx b/docs/src/pages/components/ContentSwitcher.svx
index 3dc212f8..ca8f14f3 100644
--- a/docs/src/pages/components/ContentSwitcher.svx
+++ b/docs/src/pages/components/ContentSwitcher.svx
@@ -24,6 +24,10 @@ components: ["ContentSwitcher", "Switch"]
   <Switch text="Recommended" />
 </ContentSwitcher>
 
+### Reactive example
+
+<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
+
 ### Light variant
 
 <ContentSwitcher light>
diff --git a/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
new file mode 100644
index 00000000..847469ab
--- /dev/null
+++ b/docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
@@ -0,0 +1,34 @@
+<script>
+  import {
+    ContentSwitcher,
+    Switch,
+    ButtonSet,
+    Button,
+  } from "carbon-components-svelte";
+
+  let selectedIndex = 1;
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<ContentSwitcher bind:selectedIndex>
+  <Switch text="Latest news" />
+  <Switch text="Trending" />
+  <Switch text="Recommended" />
+</ContentSwitcher>
+
+<div>
+  <Button
+    size="small"
+    disabled="{selectedIndex === 2}"
+    on:click="{() => (selectedIndex = 2)}"
+  >
+    Set selected to 2
+  </Button>
+</div>
+
+<div>Selected index: {selectedIndex}</div>