From 12a79f06804663e2911293bda9f9289ea5d4f57c Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Fri, 4 Jul 2025 01:37:31 -0700
Subject: [PATCH] checkbox: support undefined state

---
 src/lib/Checkbox.svelte |  6 +++---
 src/routes/+page.svelte | 21 +++++++++++++--------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index f26b635..63d1ef4 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" module>
-	export type CheckboxState = 'indeterminate' | boolean;
+	export type CheckboxState = 'indeterminate' | boolean | undefined;
 </script>
 
 <script lang="ts">
@@ -21,7 +21,7 @@
 	let {
 		name,
 		required = false,
-		value = $bindable(false),
+		value = $bindable(),
 		color = 'contrast',
 		class: classValue,
 		children,
@@ -37,7 +37,7 @@
 	<input
 		type="hidden"
 		{name}
-		value={value.toString()}
+		value={value?.toString() ?? 'false'}
 		use:validate={{
 			valfunc: () => {
 				if (required && value !== true) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a260bd0..23c488a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/Button.svelte';
-	import Checkbox from '$lib/Checkbox.svelte';
+	import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
 	import Combobox from '$lib/Combobox.svelte';
 	import DateInput from '$lib/DateInput.svelte';
 	import Dialog from '$lib/Dialog.svelte';
@@ -18,6 +18,7 @@
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
 
 	let dateInputValue = $state<Date | undefined>(undefined);
+	let checkboxValue = $state<CheckboxState>('indeterminate');
 	let dialogOpen = $state(false);
 </script>
 
@@ -68,13 +69,17 @@
 <div class="component">
 	<p class="title">Checkbox</p>
 
-	<Checkbox
-		name="example-checkbox"
-		value={'indeterminate'}
-		onchange={(value) => console.log('Checkbox value:', value)}
-	>
-		Agree to terms and conditions
-	</Checkbox>
+	<div class="flex items-center gap-4">
+		<Checkbox
+			name="example-checkbox"
+			bind:value={checkboxValue}
+			onchange={(value) => console.log('Checkbox value:', value)}
+		>
+			Agree to terms and conditions
+		</Checkbox>
+		<span>Checkbox is {checkboxValue}</span>
+		<Button onclick={() => (checkboxValue = 'indeterminate')}>Set Indeterminate</Button>
+	</div>
 </div>
 
 <div class="component">