docs(checkbox): add reactive example for bind:checked

Also distinguish it from the bind:group example

docs/src/pages/components/Checkbox.svx

@@ -23,9 +23,21 @@
 
 <Checkbox labelText="Label text" disabled />
 
-### Multiple
+### Reactive example (bind:checked)
 
-Bind a selection [group](https://svelte.dev/tutorial/group-inputs) to multiple checkboxes.
+The `checked` prop supports two-way binding.
+
+<FileSource src="/framed/Checkbox/CheckboxReactive" />
+
+### Reactive example (bind:group)
+
+An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
+
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
+  </div>
+</InlineNotification>
 
 <FileSource src="/framed/Checkbox/MultipleCheckboxes" />
 

docs/src/pages/framed/Checkbox/CheckboxReactive.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Checkbox, Button } from "carbon-components-svelte";
+
+  let checked = false;
+</script>
+
+<Checkbox labelText="Label text" bind:checked />
+
+<div style="margin: var(--cds-layout-01) 0">
+  <Button on:click="{() => (checked = !checked)}">Toggle</Button>
+</div>
+
+<strong>checked:</strong>
+{checked}