From f260038aacb91a72623f98850b0cf4bc12a6c4f6 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Thu, 11 Dec 2025 11:42:28 -0800
Subject: [PATCH] checkbox: support disabled state

---
 src/lib/Checkbox.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index 3623b64..d2184a9 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -12,6 +12,7 @@
 	interface Props {
 		name?: string;
 		required?: boolean;
+		disabled?: boolean;
 		value?: MaybeGetter<CheckboxState>;
 		color?: 'default' | 'contrast';
 		class?: ClassValue | null | undefined;
@@ -22,6 +23,7 @@
 	let {
 		name,
 		required = false,
+		disabled = false,
 		value = $bindable(),
 		color = 'contrast',
 		class: classValue,
@@ -58,12 +60,14 @@
 	<button
 		type="button"
 		{id}
+		{disabled}
 		class={[
 			'text-sui-text flex size-7 shrink-0 appearance-none items-center',
-			'justify-center rounded-lg shadow transition-all hover:opacity-75',
+			'justify-center rounded-lg shadow transition-all',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border border-red-500'
+			!valid && 'border border-red-500',
+			disabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-75'
 		]}
 		onclick={() => {
 			const resolved = resolveGetter(value);