checkbox label

MuckRock · Feb 27, 2024 · 6f02aa6 · 6f02aa6
1 parent b643466
commit 6f02aa6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/lib/components/common/Checkbox.svelte b/src/lib/components/common/Checkbox.svelte
@@ -6,17 +6,15 @@
 
   export let disabled = false;
   export let status: "off" | "on" | "some" = "off";
+  export let label = "";
 
   let checkbox: HTMLInputElement;
 
   $: checked = status === "on" || status === "some";
 
-  function handleChange() {
-    if (checked) {
-      dispatch("check", { status });
-    } else {
-      dispatch("uncheck", { status });
-    }
+  function onChange(e) {
+    console.log(e);
+    status = e.target.checked ? "on" : "off";
   }
 </script>
 
@@ -26,7 +24,9 @@
     bind:this={checkbox}
     {disabled}
     {checked}
-    on:input={handleChange}
+    on:input
+    on:change
+    on:input={onChange}
   />
   <span>
     {#if status === "on"}
@@ -35,13 +35,16 @@
       <Dash16 />
     {/if}
   </span>
+  {label}
 </label>
 
 <style>
   label {
-    width: 1.25rem;
-    height: 1.25rem;
-    flex-shrink: 0;
+    display: flex;
+    padding-bottom: 1rem;
+    align-items: center;
+    gap: 0.625rem;
+    align-self: stretch;
   }
 
   input {

diff --git a/src/lib/components/common/stories/Checkbox.stories.svelte b/src/lib/components/common/stories/Checkbox.stories.svelte
@@ -19,3 +19,5 @@
 <Story name="on" args={{ status: "on" }} />
 
 <Story name="some" args={{ status: "some" }} />
+
+<Story name="labeled" args={{ label: "Select all" }} />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,3 +19,5 @@
		<Story name="on" args={{ status: "on" }} />

		<Story name="some" args={{ status: "some" }} />

		<Story name="labeled" args={{ label: "Select all" }} />