Checkbox has a bug

[Raphael2b3]

Describe the bug

When binding to the checkbox with an already filled array as group object, the checkbox wont check it self, in svelte 5.
We are currently using an workaround because svelte has a bug with encapsulated checkboxes even in svelte 5.

Why is that?

This line is the issue:

flowbite-svelte/src/lib/forms/Checkbox.svelte

Line 22 in 4b1e19f

if (checked === undefined) checked = _group.includes(value);

Because we bind the checked variable to the input and we check its value with use:action it will never be undefined, it is evaluated from undefined to false. but checked need to be undefined in order to load the data.

how to fix it

Because we can not unbind checked, but we can save the initial value of checked into a second const helper variable. before checked is bound.

the change that fixes the bug would be:

Reproduction

<script lang="ts">
	import { Button,Checkbox } from 'flowbite-svelte';
	let group: any[] = $state([1, 2]);
</script>

<div class="flex gap-2">
	<Checkbox bind:group value={1}>One</Checkbox>
	<Checkbox bind:group value={2}>Two</Checkbox>
	<Checkbox bind:group value={3}>Three</Checkbox>
</div>
<div
	class="my-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2 w-44 dark:text-gray-400"
>
	Group: {group}
</div>
<Button onclick={() => (group.length = 0)}>Clear</Button>

Flowbite version and System Info

System:
    OS: Windows 11 10.0.26120
    CPU: (16) x64 AMD Ryzen 7 5825U with Radeon Graphics
    Memory: 4.63 GB / 15.31 GB
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.26100.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.10
    flowbite-svelte: ^0.46.1 => 0.46.1
    svelte: ^5.0.0-next.141 => 5.0.0-next.141
    vite: ^5.0.3 => 5.2.11