diff --git a/test/website/components/component_live_test.exs b/test/website/components/component_live_test.exs
index ae94f2a..6ab15b7 100644
--- a/test/website/components/component_live_test.exs
+++ b/test/website/components/component_live_test.exs
@@ -55,6 +55,18 @@ defmodule Shadix.Website.Components.ComponentLiveTest do
     assert has_element?(view, "#cfg-size-value[phx-update=ignore]")
   end
 
+  test "renders the checkbox page with labels that toggle their checkbox", %{conn: conn} do
+    {:ok, view, html} = live(conn, "/components/checkbox")
+
+    assert html =~ "Accept terms and conditions"
+
+    # Each checkbox's accompanying text is a <label> that wraps the input, so
+    # clicking the text toggles the box (native label-wraps-input behavior).
+    # A bare <span> label would not forward clicks to the input.
+    assert has_element?(view, "label input[type=checkbox]"),
+           "expected a <label> wrapping each checkbox on the checkbox page"
+  end
+
   test "renders the input page", %{conn: conn} do
     {:ok, _view, html} = live(conn, "/components/input")
     assert html =~ "A styled text input"
diff --git a/website/components/docs/checkbox.ex b/website/components/docs/checkbox.ex
index a605ed5..6dc812d 100644
--- a/website/components/docs/checkbox.ex
+++ b/website/components/docs/checkbox.ex
@@ -20,30 +20,34 @@ defmodule Shadix.Website.Components.Docs.Checkbox do
     assigns = assign_new(assigns, :form, fn -> Phoenix.Component.to_form(%{"demo" => false}) end)
 
     ~H"""
-    <span class="flex items-center gap-2">
+    <%!-- Wrapping <label> toggles the checkbox on text click (no `for` needed). --%>
+    <label class="flex items-center gap-2">
       <.checkbox field={@form[:demo]} />
       <span class="text-sm">Accept terms and conditions</span>
-    </span>
+    </label>
     """
   end
 
+  # Each demo uses a DISTINCT field name so the generated checkbox ids stay
+  # unique on the page (duplicate ids break LiveView DOM patching and would
+  # make a `for` association ambiguous).
   demo("Default", [description: "Unchecked and checked states side by side."], """
   <div class="flex flex-col gap-3">
-    <span class="flex items-center gap-2">
+    <label class="flex items-center gap-2">
       <.checkbox field={Phoenix.Component.to_form(%{"agree" => false})[:agree]} />
       <span class="text-sm">Accept terms and conditions</span>
-    </span>
-    <span class="flex items-center gap-2">
-      <.checkbox field={Phoenix.Component.to_form(%{"agree" => true})[:agree]} />
+    </label>
+    <label class="flex items-center gap-2">
+      <.checkbox field={Phoenix.Component.to_form(%{"agreed" => true})[:agreed]} />
       <span class="text-sm">Already agreed</span>
-    </span>
+    </label>
   </div>
   """)
 
   demo("Disabled", [description: "Pass the disabled global to prevent interaction."], """
-  <span class="flex items-center gap-2">
-    <.checkbox field={Phoenix.Component.to_form(%{"agree" => true})[:agree]} disabled />
+  <label class="flex items-center gap-2">
+    <.checkbox field={Phoenix.Component.to_form(%{"locked" => true})[:locked]} disabled />
     <span class="text-sm text-muted-foreground">Cannot be changed</span>
-  </span>
+  </label>
   """)
 end