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[];