diff --git a/.changeset/nine-bees-happen.md b/.changeset/nine-bees-happen.md
new file mode 100644
index 00000000..aa34f38a
--- /dev/null
+++ b/.changeset/nine-bees-happen.md
@@ -0,0 +1,5 @@
+---
+'@devup-ui/components': patch
+---
+
+Enhance Checkbox component logic
diff --git a/packages/components/package.json b/packages/components/package.json
index 5a522b43..61481cea 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -43,8 +43,9 @@
   "types": "./dist/index.d.ts",
   "dependencies": {
     "@devup-ui/react": "workspace:*",
-    "csstype": "^3.1",
-    "react": "^19.2",
+    "csstype": "^3.1.3",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "clsx": "^2.1"
   },
   "devDependencies": {
diff --git a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
index aee68a05..2537dc45 100644
--- a/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Checkbox/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -5,21 +5,22 @@ exports[`Checkbox > should render basic checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_0_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_0_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_0_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
       >
         Test Checkbox
       </span>
@@ -33,15 +34,16 @@ exports[`Checkbox > should render checkbox with custom child 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_4_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_4_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_4_"
@@ -59,17 +61,18 @@ exports[`Checkbox > should render checked checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_1_"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_1_"
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
         viewBox="0 0 12 10"
         width="12"
@@ -82,13 +85,13 @@ exports[`Checkbox > should render checked checkbox 1`] = `
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_1_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
       >
         Test Checkbox
       </span>
@@ -102,19 +105,21 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_j_"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_j_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
+        style="--checkIcon: #000000;"
         viewBox="0 0 12 10"
         width="12"
         xmlns="http://www.w3.org/2000/svg"
@@ -126,13 +131,14 @@ exports[`Checkbox > should render checked checkbox with custom colors 1`] = `
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_j_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -146,18 +152,19 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_3_"
     >
       <input
         checked=""
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_3_"
         type="checkbox"
       />
       <svg
-        class="left-0-50%--255 pointer-events-0-none--255 position-0-absolute--255 top-0-60%--255 transform-0-translate(-50%,-50%)--255"
+        class="opacity-0-1--255 pointer-events-0-none--255 z-index-0-1--255"
         height="10"
         viewBox="0 0 12 10"
         width="12"
@@ -166,17 +173,17 @@ exports[`Checkbox > should render disabled and checked checkbox 1`] = `
         <path
           clip-rule="evenodd"
           d="M11.6474 0.807113C12.0992 1.23373 12.1195 1.94575 11.6929 2.39745L5.31789 9.14745C5.10214 9.37589 4.80069 9.50369 4.48649 9.49992C4.1723 9.49615 3.874 9.36114 3.6638 9.12759L0.288803 5.37759C-0.126837 4.91576 -0.0893993 4.20444 0.372424 3.7888C0.834247 3.37315 1.54557 3.41059 1.96121 3.87242L4.51994 6.71544L10.0571 0.852551C10.4837 0.400843 11.1957 0.3805 11.6474 0.807113Z"
-          fill="light-dark(#D6D7DE, #373737)"
+          fill="light-dark(#D6D7DE, #47474A)"
           fill-rule="evenodd"
         />
       </svg>
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_3_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
       >
         Test Checkbox
       </span>
@@ -190,22 +197,23 @@ exports[`Checkbox > should render disabled checkbox 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_2_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_2_"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_2_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
       >
         Test Checkbox
       </span>
@@ -219,23 +227,25 @@ exports[`Checkbox > should render disabled checkbox with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-not-allowed--255"
+      for="_r_k_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1    cursor-0-not-allowed--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1    cursor-0-not-allowed--1 "
         disabled=""
         id="_r_k_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00; --checkIcon: #000000;"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-not-allowed--255"
       for="_r_k_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#373737)--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(#D6D7DE,#6F6E6E)--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -249,22 +259,24 @@ exports[`Checkbox > should render with custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_h_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_h_"
-        style="--primary: #ff0000; --border: #00ff00; --text: #0000ff; --inputBg: #ffff00;"
+        style="--primary: #ff0000; --border: #00ff00; --inputBg: #ffff00;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_h_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
@@ -278,22 +290,24 @@ exports[`Checkbox > should render with partial custom colors 1`] = `
   <div
     class="display-0-flex--0 align-items-0-center--255 gap-0-8px--255"
   >
-    <div
-      class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
+    <label
+      class="position-0-relative--255 display-0-flex--255 align-items-0-center--255 justify-content-0-center--255 width-0-16px--255 height-0-16px--255 cursor-0-pointer--255"
+      for="_r_i_"
     >
       <input
-        class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-1px solid light-dark(var(--border,#E0E0E0),var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
+        class="background-0-var(--primary,light-dark(#6159D4,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#F0F0F3,#47474A)-14172363753176421546-1 accent-color-0-var(--primary,light-dark(#6159D4,#6670F9))--1 appearance-0-none--1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-0-1px solid var(--border,light-dark(#E0E0E0,#333))--1 border-radius-0-2px--1 display-0-block--1 height-0-100%--1 left-0-0--1 margin-0-0--1 opacity-0-1--1 pointer-events-0-none--1 position-0-absolute--1 top-0-0--1 width-0-100%--1 z-index-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-1px solid var(--primary,light-dark(#6159D4,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
         id="_r_i_"
-        style="--primary: #ff0000; --text: #0000ff;"
+        style="--primary: #ff0000;"
         type="checkbox"
       />
-    </div>
+    </label>
     <label
       class="cursor-0-pointer--255"
       for="_r_i_"
     >
       <span
-        class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
+        class="font-size-0-14px--255 user-select-0-none--255 color-0-var(--text,light-dark(#2F2F2F,#EDEDED))--255"
+        style="--text: #0000ff;"
       >
         Test Checkbox
       </span>
diff --git a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
index 7f8878c3..03c8dd00 100644
--- a/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
+++ b/packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx
@@ -325,7 +325,7 @@ describe('Checkbox', () => {
       <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
     )
 
-    const input = container.querySelector('input')
+    const input = container.querySelector('span')
     expect(input).toHaveStyle({
       '--text': '#text-custom',
     })
@@ -352,10 +352,12 @@ describe('Checkbox', () => {
     }
 
     const { container } = render(
-      <Checkbox colors={customColors}>Test Checkbox</Checkbox>,
+      <Checkbox checked colors={customColors}>
+        Test Checkbox
+      </Checkbox>,
     )
 
-    const input = container.querySelector('input')
+    const input = container.querySelector('label svg')
     expect(input).toHaveStyle({
       '--checkIcon': '#checkIcon-custom',
     })
@@ -378,9 +380,7 @@ describe('Checkbox', () => {
     expect(input).toHaveStyle({
       '--primary': '#primary-custom',
       '--border': '#border-custom',
-      '--text': '#text-custom',
       '--inputBg': '#inputBg-custom',
-      '--checkIcon': '#checkIcon-custom',
     })
   })
 
diff --git a/packages/components/src/components/Checkbox/index.tsx b/packages/components/src/components/Checkbox/index.tsx
index 1359438b..cef7f98f 100644
--- a/packages/components/src/components/Checkbox/index.tsx
+++ b/packages/components/src/components/Checkbox/index.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import { Box, css, Flex, Input, Text } from '@devup-ui/react'
-import { ComponentProps, useId } from 'react'
+import { ComponentProps, useId, useState } from 'react'
 
 import { CheckIcon } from './CheckIcon'
 
@@ -20,14 +22,34 @@ export function Checkbox({
   children,
   disabled,
   checked,
+  defaultChecked = false,
   colors,
   onChange,
   ...props
 }: CheckboxProps) {
   const generateId = useId()
+  const [innerChecked, setInnerChecked] = useState(defaultChecked)
+  const finalChecked = checked ?? innerChecked
+
+  const handleChange = (value: boolean) => {
+    setInnerChecked(value)
+    onChange?.(value)
+  }
+
   return (
     <Flex alignItems="center" gap="8px">
-      <Box h="18px" pos="relative" w="fit-content">
+      <label
+        className={css({
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '16px',
+          height: '16px',
+          cursor: disabled ? 'not-allowed' : 'pointer',
+        })}
+        htmlFor={generateId}
+      >
         <Input
           _active={
             !disabled && {
@@ -35,7 +57,7 @@ export function Checkbox({
             }
           }
           _checked={{
-            bg: 'light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+            bg: 'var(--primary, light-dark(#6159D4, #6670F9))',
             border: 'none',
             _hover: !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 100%, #000 15%), color-mix(in srgb, var(--primary, #6670F9) 100%, #FFF 15%))',
@@ -50,55 +72,57 @@ export function Checkbox({
           _hover={
             !disabled && {
               bg: 'light-dark(color-mix(in srgb, var(--primary, #6159D4) 10%, #FFF 90%), color-mix(in srgb, var(--primary, #6670F9) 20%, #000 80%))',
-              border:
-                '1px solid light-dark(var(--primary, #6159D4), var(--primary, #6670F9))',
+              border: '1px solid var(--primary, light-dark(#6159D4, #6670F9))',
             }
           }
-          accentColor="light-dark(var(--primary, #6159D4), var(--primary, #6670F9))"
+          accentColor="var(--primary, light-dark(#6159D4, #6670F9))"
           appearance="none"
-          bg="light-dark(#FFF, var(--inputBg, #2E2E2E))"
-          border="1px solid light-dark(var(--border, #E0E0E0), var(--border, #333333))"
+          bg="var(--inputBg, light-dark(#FFF, #2E2E2E))"
+          border="1px solid var(--border, light-dark(#E0E0E0, #333333))"
           borderRadius="2px"
-          boxSize="16px"
-          checked={checked}
+          checked={finalChecked}
           cursor={disabled ? 'not-allowed' : 'pointer'}
           disabled={disabled}
+          display="block"
+          height="100%"
           id={generateId}
+          left={0}
           m="0"
           onChange={
-            disabled || !onChange
-              ? undefined
-              : (e) => onChange(e.target.checked)
+            disabled ? undefined : (e) => handleChange(e.target.checked)
           }
+          opacity={1}
+          pointerEvents="none"
+          pos="absolute"
           styleOrder={1}
           styleVars={{
             primary: colors?.primary,
             border: colors?.border,
-            text: colors?.text,
             inputBg: colors?.inputBg,
-            checkIcon: colors?.checkIcon,
           }}
+          top={0}
           type="checkbox"
+          width="100%"
+          zIndex={0}
           {...props}
         />
-        {checked && (
+        {finalChecked && (
           <Box
             as={CheckIcon}
+            opacity="1"
+            pointerEvents="none"
             props={{
               color: disabled
-                ? 'light-dark(#D6D7DE, #373737)'
+                ? 'light-dark(#D6D7DE, #47474A)'
                 : 'var(--checkIcon, #FFF)',
-              className: css({
-                left: '50%',
-                pointerEvents: 'none',
-                pos: 'absolute',
-                top: '60%',
-                transform: 'translate(-50%, -50%)',
-              }),
             }}
+            styleVars={{
+              checkIcon: colors?.checkIcon,
+            }}
+            zIndex="1"
           />
         )}
-      </Box>
+      </label>
 
       <label
         className={css({
@@ -110,10 +134,13 @@ export function Checkbox({
           <Text
             color={
               disabled
-                ? 'light-dark(#D6D7DE, #373737)'
-                : 'light-dark(var(--text, #2F2F2F), var(--text, #EDEDED))'
+                ? 'light-dark(#D6D7DE, #6F6E6E)'
+                : 'var(--text, light-dark(#2F2F2F, #EDEDED))'
             }
             fontSize="14px"
+            styleVars={{
+              text: colors?.text,
+            }}
             userSelect="none"
           >
             {children}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 62c48bdf..7c0bf275 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -613,11 +613,14 @@ importers:
         specifier: ^2.1
         version: 2.1.1
       csstype:
-        specifier: ^3.1
+        specifier: ^3.1.3
         version: 3.1.3
       react:
-        specifier: ^19.2
+        specifier: ^19.1.1
         version: 19.2.0
+      react-dom:
+        specifier: ^19.1.1
+        version: 19.2.0(react@19.2.0)
     devDependencies:
       '@devup-ui/vite-plugin':
         specifier: workspace:*