From 3a75244e34a6cca944fe48d1a3411eb3eb86dace Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 27 Jan 2022 07:14:05 -0800
Subject: [PATCH] docs(checkbox): demo two-way binding in bind:group example

---
 .../framed/Checkbox/MultipleCheckboxes.svelte    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
index 5d784c0e..d66c444b 100644
--- a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
+++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
@@ -1,15 +1,17 @@
 <script>
-  import { Checkbox } from "carbon-components-svelte";
+  import { Checkbox, Button } from "carbon-components-svelte";
 
-  let options = ["Apple", "Banana", "Coconut"];
-  let selection = options.slice(0, 2);
+  let values = ["Apple", "Banana", "Coconut"];
+  let group = values.slice(0, 2);
 </script>
 
-{#each options as option}
-  <Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
+{#each values as value}
+  <Checkbox bind:group labelText="{value}" value="{value}" />
 {/each}
 
 <div style="margin: var(--cds-layout-01) 0">
-  Selected options:
-  <strong>{selection.join(", ")}</strong>
+  <Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
 </div>
+
+<strong>Selected:</strong>
+{JSON.stringify(group)}