From d1565c5f750fddd105eb459bbfd37ef0b1d42c21 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 15:19:47 -0800
Subject: [PATCH] docs(content-switcher): add reactive example

---
 docs/src/pages/components/ContentSwitcher.svx |  4 +++
 .../ContentSwitcherReactive.svelte            | 34 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte

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>