From 9c710e9e9ea28acbf7d772d9203a29d4da10c3ff Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 14:40:41 -0800
Subject: [PATCH] docs(Search): add reactive example

---
 docs/src/pages/components/Search.svx          |  4 +++
 .../pages/framed/Search/SearchReactive.svelte | 35 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 docs/src/pages/framed/Search/SearchReactive.svelte

diff --git a/docs/src/pages/components/Search.svx b/docs/src/pages/components/Search.svx
index f795a083..08009c0e 100644
--- a/docs/src/pages/components/Search.svx
+++ b/docs/src/pages/components/Search.svx
@@ -13,6 +13,10 @@ The `Search` component size is extra-large by default. There are [large](#large-
 
 <Search placeholder="Search catalog..." value="Cloud functions" />
 
+### Reactive example
+
+<FileSource src="/framed/Search/SearchReactive" />
+
 ### Light variant
 
 <Search light />
diff --git a/docs/src/pages/framed/Search/SearchReactive.svelte b/docs/src/pages/framed/Search/SearchReactive.svelte
new file mode 100644
index 00000000..08fb1cc1
--- /dev/null
+++ b/docs/src/pages/framed/Search/SearchReactive.svelte
@@ -0,0 +1,35 @@
+<script>
+  import { Search, ButtonSet, Button } from "carbon-components-svelte";
+
+  let value = "";
+</script>
+
+<style>
+  div {
+    margin-top: var(--cds-spacing-05);
+  }
+</style>
+
+<Search bind:value />
+
+<div>
+  <ButtonSet>
+    <Button
+      size="small"
+      disabled="{value === 'Cloud functions'}"
+      on:click="{() => (value = 'Cloud functions')}"
+    >
+      Set value
+    </Button>
+    <Button
+      kind="ghost"
+      size="small"
+      disabled="{value.length === 0}"
+      on:click="{() => (value = '')}"
+    >
+      Clear value
+    </Button>
+  </ButtonSet>
+</div>
+
+<div>Value: {value}</div>