From 38a34c53f983a46d7dcc15d780f5b9c53cebeaa4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 5 Feb 2021 05:36:06 -0800
Subject: [PATCH] docs(tabs): add reactive example

Closes #438
---
 docs/src/pages/components/Tabs.svx            |  4 +++
 .../src/pages/framed/Tabs/TabsReactive.svelte | 36 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 docs/src/pages/framed/Tabs/TabsReactive.svelte

diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx
index 19f1e72f..f76ca7c8 100644
--- a/docs/src/pages/components/Tabs.svx
+++ b/docs/src/pages/components/Tabs.svx
@@ -20,6 +20,10 @@ components: ["Tabs", "Tab", "TabContent", "TabsSkeleton"]
   </div>
 </Tabs>
 
+### Reactive example
+
+<FileSource src="/framed/Tabs/TabsReactive" />
+
 ### Container type
 
 <Tabs type="container">
diff --git a/docs/src/pages/framed/Tabs/TabsReactive.svelte b/docs/src/pages/framed/Tabs/TabsReactive.svelte
new file mode 100644
index 00000000..68a5b4ba
--- /dev/null
+++ b/docs/src/pages/framed/Tabs/TabsReactive.svelte
@@ -0,0 +1,36 @@
+<script>
+  import { Tabs, Tab, TabContent, Button } from "carbon-components-svelte";
+
+  let selected = 0;
+</script>
+
+<Tabs bind:selected>
+  <Tab label="Tab label 1" />
+  <Tab label="Tab label 2" />
+  <Tab label="Tab label 3" />
+  <div slot="content">
+    <TabContent>Content 1</TabContent>
+    <TabContent>Content 2</TabContent>
+    <TabContent>Content 3</TabContent>
+  </div>
+</Tabs>
+
+<div>
+  <h4>Selected index: {selected}</h4>
+</div>
+
+<div>
+  <Button
+    size="small"
+    disabled="{selected === 1}"
+    on:click="{() => (selected = 1)}"
+  >
+    Set index to 1
+  </Button>
+</div>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>