Toggle disabled cannot set at runtime
Describe the bug
I would like to set Toggle disabled status when sending in a form. (Input and Textarea works). I can enabled it with {disabled} property, but cannot at runtime.
Reproduction
<script lang="ts">
import { Toggle } from 'flowbite-svelte';
export let checked: boolean;
export let inProgress = false;
</script>
<Toggle class="mt-3" bind:checked disabled={inProgress} />
not works, cannot set disabled from outside.
Flowbite version and System Info
System:
OS: macOS 15.0
CPU: (10) arm64 Apple M1 Pro
Memory: 179.88 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - /opt/homebrew/opt/node@20/bin/node
npm: 10.8.2 - /opt/homebrew/opt/node@20/bin/npm
Browsers:
Chrome: 129.0.6668.60
Safari: 18.0
npmPackages:
@sveltejs/kit: ^2.6.1 => 2.6.1
flowbite-svelte: ^0.46.22 => 0.46.22
svelte: ^4.2.19 => 4.2.19
vite: ^5.4.8 => 5.4.8
Shouldn't it be export let inProgress = true;?
<Input disabled={inProgress} /> works the same mode, but Toggle not.
The inProgress value comes from outside (parent form saving state), but Toggle cannot use it from variable, just <Toggle disabled={true} /> constant works.
This is a working workaround but I should use the proper boolean mode
{#if inProgress}
<Toggle bind:checked disabled={true} />
{:else}
<Toggle bind:checked disabled={false} />
{/if}
Works perfectly, thanks!