diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ba07ce5e..17414bea 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 | string | 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 7bc1b87a..87e2c010 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": "string | 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..66bcb151 100644 --- a/docs/src/pages/components/Checkbox.svx +++ b/docs/src/pages/components/Checkbox.svx @@ -25,4 +25,10 @@ ### Skeleton - \ No newline at end of file + + +### Multiple + +Bind a selection list to multiple checkboxes. + + 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/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index bf2a00a1..d2680104 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 {string | 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; @@ -71,6 +80,7 @@ >