fix: #1455 Toggle class update

src/lib/forms/Toggle.svelte

@@ -12,6 +12,7 @@
     checked?: boolean;
     customSize?: string;
     classDiv?: string;
+    disabled?: boolean;
   }
 
   export let size: NonNullable<$$Props['size']> = 'default';
@@ -20,6 +21,7 @@
   export let checked: $$Props['checked'] = undefined;
   export let customSize: $$Props['customSize'] = '';
   export let classDiv: string = '';
+  export let disabled: $$Props['disabled'] = false;
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');
@@ -48,9 +50,11 @@
   let divClass: string;
 
   $: divClass = twMerge(common, $$slots.offLabel ? "ms-3" : "", background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[($$restProps.color as FormColorType) ?? 'primary'], sizes[size], 'relative', classDiv);
+  let checkboxCls: string;
+  $: checkboxCls = disabled ? "cursor-not-allowed grayscale contrast-50 text-gray-400" : "cursor-pointer text-gray-900";
 </script>
 
-<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+<Checkbox custom {...$$restProps} {disabled} class={twMerge(checkboxCls, $$props.class)} {value} bind:checked bind:group on:click on:change>
   <slot name="offLabel"></slot>
   <span class={divClass}></span>
   <slot></slot>

src/routes/docs/forms/toggle.md

@@ -83,6 +83,23 @@ Get started with the default toggle component example as a checkbox element to r
 </Toggle>
 ```
 
+## Disabled
+
+```svelte example class="flex flex-col gap-2"
+<script lang="ts">
+  import { Input, Label, Button, Toggle } from 'flowbite-svelte';
+  let isDisabled = false;
+  let checked: boolean;
+  const handleClick = () => {
+    isDisabled = !isDisabled;
+  }
+</script>
+
+<Button class="w-48" on:click={handleClick}>Disabled: {isDisabled ? 'True' : 'False'}</Button>
+
+<Toggle class="mt-3" bind:checked disabled={isDisabled}>Disabled: {isDisabled}</Toggle>
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.