From f5dd5e340b4317f39a05a5107920fcac9e6044d7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 16 Jan 2022 14:49:54 -0800
Subject: [PATCH] docs(select): add reactive example

---
 docs/src/pages/components/Select.svx          |  4 ++++
 .../pages/framed/Select/SelectReactive.svelte | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 docs/src/pages/framed/Select/SelectReactive.svelte

diff --git a/docs/src/pages/components/Select.svx b/docs/src/pages/components/Select.svx
index 85735678..86656661 100644
--- a/docs/src/pages/components/Select.svx
+++ b/docs/src/pages/components/Select.svx
@@ -17,6 +17,10 @@ components: ["Select", "SelectItem", "SelectItemGroup", "SelectSkeleton"]
   <SelectItem value="g100" text="Gray 100" />
 </Select>
 
+### Reactive example
+
+<FileSource src="/framed/Select/SelectReactive" />
+
 ### Helper text
 
 <Select helperText="Carbon offers 4 themes (2 light, 3 dark)" labelText="Carbon theme" selected="g10" >
diff --git a/docs/src/pages/framed/Select/SelectReactive.svelte b/docs/src/pages/framed/Select/SelectReactive.svelte
new file mode 100644
index 00000000..e7110169
--- /dev/null
+++ b/docs/src/pages/framed/Select/SelectReactive.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { Select, SelectItem, Button } from "carbon-components-svelte";
+
+  let selected = "g10";
+</script>
+
+<Select labelText="Carbon theme" bind:selected>
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g80" text="Gray 80" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected: <strong>{selected}</strong>
+</div>
+
+<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}">
+  Set to "g90"
+</Button>