diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte index 9722e2526..2d52cd6e0 100644 --- a/src/lib/components/common/Checkbox.svelte +++ b/src/lib/components/common/Checkbox.svelte @@ -4,6 +4,7 @@ export let state = 'unchecked'; export let indeterminate = false; + export let enabled = true; let _state = 'unchecked'; @@ -14,8 +15,10 @@ class=" outline -outline-offset-1 outline-[1.5px] outline-gray-200 dark:outline-gray-600 {state !== 'unchecked' ? 'bg-black outline-black ' - : 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative" + : 'hover:outline-gray-500 hover:bg-gray-50 dark:hover:bg-gray-800'} text-white transition-all rounded-sm inline-block w-3.5 h-3.5 relative {!enabled ? 'opacity-50 cursor-not-allowed' : ''}" on:click={() => { + if (!enabled) return; + if (_state === 'unchecked') { _state = 'checked'; dispatch('change', _state); @@ -30,6 +33,7 @@ } }} type="button" + disabled={!enabled} >