diff --git a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
index 109a34fc9..0d202563b 100644
--- a/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
+++ b/packages/bits-ui/src/lib/bits/checkbox/components/checkbox.svelte
@@ -12,7 +12,7 @@
disabled = false,
required = false,
name,
- value,
+ value = "on",
el = $bindable(),
asChild,
child,
diff --git a/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts b/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
index 050fcdb21..7221a27de 100644
--- a/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
+++ b/packages/bits-ui/src/tests/checkbox/Checkbox.spec.ts
@@ -1,4 +1,4 @@
-import { render } from "@testing-library/svelte";
+import { render } from "@testing-library/svelte/svelte5";
import { userEvent } from "@testing-library/user-event";
import { axe } from "jest-axe";
import { describe, it } from "vitest";
@@ -9,11 +9,11 @@ import type { Checkbox } from "$lib/index.js";
const kbd = getTestKbd();
-function setup(props?: Checkbox.Props) {
+function setup(props?: Checkbox.RootProps) {
const user = userEvent.setup();
const returned = render(CheckboxTest, props);
const root = returned.getByTestId("root");
- const input = returned.getByTestId("input") as HTMLInputElement;
+ const input = document.querySelector("input") as HTMLInputElement;
return {
...returned,
root,
@@ -29,10 +29,18 @@ describe("checkbox", () => {
});
it("has bits data attrs", async () => {
- const { getByTestId, root } = setup();
- const indicator = getByTestId("indicator");
+ const { root } = setup();
expect(root).toHaveAttribute("data-checkbox-root");
- expect(indicator).toHaveAttribute("data-checkbox-indicator");
+ });
+
+ it("doesn't render the checkbox input if a name prop isnt passed", async () => {
+ const { input } = setup();
+ expect(input).not.toBeInTheDocument();
+ });
+
+ it("renders the checkbox input if a name prop is passed", async () => {
+ const { input } = setup({ name: "checkbox" });
+ expect(input).toBeInTheDocument();
});
it('defaults the value to "on", when no value prop is passed', async () => {
diff --git a/packages/bits-ui/src/tests/checkbox/CheckboxTest.svelte b/packages/bits-ui/src/tests/checkbox/CheckboxTest.svelte
index c3668452f..b5067b9d0 100644
--- a/packages/bits-ui/src/tests/checkbox/CheckboxTest.svelte
+++ b/packages/bits-ui/src/tests/checkbox/CheckboxTest.svelte
@@ -1,23 +1,16 @@
{checked}
-
-
- {#if isIndeterminate}
- indeterminate
- {:else if isChecked}
- true
- {:else}
- false
- {/if}
-
-
+
+ {#snippet children({ checked })}
+
+ {checked}
+
+ {/snippet}