Enhance Checkbox to use bind:group (#947)

* Enhance Checkbox to use bind:group

* Use custom logic

* Move multiple checkboxes above skeleton

* Incorprate PR feedback

* Any instead of string

docs/src/COMPONENT_API.json

@@ -712,7 +712,7 @@
           "name": "value",
           "kind": "let",
           "description": "Specify the value of the checkbox",
-          "type": "string",
+          "type": "any",
           "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
@@ -730,6 +730,17 @@
           "constant": false,
           "reactive": true
         },
+        {
+          "name": "group",
+          "kind": "let",
+          "description": "Specify the bound group",
+          "type": "any[]",
+          "value": "[]",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": true
+        },
         {
           "name": "indeterminate",
           "kind": "let",

docs/src/pages/components/Checkbox.svx

@@ -23,6 +23,12 @@
 
 <Checkbox labelText="Label text" disabled />
 
+### Multiple
+
+Bind a selection [group](https://svelte.dev/tutorial/group-inputs) to multiple checkboxes.
+
+<FileSource src="/framed/Checkbox/MultipleCheckboxes" />
+
 ### Skeleton
 
-<Checkbox skeleton />
+<Checkbox skeleton />

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

@@ -0,0 +1,15 @@
+<script>
+  import { Checkbox } from "carbon-components-svelte";
+
+  let options = ["Apple", "Banana", "Coconut"];
+  let selection = options.slice(0, 2);
+</script>
+
+{#each options as option}
+  <Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
+{/each}
+
+<div style="margin: var(--cds-layout-01) 0">
+  Selected options:
+  <strong>{selection.join(", ")}</strong>
+</div>