Checkboxes not displaying tick

[migueacastro]

Description

When using <Checkbox bind:checked={myValue} /> although the variable "myValue" does indeed change its state, it wont be reflected upon the Checkbox, it always remains unticked.

Minimal Reproduction

<script>
	import { Button, Alert, Heading, Checkbox } from 'flowbite-svelte'
	let myValue = $state(true);
</script>
<svelte:head>
	<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <style type="text/tailwindcss">      
	@theme {        
	  --color-primary-50: #fff5f2;
	  --color-primary-100: #fff1ee;
	  --color-primary-200: #ffe4de;
	  --color-primary-300: #ffd5cc;
	  --color-primary-400: #ffbcad;
	  --color-primary-500: #fe795d;
	  --color-primary-600: #ef562f;
	  --color-primary-700: #eb4f27;
	  --color-primary-800: #cc4522;
	  --color-primary-900: #a5371b;
	}    
  </style>
</svelte:head>
<div class="p-8">
<Heading tag="h1" class="my-4">Hello Playground</Heading>

<Checkbox bind:checked={myValue} />
{#if myValue}
	<p>Checkbox is checked</p>
{:else}
	<p>Checkbox is not checked</p>
{/if}
</div>


<!-- Svelte Playground URL:  https://svelte.dev/playground/f07cb49ca1754ab0a3e62b37ec35ce5b?version=5.46.0#H4sIAAAAAAAACnWTUW-bMBDHv8rJndRNgtCkoWkpQemmSX3c017GHox9TrwZg-xLUhTlu08mJOumwBun3__OPn4cmOU1sox92aD4XTVv8PWN161BFjGlDXqW_Tgw6trAhAKLzomXtp34HRoKtYp7vFYXjSW05FnGci-cbqkobUm6bhtHcIDPW6LGRvBi0FEEr8iltusILsc5gnJNDbfKNPtKE8an1rehi0GCuvvOzRZhCR88ccKP5Lb46bm0eXKZl58y2Qa57McPRwHvxLJkG6LWZ0kipJ388hKN3rmJRUpsWycr4trstZXC-6Ryzd6jW81LVrzrDwC5p84ghEUtS0b4Rsm7YMkK6J8wfEUbrBEOAH9rAHEsGtO4uHW65q6L07sMbpRSqZo9XyemdwMyRRxBZgOCczmG3A-ITIUYQeYDUgkuR5D0hODiKR1DHnoEVfowUyPI4oRUczVbjCCPPSLEPJ2N7eWpR3h6v5hWPXI8bRkgT_qvVPRy_KNELvUOhOHeL0vWxo8lC8XBRiC-DppMS3Zh6i4OEryiMQ18M7xbu2ZrZZ4MmaCZzS8WV9rKTIQ3lMvD4OwRkqK0hxutzhYfeznb4pLTHoZUnrQBztD4q5ht6D800eoYbir1rmBR7yTLwt9x_Bmxs5wsUzx0_ANaL6pBCAQAAA -->

Steps to Reproduce

1. Install flowbite-svelte@latest
2. Use Checkbox inside component
3. Bind Checkbox to a variable

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (4) x64 Intel(R) Core(TM) i5-4570 CPU @ 3.20GHz
    Memory: 1.42 GB / 11.92 GB
  Binaries:
    Node: 24.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files (x86)\Nodist\bin\yarn.CMD
    npm: 11.6.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.25.0 - C:\Program Files (x86)\Nodist\bin\pnpm.CMD
  Browsers:
    Chrome: 142.0.7444.176
    Edge: Chromium (140.0.3485.66)
  npmPackages:
    @sveltejs/kit: ^2.49.2 => 2.49.2
    flowbite: ^2.3.0 => 2.5.2
    flowbite-svelte: ^1.30.0 => 1.30.0
    svelte: ^5.45.8 => 5.45.8
    vite: ^7.2.7 => 7.2.7

Relevant Logs / Console Output

Screenshots / GIF (optional)

Checkbox.mp4

Additional Context (optional)

It happens in the whole project.

Checklist

• I have searched existing issues and discussions
• I have provided a minimal and runnable reproduction
• I am using the latest version of Flowbite-Svelte

[jjagielka]

You need to use 'flowbite-plugin'
See the docs: https://flowbite-svelte.com/docs/pages/introduction

[migueacastro]

In src/app.pcss I added
`@import "tailwindcss";

@plugin 'flowbite/plugin';

@source "../node_modules/flowbite-svelte/dist";

@source "../node_modules/flowbite-svelte-icons/dist";`

And yet, it's still not working. Also it happens in Radio component

Checkbox2.mp4

[shinokada]

I don't see any problem using your code.