diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 85afc1f5..20ce7bca 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -462,8 +462,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| group | let | Yes | any[] | [] | Specify the bound group | | checked | let | Yes | boolean | false | Specify whether the checkbox is checked | -| value | let | No | string | "" | Specify the value of the checkbox | +| value | let | No | any | "" | Specify the value of the checkbox | | indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index f24a8600..69c3bfac 100644 --- a/docs/src/COMPONENT_API.json +++ b/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", diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx index 8bbd26c4..70b163a9 100644 --- a/docs/src/pages/components/Checkbox.svx +++ b/docs/src/pages/components/Checkbox.svx @@ -23,6 +23,12 @@ +### Multiple + +Bind a selection [group](https://svelte.dev/tutorial/group-inputs) to multiple checkboxes. + + + ### Skeleton - \ No newline at end of file + diff --git a/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte new file mode 100644 index 00000000..5d784c0e --- /dev/null +++ b/docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte @@ -0,0 +1,15 @@ + + +{#each options as option} + +{/each} + +
+ Selected options: + {selection.join(", ")} +
diff --git a/preprocess/api.json b/preprocess/api.json index 8fc7fd3f..b810ca64 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -656,4 +656,4 @@ "path": "carbon-components-svelte/src/UnorderedList/UnorderedList.svelte" } } -} +} \ No newline at end of file diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index bf2a00a1..c4da0153 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/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 /> diff --git a/types/Checkbox/Checkbox.svelte.d.ts b/types/Checkbox/Checkbox.svelte.d.ts index c4af3c82..4f75a69f 100644 --- a/types/Checkbox/Checkbox.svelte.d.ts +++ b/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