diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f62a2e36..b952e6f7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -462,7 +462,7 @@ 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 | +| group | let | Yes | any[] | undefined | Specify the bound group | | checked | let | Yes | boolean | false | Specify whether the checkbox is checked | | value | let | No | any | "" | Specify the value of the checkbox | | indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index b6c5dc7b..7a6cc3d0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -735,7 +735,6 @@ "kind": "let", "description": "Specify the bound group", "type": "any[]", - "value": "[]", "isFunction": false, "isFunctionDeclaration": false, "constant": false, diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index 224da129..5f6c74c7 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -16,7 +16,7 @@ * Specify the bound group * @type {any[]} */ - export let group = []; + export let group = undefined; /** Specify whether the checkbox is indeterminate */ export let indeterminate = false; @@ -59,6 +59,8 @@ const dispatch = createEventDispatcher(); + $: useGroup = Array.isArray(group); + $: checked = useGroup ? group.includes(value) : checked; $: dispatch("check", checked); @@ -85,7 +87,7 @@ bind:this="{ref}" type="checkbox" value="{value}" - checked="{checked || group.includes(value)}" + checked="{checked}" disabled="{disabled}" id="{id}" indeterminate="{indeterminate}" @@ -94,10 +96,13 @@ readonly="{readonly}" class:bx--checkbox="{true}" on:change="{() => { - checked = !checked; - group = group.includes(value) - ? group.filter((_value) => _value !== value) - : [...group, value]; + if (useGroup) { + group = group.includes(value) + ? group.filter((_value) => _value !== value) + : [...group, value]; + } else { + checked = !checked; + } }}" on:change on:blur diff --git a/types/Checkbox/Checkbox.svelte.d.ts b/types/Checkbox/Checkbox.svelte.d.ts index 85eb0733..854696a3 100644 --- a/types/Checkbox/Checkbox.svelte.d.ts +++ b/types/Checkbox/Checkbox.svelte.d.ts @@ -16,7 +16,7 @@ export interface CheckboxProps { /** * Specify the bound group - * @default [] + * @default undefined */ group?: any[];