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

COMPONENT_INDEX.md

@@ -462,8 +462,9 @@ None.
 | Prop name     | Kind             | Reactive | Type                                      | Default value                                    | Description                                       |
 | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
 | ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element      |
+| group         | <code>let</code> | Yes      | <code>any[]</code>                        | <code>[]</code>                                  | Specify the bound group                           |
 | checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
-| value         | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the checkbox                 |
+| value         | <code>let</code> | No       | <code>any</code>                          | <code>""</code>                                  | Specify the value of the checkbox                 |
 | indeterminate | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
 | skeleton      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
 | readonly      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |

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>

preprocess/api.json

@@ -656,4 +656,4 @@
       "path": "carbon-components-svelte/src/UnorderedList/UnorderedList.svelte"
     }
   }
-}
+}

src/Checkbox/Checkbox.svelte

@@ -3,12 +3,21 @@
    * @event {boolean} check
    */
 
-  /** Specify the value of the checkbox */
+  /**
+   * Specify the value of the checkbox
+   * @type {any}
+   */
   export let value = "";
 
   /** Specify whether the checkbox is checked */
   export let checked = false;
 
+  /**
+   * Specify the bound group
+   * @type {any[]}
+   */
+  export let group = [];
+
   /** Specify whether the checkbox is indeterminate */
   export let indeterminate = false;
 
@@ -73,7 +82,7 @@
       bind:this="{ref}"
       type="checkbox"
       value="{value}"
-      checked="{checked}"
+      checked="{checked || group.includes(value)}"
       disabled="{disabled}"
       id="{id}"
       indeterminate="{indeterminate}"
@@ -83,6 +92,9 @@
       on:change
       on:change="{() => {
         checked = !checked;
+        group = group.includes(value)
+          ? group.filter((_value) => _value !== value)
+          : [...group, value];
       }}"
       on:blur
     />

types/Checkbox/Checkbox.svelte.d.ts

@@ -6,7 +6,7 @@ export interface CheckboxProps {
    * Specify the value of the checkbox
    * @default ""
    */
-  value?: string;
+  value?: any;
 
   /**
    * Specify whether the checkbox is checked
@@ -14,6 +14,12 @@ export interface CheckboxProps {
    */
   checked?: boolean;
 
+  /**
+   * Specify the bound group
+   * @default []
+   */
+  group?: any[];
+
   /**
    * Specify whether the checkbox is indeterminate
    * @default false