From aa4bd6860adb662ba42c4ab4418252d7c5579fc1 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Wed, 24 Dec 2025 01:40:23 +0200
Subject: [PATCH 1/2] docs: add `autocomplete="off"` for some input elements in
 examples that would generate unwanted effects when persisted on firefox

- firefox does not reset input fields on normal reload
- I did not apply it to the whole set of inputs in `checkbox|radio|toggle|rating` because I considered it's not such a big problem if they are persisted

close #4351
---
 .../docs/src/routes/(routes)/+layout.svelte   |  2 +-
 .../routes/(routes)/components/+layout.svelte |  4 +-
 .../(routes)/components/accordion/+page.md    | 24 +++++-----
 .../(routes)/components/button/+page.md       | 28 ++++++------
 .../(routes)/components/collapse/+page.md     |  4 +-
 .../(routes)/components/drawer/+page.md       | 10 ++---
 .../(routes)/components/filter/+page.md       | 20 ++++-----
 .../routes/(routes)/components/join/+page.md  |  6 +--
 .../(routes)/components/pagination/+page.md   |  8 ++--
 .../routes/(routes)/components/swap/+page.md  | 10 ++---
 .../routes/(routes)/components/tab/+page.md   | 44 +++++++++----------
 .../components/theme-controller/+page.md      | 44 +++++++++----------
 .../(routes)/components/validator/+page.md    |  8 ++--
 13 files changed, 106 insertions(+), 106 deletions(-)

diff --git a/packages/docs/src/routes/(routes)/+layout.svelte b/packages/docs/src/routes/(routes)/+layout.svelte
index 8f2dc9dff28..a242d458f62 100644
--- a/packages/docs/src/routes/(routes)/+layout.svelte
+++ b/packages/docs/src/routes/(routes)/+layout.svelte
@@ -95,7 +95,7 @@
     data.pagesThatDontNeedSidebar.matchPattern($page.url.pathname) ? "" : "lg:drawer-open"
   }`}
 >
-  <input id="drawer" type="checkbox" class="drawer-toggle" bind:checked />
+  <input id="drawer" type="checkbox" autocomplete="off" class="drawer-toggle" bind:checked />
   <div class={`drawer-content`} inert={shouldBeInert || undefined}>
     <Navbar
       version={data.daisyuiVersion}
diff --git a/packages/docs/src/routes/(routes)/components/+layout.svelte b/packages/docs/src/routes/(routes)/components/+layout.svelte
index 91b5243c2c2..423e0204e6c 100644
--- a/packages/docs/src/routes/(routes)/components/+layout.svelte
+++ b/packages/docs/src/routes/(routes)/components/+layout.svelte
@@ -6,7 +6,7 @@
 {@render children?.()}
 
 {#if $page.url.pathname == "/components/modal/"}
-  <input type="checkbox" id="my_modal_6" class="modal-toggle" aria-label="Open or close modal" />
+  <input type="checkbox" id="my_modal_6" autocomplete="off" class="modal-toggle" aria-label="Open or close modal" />
   <div class="modal" role="dialog">
     <div class="modal-box">
       <h3 class="text-lg font-bold">Hello!</h3>
@@ -17,7 +17,7 @@
     </div>
   </div>
 
-  <input type="checkbox" id="my_modal_7" class="modal-toggle" aria-label="Open or close modal" />
+  <input type="checkbox" id="my_modal_7" autocomplete="off" class="modal-toggle" aria-label="Open or close modal" />
   <div class="modal" role="dialog">
     <div class="modal-box">
       <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>
diff --git a/packages/docs/src/routes/(routes)/components/accordion/+page.md b/packages/docs/src/routes/(routes)/components/accordion/+page.md
index 8ae98f81db9..cb396f377e0 100644
--- a/packages/docs/src/routes/(routes)/components/accordion/+page.md
+++ b/packages/docs/src/routes/(routes)/components/accordion/+page.md
@@ -44,17 +44,17 @@ classnames:
 
 ### ~Accordion using radio inputs
 <div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" checked="checked" />
+  <input type="radio" name="my-accordion-1" autocomplete="off" checked="checked" />
   <div class="collapse-title font-semibold">How do I create an account?</div>
   <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
 </div>
 <div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" />
+  <input type="radio" name="my-accordion-1" autocomplete="off" />
   <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
   <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
 </div>
 <div class="collapse bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-1" />
+  <input type="radio" name="my-accordion-1" autocomplete="off" />
   <div class="collapse-title font-semibold">How do I update my profile information?</div>
   <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
 </div>
@@ -110,17 +110,17 @@ classnames:
 
 ### ~Accordion with arrow icon
 <div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" checked="checked" />
+  <input type="radio" name="my-accordion-2" autocomplete="off" checked="checked" />
   <div class="collapse-title font-semibold">How do I create an account?</div>
   <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
 </div>
 <div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" />
+  <input type="radio" name="my-accordion-2" autocomplete="off" />
   <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
   <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
 </div>
 <div class="collapse collapse-arrow bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-2" />
+  <input type="radio" name="my-accordion-2" autocomplete="off" />
   <div class="collapse-title font-semibold">How do I update my profile information?</div>
   <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
 </div>
@@ -146,17 +146,17 @@ classnames:
 
 ### ~Accordion with plus/minus icon
 <div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" checked="checked" />
+  <input type="radio" name="my-accordion-3" autocomplete="off" checked="checked" />
   <div class="collapse-title font-semibold">How do I create an account?</div>
   <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
 </div>
 <div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" />
+  <input type="radio" name="my-accordion-3" autocomplete="off" />
   <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
   <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
 </div>
 <div class="collapse collapse-plus bg-base-100 border border-base-300">
-  <input type="radio" name="my-accordion-3" />
+  <input type="radio" name="my-accordion-3" autocomplete="off" />
   <div class="collapse-title font-semibold">How do I update my profile information?</div>
   <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
 </div>
@@ -185,17 +185,17 @@ classnames:
 
 <div class="join join-vertical bg-base-100">
   <div class="collapse collapse-arrow join-item border border-base-300">
-    <input type="radio" name="my-accordion-4" checked="checked" />
+    <input type="radio" name="my-accordion-4" autocomplete="off" checked="checked" />
     <div class="collapse-title font-semibold">How do I create an account?</div>
     <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
   </div>
   <div class="collapse collapse-arrow join-item border border-base-300">
-    <input type="radio" name="my-accordion-4" />
+    <input type="radio" name="my-accordion-4" autocomplete="off" />
     <div class="collapse-title font-semibold">I forgot my password. What should I do?</div>
     <div class="collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
   </div>
   <div class="collapse collapse-arrow join-item border border-base-300">
-    <input type="radio" name="my-accordion-4" />
+    <input type="radio" name="my-accordion-4" autocomplete="off" />
     <div class="collapse-title font-semibold">How do I update my profile information?</div>
     <div class="collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
   </div>
diff --git a/packages/docs/src/routes/(routes)/components/button/+page.md b/packages/docs/src/routes/(routes)/components/button/+page.md
index 45dd916875d..698a2f8e16b 100644
--- a/packages/docs/src/routes/(routes)/components/button/+page.md
+++ b/packages/docs/src/routes/(routes)/components/button/+page.md
@@ -241,7 +241,7 @@ classnames:
 <button type="submit" class="btn">Button</button>
 <input type="button" value="Input" class="btn" />
 <input type="submit" value="Submit" class="btn" />
-<form style="display:contents">
+<form style="display:contents" autocomplete="off">
   <input type="radio" aria-label="Radio" class="btn" />
   <input type="checkbox" aria-label="Checkbox" class="btn" />
   <input type="reset" value="Reset" class="btn">
@@ -351,67 +351,67 @@ classnames:
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"></path></svg>
     Login with GitHub
   </button>
-  
+
   <button class="btn bg-white text-black border-[#e5e5e5]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><path d="m0 0H512V512H0" fill="#fff"></path><path fill="#34a853" d="M153 292c30 82 118 95 171 60h62v48A192 192 0 0190 341"></path><path fill="#4285f4" d="m386 400a140 175 0 0053-179H260v74h102q-7 37-38 57"></path><path fill="#fbbc02" d="m90 341a208 200 0 010-171l63 49q-12 37 0 73"></path><path fill="#ea4335" d="m153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55"></path></g></svg>
     Login with Google
   </button>
-  
+
   <button class="btn bg-[#1A77F2] text-white border-[#005fd8]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" d="M8 12h5V8c0-6 4-7 11-6v5c-4 0-5 0-5 3v2h5l-1 6h-4v12h-6V18H8z"></path></svg>
     Login with Facebook
   </button>
-  
+
   <button class="btn bg-black text-white border-black">
     <svg width="16" height="12" viewBox="0 0 300 271" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="m236 0h46l-101 115 118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123-113-148h94.9l65.5 86.6zm-16.1 244h25.5l-165-218h-27.4z"/></svg>
     Login with X
   </button>
-  
+
   <button class="btn bg-[#FEE502] text-[#181600] border-[#f1d800]">
     <svg width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#181600" d="M255.5 48C299.345 48 339.897 56.5332 377.156 73.5996C414.415 90.666 443.871 113.873 465.522 143.22C487.174 172.566 498 204.577 498 239.252C498 273.926 487.174 305.982 465.522 335.42C443.871 364.857 414.46 388.109 377.291 405.175C340.122 422.241 299.525 430.775 255.5 430.775C241.607 430.775 227.262 429.781 212.467 427.795C148.233 472.402 114.042 494.977 109.892 495.518C107.907 496.241 106.012 496.15 104.208 495.248C103.486 494.706 102.945 493.983 102.584 493.08C102.223 492.177 102.043 491.365 102.043 490.642V489.559C103.126 482.515 111.335 453.169 126.672 401.518C91.8486 384.181 64.1974 361.2 43.7185 332.575C23.2395 303.951 13 272.843 13 239.252C13 204.577 23.8259 172.566 45.4777 143.22C67.1295 113.873 96.5849 90.666 133.844 73.5996C171.103 56.5332 211.655 48 255.5 48Z"></path></svg>
     카카오 로그인
   </button>
-  
+
   <button class="btn bg-black text-white border-black">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1195 1195"><path fill="white" d="M1006.933 812.8c-32 153.6-115.2 211.2-147.2 249.6-32 25.6-121.6 25.6-153.6 6.4-38.4-25.6-134.4-25.6-166.4 0-44.8 32-115.2 19.2-128 12.8-256-179.2-352-716.8 12.8-774.4 64-12.8 134.4 32 134.4 32 51.2 25.6 70.4 12.8 115.2-6.4 96-44.8 243.2-44.8 313.6 76.8-147.2 96-153.6 294.4 19.2 403.2zM802.133 64c12.8 70.4-64 224-204.8 230.4-12.8-38.4 32-217.6 204.8-230.4z"></path></svg>
     Login with Apple
   </button>
-  
+
   <button class="btn bg-[#FF9900] text-black border-[#e17d00]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="black"><path d="M14.463 13.831c-1.753 1.294-4.291 1.981-6.478 1.981-3.066 0-5.825-1.131-7.912-3.019-.163-.147-.019-.35.178-.234 2.253 1.313 5.041 2.1 7.919 2.1 1.941 0 4.075-.403 6.041-1.238.294-.125.544.197.253.409z"></path><path d="M15.191 13c-.225-.287-1.481-.137-2.047-.069-.172.019-.197-.128-.044-.238 1.003-.703 2.647-.5 2.838-.266.194.238-.05 1.884-.991 2.672-.144.122-.281.056-.219-.103.216-.528.688-1.709.463-1.997zM11.053 11.838l.003.003c.387-.341 1.084-.95 1.478-1.278.156-.125.128-.334.006-.509-.353-.488-.728-.884-.728-1.784v-3c0-1.272.088-2.438-.847-3.313-.738-.706-1.963-.956-2.9-.956-1.831 0-3.875.684-4.303 2.947-.047.241.131.369.287.403l1.866.203c.175-.009.3-.181.334-.356.159-.778.813-1.156 1.547-1.156.397 0 .847.144 1.081.5.269.397.234.938.234 1.397v.25c-1.116.125-2.575.206-3.619.666-1.206.522-2.053 1.584-2.053 3.147 0 2 1.259 3 2.881 3 1.369 0 2.116-.322 3.172-1.403.35.506.463.753 1.103 1.284a.395.395 0 0 0 .456-.044zm-1.94-4.694c0 .75.019 1.375-.359 2.041-.306.544-.791.875-1.331.875-.737 0-1.169-.563-1.169-1.394 0-1.641 1.472-1.938 2.863-1.938v.416z"></path></g></svg>
     Login with Amazon
   </button>
-  
+
   <button class="btn bg-[#2F2F2F] text-white border-black">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M96 96H247V247H96" fill="#f24f23"></path><path d="M265 96V247H416V96" fill="#7eba03"></path><path d="M96 265H247V416H96" fill="#3ca4ef"></path><path d="M265 265H416V416H265" fill="#f9ba00"></path></svg>
     Login with Microsoft
   </button>
-  
+
   <button class="btn bg-[#03C755] text-white border-[#00b544]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill-rule="evenodd" stroke-linejoin="round" fill="white"><path fill-rule="nonzero" d="M12.91 6.57c.232 0 .42.19.42.42 0 .23-.188.42-.42.42h-1.17v.75h1.17a.42.42 0 1 1 0 .84h-1.59a.42.42 0 0 1-.418-.42V5.4c0-.23.188-.42.42-.42h1.59a.42.42 0 0 1-.002.84h-1.17v.75h1.17zm-2.57 2.01a.421.421 0 0 1-.757.251l-1.63-2.217V8.58a.42.42 0 0 1-.42.42.42.42 0 0 1-.418-.42V5.4a.418.418 0 0 1 .755-.249L9.5 7.366V5.4c0-.23.188-.42.42-.42.23 0 .42.19.42.42v3.18zm-3.828 0c0 .23-.188.42-.42.42a.42.42 0 0 1-.418-.42V5.4c0-.23.188-.42.42-.42.23 0 .418.19.418.42v3.18zM4.868 9h-1.59c-.23 0-.42-.19-.42-.42V5.4c0-.23.19-.42.42-.42.232 0 .42.19.42.42v2.76h1.17a.42.42 0 1 1 0 .84M16 6.87C16 3.29 12.41.376 8 .376S0 3.29 0 6.87c0 3.208 2.846 5.896 6.69 6.405.26.056.615.172.705.394.08.2.053.518.026.722 0 0-.092.565-.113.685-.035.203-.16.79.693.432.854-.36 4.607-2.714 6.285-4.646C15.445 9.594 16 8.302 16 6.87"></path></g></svg>
     LINEでログイン
   </button>
-  
+
   <button class="btn bg-[#622069] text-white border-[#591660]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g stroke-linecap="round" stroke-width="78"><path stroke="#36c5f0" d="m110 207h97m0-97h.1v-.1"></path><path stroke="#2eb67d" d="m305 110v97m97 0v.1h.1"></path><path stroke="#ecb22e" d="m402 305h-97m0 97h-.1v.1"></path><path stroke="#e01e5a" d="M110 305h.1v.1m97 0v97"></path></g></svg>
     Login with Slack
   </button>
-  
+
   <button class="btn bg-[#0967C2] text-white border-[#0059b3]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" d="M26.111,3H5.889c-1.595,0-2.889,1.293-2.889,2.889V26.111c0,1.595,1.293,2.889,2.889,2.889H26.111c1.595,0,2.889-1.293,2.889-2.889V5.889c0-1.595-1.293-2.889-2.889-2.889ZM10.861,25.389h-3.877V12.87h3.877v12.519Zm-1.957-14.158c-1.267,0-2.293-1.034-2.293-2.31s1.026-2.31,2.293-2.31,2.292,1.034,2.292,2.31-1.026,2.31-2.292,2.31Zm16.485,14.158h-3.858v-6.571c0-1.802-.685-2.809-2.111-2.809-1.551,0-2.362,1.048-2.362,2.809v6.571h-3.718V12.87h3.718v1.686s1.118-2.069,3.775-2.069,4.556,1.621,4.556,4.975v7.926Z" fill-rule="evenodd"></path></svg>
     Login with LinkedIn
   </button>
-  
+
   <button class="btn bg-[#47698F] text-white border-[#35567b]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2240 2240"><g fill="white"><path d="M2077 904q23 64-150 294-24 32-65 85-78 100-90 131-17 41 14 81 17 21 81 82h1l1 1 1 1 2 2q141 131 191 221 3 5 6.5 12.5t7 26.5-.5 34-25 27.5-59 12.5l-256 4q-24 5-56-5t-52-22l-20-12q-30-21-70-64t-68.5-77.5-61-58-56.5-15.5q-3 1-8 3.5t-17 14.5-21.5 29.5-17 52-6.5 77.5q0 15-3.5 27.5t-7.5 18.5l-4 5q-18 19-53 22h-115q-71 4-146-16.5t-131.5-53-103-66T648 1722l-25-24q-10-10-27.5-30t-71.5-91-106-151-122.5-211T165 943q-6-16-6-27t3-16l4-6q15-19 57-19l274-2q12 2 23 6.5t16 8.5l5 3q16 11 24 32 20 50 46 103.5t41 81.5l16 29q29 60 56 104t48.5 68.5T814 1348t34 14 27-5q2-1 5-5t12-22 13.5-47 9.5-81 0-125q-2-40-9-73t-14-46l-6-12q-25-34-85-43-13-2 5-24 17-19 38-30 53-26 239-24 82 1 135 13 20 5 33.5 13.5t20.5 24 10.5 32 3.5 45.5-1 55-2.5 70.5-1.5 82.5q0 11-1 42t-.5 48 3.5 40.5 11.5 39 22.5 24.5q8 2 17 4t26-11 38-34.5 52-67 68-107.5q60-104 107-225 4-10 10-17.5t11-10.5l4-3 5-2.5 13-3 20-.5 288-2q39-5 64 2.5t31 16.5z"></path></g></svg>
     Login with VK
   </button>
-  
+
   <button class="btn bg-[#5EBB2B] text-white border-[#4eaa0c]">
     <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g fill="white"><path d="M11.606,3.068C5.031,3.068,0,7.529,0,12.393s4.344,7.681,4.344,7.681l-.706,2.676c-.093,.353,.284,.644,.602,.464l3.173-1.798c1.403,.447,4.381,.59,4.671,.603-.208-.721-.311-1.432-.311-2.095,0-3.754,3.268-9.04,10.532-9.04,.165,0,.331,.004,.496,.011-.965-4.627-5.769-7.827-11.195-7.827Zm-4.327,7.748c-.797,0-1.442-.646-1.442-1.442s.646-1.442,1.442-1.442,1.442,.646,1.442,1.442-.646,1.442-1.442,1.442Zm8.386,0c-.797,0-1.442-.646-1.442-1.442s.646-1.442,1.442-1.442,1.442,.646,1.442,1.442-.646,1.442-1.442,1.442Z"></path><path d="M32,19.336c0-4.26-4.998-7.379-9.694-7.379-6.642,0-9.459,4.797-9.459,7.966s2.818,7.966,9.459,7.966c1.469,0,2.762-.211,3.886-.584l2.498,1.585c.197,.125,.447-.052,.394-.279l-.567-2.46c2.36-1.643,3.483-4.234,3.483-6.815Zm-12.73-.81c-.704,0-1.275-.571-1.275-1.275s.571-1.275,1.275-1.275,1.275,.571,1.275,1.275c0,.705-.571,1.275-1.275,1.275Zm6.373,0c-.704,0-1.275-.571-1.275-1.275s.571-1.275,1.275-1.275,1.275,.571,1.275,1.275-.571,1.275-1.275,1.275Z"></path></g></svg>
     Login with WeChat
   </button>
-  
+
   <button class="btn  bg-white text-black border-[#e5e5e5]">
   <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.83 470.86"><defs><style>.b,.c,.d,.e,.f,.g,.j{stroke-linecap:round;stroke-linejoin:round}.b{fill:#e4761b;stroke:#e4761b}.c{fill:#d7c1b3;stroke:#d7c1b3}.d{fill:#233447;stroke:#233447}.e{fill:#cd6116;stroke:#cd6116}.f{fill:#e4751f;stroke:#e4751f}.g{fill:#f6851b;stroke:#f6851b}.j{fill:#763d16;stroke:#763d16}</style></defs><path d="M482.09.5 284.32 147.38l36.58-86.66z" style="fill:#e2761b;stroke:#e2761b;stroke-linecap:round;stroke-linejoin:round"/><path d="m25.54.5 196.18 148.27-34.79-88.05zM410.93 340.97l-52.67 80.7 112.7 31 32.4-109.91zM4.67 342.76l32.2 109.91 112.7-31-52.67-80.7z" class="b"/><path d="m143.21 204.62-31.41 47.51 111.9 4.97-3.97-120.25zM364.42 204.62l-77.51-69.16-2.59 121.64 111.71-4.97zM149.57 421.67l67.18-32.8-58.04-45.32zM290.88 388.87l67.38 32.8-9.34-78.12z" class="b"/><path d="m358.26 421.67-67.38-32.8 5.37 43.93-.6 18.48zM149.57 421.67l62.61 29.61-.4-18.48 4.97-43.93z" class="c"/><path d="m213.17 314.54-56.05-16.5 39.55-18.09zM294.46 314.54l16.5-34.59 39.75 18.09z" class="d"/><path d="m149.57 421.67 9.54-80.7-62.21 1.79zM348.72 340.97l9.54 80.7 52.67-78.91zM396.03 252.13l-111.71 4.97 10.34 57.44 16.5-34.59 39.75 18.09zM157.12 298.04l39.75-18.09 16.3 34.59 10.53-57.44-111.9-4.97z" class="e"/><path d="m111.8 252.13 46.91 91.42-1.59-45.51zM350.91 298.04l-1.99 45.51 47.11-91.42zM223.7 257.1l-10.53 57.44 13.12 67.77 2.98-89.24zM284.32 257.1l-5.36 35.77 2.38 89.44 13.32-67.77z" class="f"/><path d="m294.66 314.54-13.32 67.77 9.54 6.56 58.04-45.32 1.99-45.51zM157.12 298.04l1.59 45.51 58.04 45.32 9.54-6.56-13.12-67.77z" class="g"/><path d="m295.65 451.28.6-18.48-4.97-4.38h-74.93l-4.57 4.38.4 18.48-62.61-29.61 21.86 17.88 44.32 30.81h76.13l44.52-30.81 21.86-17.88z" style="stroke-linecap:round;stroke-linejoin:round;fill:#c0ad9e;stroke:#c0ad9e"/><path d="m290.88 388.87-9.54-6.56h-55.05l-9.54 6.56-4.97 43.93 4.57-4.38h74.93l4.97 4.38z" style="stroke-linecap:round;stroke-linejoin:round;fill:#161616;stroke:#161616"/><path d="m490.44 156.92 16.89-81.09L482.09.5 290.88 142.41l73.54 62.21 103.95 30.41 23.06-26.83-9.94-7.15 15.9-14.51-12.32-9.54 15.9-12.13zM.5 75.83l16.89 81.09-10.73 7.95L22.56 177l-12.12 9.54 15.9 14.51-9.94 7.15 22.86 26.83 103.95-30.41 73.54-62.21L25.54.5z" class="j"/><path d="m468.37 235.03-103.95-30.41 31.61 47.51-47.11 91.42 62.01-.79h92.43zM143.21 204.62 39.26 235.03 4.67 342.76H96.9l61.81.79-46.91-91.42zM284.32 257.1l6.56-114.69 30.22-81.69H186.93l29.82 81.69 6.95 114.69 2.39 36.17.2 89.04h55.05l.4-89.04z" class="g"/></svg>
   Login with MetaMask
diff --git a/packages/docs/src/routes/(routes)/components/collapse/+page.md b/packages/docs/src/routes/(routes)/components/collapse/+page.md
index 8b08ddb1f43..74e67423a33 100644
--- a/packages/docs/src/routes/(routes)/components/collapse/+page.md
+++ b/packages/docs/src/routes/(routes)/components/collapse/+page.md
@@ -59,7 +59,7 @@ classnames:
 #### This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.
 
 <div class="collapse bg-base-100 border border-base-300">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <div class="collapse-title font-semibold">How do I create an account?</div>
   <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
 </div>
@@ -215,7 +215,7 @@ classnames:
 #### Use Tailwind CSS `peer` and `peer-checked` utilities to apply style when sibling checkbox is checked
 
 <div class="collapse bg-base-100 border border-base-300">
-  <input type="checkbox" class="peer" />
+  <input type="checkbox" autocomplete="off" class="peer" />
   <div class="collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content">
     How do I create an account?
   </div>
diff --git a/packages/docs/src/routes/(routes)/components/drawer/+page.md b/packages/docs/src/routes/(routes)/components/drawer/+page.md
index b174d9ef4e4..4a990bb3f77 100644
--- a/packages/docs/src/routes/(routes)/components/drawer/+page.md
+++ b/packages/docs/src/routes/(routes)/components/drawer/+page.md
@@ -66,7 +66,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 ### ~Drawer sidebar
 
 <div class="drawer h-56 rounded overflow-hidden">
-  <input id="my-drawer-1" type="checkbox" class="drawer-toggle" />
+  <input id="my-drawer-1" type="checkbox" autocomplete="off" class="drawer-toggle" />
   <div class="flex flex-col items-center justify-center drawer-content">
     <label for="my-drawer-1" class="btn drawer-button">Open drawer</label>
   </div>
@@ -102,7 +102,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 #### Change screen size to show/hide menu
 
 <div class="drawer h-56 rounded overflow-hidden">
-  <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
+  <input id="my-drawer-2" type="checkbox" autocomplete="off" class="drawer-toggle" />
   <div class="flex flex-col drawer-content">
     <div class="w-full navbar bg-base-300">
       <div class="flex-none lg:hidden">
@@ -180,7 +180,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 #### Sidebar is always visible on large screen, can be toggled on small screen because of lg:drawer-open class
 
 <div class="drawer lg:drawer-open h-56 rounded overflow-hidden">
-  <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
+  <input id="my-drawer-3" type="checkbox" autocomplete="off" class="drawer-toggle" />
   <div class="flex flex-col items-center justify-center drawer-content">
     <label for="my-drawer-3" class="btn drawer-button lg:hidden">Open drawer</label>
   </div>
@@ -219,7 +219,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 #### In this example instead of completely hiding the drawer sidebar, we only show the icons when the drawer is closed. To add styles based on the state of the drawer, we use the `is-drawer-open` and `is-drawer-close` variants. For example `is-drawer-close:hidden` or `is-drawer-open:w-80`. Also we have tooltips when the drawer is closed and a switch button to open/close the drawer and rotates the button icon based on the state of the drawer.
 
 <div class="drawer lg:drawer-open h-80">
-  <input id="my-drawer-4" type="checkbox" class="drawer-toggle" />
+  <input id="my-drawer-4" type="checkbox" autocomplete="off" class="drawer-toggle" />
   <div class="drawer-content">
     <!-- Navbar -->
     <nav class="navbar w-full bg-base-300">
@@ -306,7 +306,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
 ### ~Drawer sidebar that opens from right side of page
 
 <div class="drawer drawer-end h-56 rounded overflow-hidden">
-  <input id="my-drawer-5" type="checkbox" class="drawer-toggle" />
+  <input id="my-drawer-5" type="checkbox" autocomplete="off" class="drawer-toggle" />
   <div class="flex flex-col items-center justify-center drawer-content">
     <label for="my-drawer-5" class="btn drawer-button">Open drawer</label>
   </div>
diff --git a/packages/docs/src/routes/(routes)/components/filter/+page.md b/packages/docs/src/routes/(routes)/components/filter/+page.md
index eb4cf78c79a..d8386c46edc 100644
--- a/packages/docs/src/routes/(routes)/components/filter/+page.md
+++ b/packages/docs/src/routes/(routes)/components/filter/+page.md
@@ -22,9 +22,9 @@ classnames:
 
 <form class="filter">
   <input class="btn btn-square" type="reset" value="×"/>
-  <input class="btn" type="radio" name="frameworks" aria-label="Svelte"/>
-  <input class="btn" type="radio" name="frameworks" aria-label="Vue"/>
-  <input class="btn" type="radio" name="frameworks" aria-label="React"/>
+  <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="Svelte"/>
+  <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="Vue"/>
+  <input class="btn" type="radio" name="frameworks" autocomplete="off" aria-label="React"/>
 </form>
 
 ```html
@@ -39,10 +39,10 @@ classnames:
 #### Use this if you can't use a HTML form for some reason
 
 <div class="filter">
-  <input class="btn filter-reset" type="radio" name="metaframeworks" aria-label="All"/>
-  <input class="btn" type="radio" name="metaframeworks" aria-label="Sveltekit"/>
-  <input class="btn" type="radio" name="metaframeworks" aria-label="Nuxt"/>
-  <input class="btn" type="radio" name="metaframeworks" aria-label="Next.js"/>
+  <input class="btn filter-reset" type="radio" name="metaframeworks" autocomplete="off" aria-label="All"/>
+  <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Sveltekit"/>
+  <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Nuxt"/>
+  <input class="btn" type="radio" name="metaframeworks" autocomplete="off" aria-label="Next.js"/>
 </div>
 
 ```html
@@ -57,9 +57,9 @@ classnames:
 #### For having multiple choices, use checkboxes. It doesn't need the filter class name.
 
 <form>
-  <input class="btn" type="checkbox" name="frameworks" aria-label="Svelte"/>
-  <input class="btn" type="checkbox" name="frameworks" aria-label="Vue"/>
-  <input class="btn" type="checkbox" name="frameworks" aria-label="React"/>
+  <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="Svelte"/>
+  <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="Vue"/>
+  <input class="btn" type="checkbox" name="frameworks" autocomplete="off" aria-label="React"/>
   <input class="btn btn-square" type="reset" value="×"/>
 </form>
 
diff --git a/packages/docs/src/routes/(routes)/components/join/+page.md b/packages/docs/src/routes/(routes)/components/join/+page.md
index 9d76380caf3..5da9e54b584 100644
--- a/packages/docs/src/routes/(routes)/components/join/+page.md
+++ b/packages/docs/src/routes/(routes)/components/join/+page.md
@@ -127,9 +127,9 @@ classnames:
 
 ### ~Join radio inputs with btn style
 <div class="join">
-  <input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
-  <input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
-  <input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
+  <input class="join-item btn" type="radio" name="options" autocomplete="off" aria-label="Radio 1" />
+  <input class="join-item btn" type="radio" name="options" autocomplete="off" aria-label="Radio 2" />
+  <input class="join-item btn" type="radio" name="options" autocomplete="off" aria-label="Radio 3" />
 </div>
 
 ```html
diff --git a/packages/docs/src/routes/(routes)/components/pagination/+page.md b/packages/docs/src/routes/(routes)/components/pagination/+page.md
index fea01190a59..0afae39f1a4 100644
--- a/packages/docs/src/routes/(routes)/components/pagination/+page.md
+++ b/packages/docs/src/routes/(routes)/components/pagination/+page.md
@@ -162,10 +162,10 @@ classnames:
 
 ### ~Using radio inputs
 <div class="join">
-  <input class="join-item btn btn-square" type="radio" name="options" aria-label="1" checked="checked" />
-  <input class="join-item btn btn-square" type="radio" name="options" aria-label="2" />
-  <input class="join-item btn btn-square" type="radio" name="options" aria-label="3" />
-  <input class="join-item btn btn-square" type="radio" name="options" aria-label="4" />
+  <input class="join-item btn btn-square" type="radio" name="options" autocomplete="off" aria-label="1" checked="checked" />
+  <input class="join-item btn btn-square" type="radio" name="options" autocomplete="off" aria-label="2" />
+  <input class="join-item btn btn-square" type="radio" name="options" autocomplete="off" aria-label="3" />
+  <input class="join-item btn btn-square" type="radio" name="options" autocomplete="off" aria-label="4" />
 </div>
 
 ```html
diff --git a/packages/docs/src/routes/(routes)/components/swap/+page.md b/packages/docs/src/routes/(routes)/components/swap/+page.md
index 9b78d67bff3..511bdb7eb57 100644
--- a/packages/docs/src/routes/(routes)/components/swap/+page.md
+++ b/packages/docs/src/routes/(routes)/components/swap/+page.md
@@ -31,7 +31,7 @@ classnames:
 
 ### ~Swap text
 <label class="swap">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <div class="swap-on">ON</div>
   <div class="swap-off">OFF</div>
 </label>
@@ -47,7 +47,7 @@ classnames:
 
 ### ~Swap volume icons
 <label class="swap">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/></svg>
   <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M3,9H7L12,4V20L7,15H3V9M16.59,12L14,9.41L15.41,8L18,10.59L20.59,8L22,9.41L19.41,12L22,14.59L20.59,16L18,13.41L15.41,16L14,14.59L16.59,12Z"/></svg>
 </label>
@@ -84,7 +84,7 @@ classnames:
 
 ### ~Swap icons with rotate effect
 <label class="swap swap-rotate">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
   <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/></svg>
 </label>
@@ -117,7 +117,7 @@ classnames:
 
 ### ~Hamburger button
 <label class="btn btn-circle swap swap-rotate">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <svg class="swap-off fill-current" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
   <svg class="swap-on fill-current" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
 </label>
@@ -153,7 +153,7 @@ classnames:
 
 ### ~Swap icons with flip effect
 <label class="swap swap-flip text-9xl">
-  <input type="checkbox" />
+  <input type="checkbox" autocomplete="off" />
   <div class="swap-on">😈</div>
   <div class="swap-off">😇</div>
 </label>
diff --git a/packages/docs/src/routes/(routes)/components/tab/+page.md b/packages/docs/src/routes/(routes)/components/tab/+page.md
index 50a7ac0e0c1..c806ea39497 100644
--- a/packages/docs/src/routes/(routes)/components/tab/+page.md
+++ b/packages/docs/src/routes/(routes)/components/tab/+page.md
@@ -113,9 +113,9 @@ classnames:
 
 ### ~tabs-box using radio inputs
 <div role="tablist" class="tabs tabs-box">
-  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 1" />
-  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 2" checked="checked" />
-  <input type="radio" name="my_tabs_1" class="tab" aria-label="Tab 3" />
+  <input type="radio" name="my_tabs_1" autocomplete="off" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_1" autocomplete="off" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_1" autocomplete="off" class="tab" aria-label="Tab 3" />
 </div>
 
 ```html
@@ -192,11 +192,11 @@ classnames:
 
 ### ~radio tabs-border + tab content
 <div class="tabs tabs-border w-full my-10 lg:mx-10">
-  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_2" autocomplete="off" class="tab" aria-label="Tab 1" />
   <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 1</div>
-  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_2" autocomplete="off" class="tab" aria-label="Tab 2" checked="checked" />
   <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 2</div>
-  <input type="radio" name="my_tabs_2" class="tab" aria-label="Tab 3" />
+  <input type="radio" name="my_tabs_2" autocomplete="off" class="tab" aria-label="Tab 3" />
   <div class="tab-content border-base-300 bg-base-100 p-10">Tab content 3</div>
 </div>
 
@@ -217,11 +217,11 @@ classnames:
 
 ### ~radio tabs-lift + tab content
 <div class="tabs tabs-lift w-full my-10 lg:mx-10">
-  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_3" autocomplete="off" class="tab" aria-label="Tab 1" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
-  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_3" autocomplete="off" class="tab" aria-label="Tab 2" checked="checked" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
-  <input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 3" />
+  <input type="radio" name="my_tabs_3" autocomplete="off" class="tab" aria-label="Tab 3" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
 </div>
 
@@ -242,19 +242,19 @@ classnames:
 ### ~radio tabs-lift with icons + tab content
 <div class="tabs tabs-lift w-full my-10 lg:mx-10">
   <label class="tab">
-    <input type="radio" name="my_tabs_4" />
+    <input type="radio" name="my_tabs_4" autocomplete="off" />
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.347a1.125 1.125 0 0 1 0 1.972l-11.54 6.347a1.125 1.125 0 0 1-1.667-.986V5.653Z" /></svg>
     Live
   </label>
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
   <label class="tab">
-    <input type="radio" name="my_tabs_4" checked="checked" />
+    <input type="radio" name="my_tabs_4" autocomplete="off" checked="checked" />
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
     Laugh
   </label>
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
   <label class="tab">
-    <input type="radio" name="my_tabs_4" />
+    <input type="radio" name="my_tabs_4" autocomplete="off" />
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 me-2"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>
     Love
   </label>
@@ -290,11 +290,11 @@ classnames:
 
 ### ~radio tabs-lift + tab content on bottom
 <div class="tabs tabs-bottom tabs-lift w-full my-10 lg:mx-10">
-  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_5" autocomplete="off" class="tab" aria-label="Tab 1" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
-  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_5" autocomplete="off" class="tab" aria-label="Tab 2" checked="checked" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
-  <input type="radio" name="my_tabs_5" class="tab" aria-label="Tab 3" />
+  <input type="radio" name="my_tabs_5" autocomplete="off" class="tab" aria-label="Tab 3" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
 </div>
 
@@ -316,11 +316,11 @@ classnames:
 
 ### ~radio tabs-box + tab content
 <div class="tabs tabs-box w-full my-10 lg:mx-10">
-  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 1" />
+  <input type="radio" name="my_tabs_6" autocomplete="off" class="tab" aria-label="Tab 1" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
-  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 2" checked="checked" />
+  <input type="radio" name="my_tabs_6" autocomplete="off" class="tab" aria-label="Tab 2" checked="checked" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
-  <input type="radio" name="my_tabs_6" class="tab" aria-label="Tab 3" />
+  <input type="radio" name="my_tabs_6" autocomplete="off" class="tab" aria-label="Tab 3" />
   <div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
 </div>
 
@@ -341,13 +341,13 @@ classnames:
 ### ~tabs-box with a horizontal scroll when there's no space
 <div class="overflow-x-auto max-w-60">
   <div class="tabs-lift tabs min-w-max">
-    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 1" />
+    <input type="radio" name="my_tabs_7" autocomplete="off" class="tab z-1" aria-label="Tab title 1" />
     <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 1</div>
-    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 2" checked="checked" />
+    <input type="radio" name="my_tabs_7" autocomplete="off" class="tab z-1" aria-label="Tab title 2" checked="checked" />
     <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 2</div>
-    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 3" />
+    <input type="radio" name="my_tabs_7" autocomplete="off" class="tab z-1" aria-label="Tab title 3" />
     <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 3</div>
-    <input type="radio" name="my_tabs_7" class="tab z-1" aria-label="Tab title 4" />
+    <input type="radio" name="my_tabs_7" autocomplete="off" class="tab z-1" aria-label="Tab title 4" />
     <div class="sticky start-0 tab-content max-w-60 border-base-300 bg-base-100 p-6">Tab content 4</div>
   </div>
 </div>
diff --git a/packages/docs/src/routes/(routes)/components/theme-controller/+page.md b/packages/docs/src/routes/(routes)/components/theme-controller/+page.md
index ca491afe1c6..52610eb247a 100644
--- a/packages/docs/src/routes/(routes)/components/theme-controller/+page.md
+++ b/packages/docs/src/routes/(routes)/components/theme-controller/+page.md
@@ -33,7 +33,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 
 
 ### ~Theme Controller using a toggle
-<input type="checkbox" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
+<input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
 
 ```html
 <input type="checkbox" value="synthwave" class="$$toggle $$theme-controller" />
@@ -41,7 +41,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 
 
 ### ~Theme Controller using a checkbox
-<input type="checkbox" value="synthwave" bind:checked={checkbox} class="checkbox theme-controller"/>
+<input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="checkbox theme-controller"/>
 
 ```html
 <input type="checkbox" value="synthwave" class="$$checkbox $$theme-controller" />
@@ -52,7 +52,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 <label class="swap swap-rotate">
 
   <!-- this hidden checkbox controls the state -->
-  <input type="checkbox" bind:checked={checkbox} value="synthwave" class="theme-controller" />
+  <input type="checkbox" autocomplete="off" bind:checked={checkbox} value="synthwave" class="theme-controller" />
 
   <!-- sun icon -->
   <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/></svg>
@@ -91,7 +91,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 ### ~Theme Controller using a toggle with text
 <label class="flex cursor-pointer gap-2">
   <span class="label-text">Default</span>
-  <input type="checkbox" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
+  <input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
   <span class="label-text">Synthwave</span>
 </label>
 
@@ -107,7 +107,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 ### ~Theme Controller using a toggle with icons
 <label class="flex cursor-pointer gap-2">
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
-  <input type="checkbox" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
+  <input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="toggle theme-controller"/>
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
 </label>
 
@@ -146,7 +146,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 
 ### ~Theme Controller using a toggle with icons inside
 <label class="toggle text-base-content">
-  <input type="checkbox" value="synthwave" bind:checked={checkbox} class="theme-controller" />
+  <input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="theme-controller" />
 
   <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></g></svg>
 
@@ -167,7 +167,7 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 
 
 ### ~Theme Controller using a toggle with custom colors
-<input type="checkbox" value="synthwave" bind:checked={checkbox} class="toggle theme-controller bg-blue-600 text-blue-200 border-blue-700 checked:bg-yellow-100 checked:text-yellow-600 checked:border-yellow-400"/>
+<input type="checkbox" autocomplete="off" value="synthwave" bind:checked={checkbox} class="toggle theme-controller bg-blue-600 text-blue-200 border-blue-700 checked:bg-yellow-100 checked:text-yellow-600 checked:border-yellow-400"/>
 
 ```html
 <input
@@ -180,23 +180,23 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 ### ~Theme Controller using a radio input
 <fieldset class="fieldset">
   <label class="flex gap-2 cursor-pointer items-center">
-    <input bind:group={radio} type="radio" name="theme-radios" class="radio radio-sm theme-controller" value="default"/>
+    <input bind:group={radio} type="radio" name="theme-radios" autocomplete="off" class="radio radio-sm theme-controller" value="default"/>
     Default
   </label>
   <label class="flex gap-2 cursor-pointer items-center">
-    <input bind:group={radio} type="radio" name="theme-radios" class="radio radio-sm theme-controller" value="retro"/>
+    <input bind:group={radio} type="radio" name="theme-radios" autocomplete="off" class="radio radio-sm theme-controller" value="retro"/>
     Retro
   </label>
   <label class="flex gap-2 cursor-pointer items-center">
-    <input bind:group={radio} type="radio" name="theme-radios" class="radio radio-sm theme-controller" value="cyberpunk"/>
+    <input bind:group={radio} type="radio" name="theme-radios" autocomplete="off" class="radio radio-sm theme-controller" value="cyberpunk"/>
     Cyberpunk
   </label>
   <label class="flex gap-2 cursor-pointer items-center">
-    <input bind:group={radio} type="radio" name="theme-radios" class="radio radio-sm theme-controller" value="valentine"/>
+    <input bind:group={radio} type="radio" name="theme-radios" autocomplete="off" class="radio radio-sm theme-controller" value="valentine"/>
     Valentine
   </label>
   <label class="flex gap-2 cursor-pointer items-center">
-    <input bind:group={radio} type="radio" name="theme-radios" class="radio radio-sm theme-controller" value="aqua"/>
+    <input bind:group={radio} type="radio" name="theme-radios" autocomplete="off" class="radio radio-sm theme-controller" value="aqua"/>
     Aqua
   </label>
 </fieldset>
@@ -229,11 +229,11 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
 
 ### ~Theme Controller using a radio button
 <div class="join join-vertical">
-  <input bind:group={radio} type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Default" value="default"/>
-  <input bind:group={radio} type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Retro" value="retro"/>
-  <input bind:group={radio} type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Cyberpunk" value="cyberpunk"/>
-  <input bind:group={radio} type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Valentine" value="valentine"/>
-  <input bind:group={radio} type="radio" name="theme-buttons" class="btn theme-controller join-item" aria-label="Aqua" value="aqua"/>
+  <input bind:group={radio} type="radio" name="theme-buttons" autocomplete="off" class="btn theme-controller join-item" aria-label="Default" value="default"/>
+  <input bind:group={radio} type="radio" name="theme-buttons" autocomplete="off" class="btn theme-controller join-item" aria-label="Retro" value="retro"/>
+  <input bind:group={radio} type="radio" name="theme-buttons" autocomplete="off" class="btn theme-controller join-item" aria-label="Cyberpunk" value="cyberpunk"/>
+  <input bind:group={radio} type="radio" name="theme-buttons" autocomplete="off" class="btn theme-controller join-item" aria-label="Valentine" value="valentine"/>
+  <input bind:group={radio} type="radio" name="theme-buttons" autocomplete="off" class="btn theme-controller join-item" aria-label="Aqua" value="aqua"/>
 </div>
 
 ```html
@@ -279,11 +279,11 @@ If you're using [daisyUI prefix](/docs/config/#prefix), it will add prefix to `t
     <svg width="12px" height="12px" class="h-2 w-2 fill-current opacity-60 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg>
   </div>
   <ul tabindex="-1" class="dropdown-content z-1 p-2 shadow-2xl bg-base-300 rounded-box w-52">
-    <li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Default" value="default"/></li>
-    <li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Retro" value="retro"/></li>
-    <li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Cyberpunk" value="cyberpunk"/></li>
-    <li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Valentine" value="valentine"/></li>
-    <li><input bind:group={radio} type="radio" name="theme-dropdown" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Aqua" value="aqua"/></li>
+    <li><input bind:group={radio} type="radio" name="theme-dropdown" autocomplete="off" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Default" value="default"/></li>
+    <li><input bind:group={radio} type="radio" name="theme-dropdown" autocomplete="off" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Retro" value="retro"/></li>
+    <li><input bind:group={radio} type="radio" name="theme-dropdown" autocomplete="off" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Cyberpunk" value="cyberpunk"/></li>
+    <li><input bind:group={radio} type="radio" name="theme-dropdown" autocomplete="off" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Valentine" value="valentine"/></li>
+    <li><input bind:group={radio} type="radio" name="theme-dropdown" autocomplete="off" class="theme-controller w-full btn btn-sm btn-block justify-start btn-ghost" aria-label="Aqua" value="aqua"/></li>
   </ul>
 </div>
 
diff --git a/packages/docs/src/routes/(routes)/components/validator/+page.md b/packages/docs/src/routes/(routes)/components/validator/+page.md
index 999ae4e79e3..8eec3400420 100644
--- a/packages/docs/src/routes/(routes)/components/validator/+page.md
+++ b/packages/docs/src/routes/(routes)/components/validator/+page.md
@@ -148,7 +148,7 @@ min="1" max="10"
 ```
 
 ### ~Checkbox requirement validator
-<form>
+<form autocomplete="off">
   <input type="checkbox" class="checkbox validator" required title="Required" />
   <p class="validator-hint">Required</p>
 </form>
@@ -159,7 +159,7 @@ min="1" max="10"
 ```
 
 ### ~Toggle requirement validator
-<form>
+<form autocomplete="off">
   <input type="checkbox" class="toggle validator" required title="Required" />
   <p class="validator-hint">Required</p>
 </form>
@@ -171,7 +171,7 @@ min="1" max="10"
 
 ### ~Select requirement validator
 #### Click the button before picking an option to see the error color.
-<form class="w-full max-w-xs" onsubmit={(event) => event.preventDefault()}>
+<form autocomplete="off" class="w-full max-w-xs" onsubmit={(event) => event.preventDefault()}>
   <select class="select validator" required>
     <option disabled selected value="">Choose:</option>
     <option>Tabs</option>
@@ -194,7 +194,7 @@ min="1" max="10"
 ```
 
 ### ~Form requirement validator
-<form class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4" onsubmit={(event) => event.preventDefault()}>
+<form autocomplete="off" class="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4" onsubmit={(event) => event.preventDefault()}>
   <fieldset class="fieldset">
     <label class="label">Email</label>
     <input type="email" class="input validator" placeholder="Email" required />

From 0374d52b88ad6db8a6c06a4ba9dbb50d4d3ec082 Mon Sep 17 00:00:00 2001
From: Dan Popescu <pdan.popescu@gmail.com>
Date: Sat, 10 Jan 2026 05:00:23 +0200
Subject: [PATCH 2/2] chore: formatting

---
 .../routes/(routes)/components/+layout.svelte    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/routes/(routes)/components/+layout.svelte b/packages/docs/src/routes/(routes)/components/+layout.svelte
index 423e0204e6c..9f524cacab2 100644
--- a/packages/docs/src/routes/(routes)/components/+layout.svelte
+++ b/packages/docs/src/routes/(routes)/components/+layout.svelte
@@ -6,7 +6,13 @@
 {@render children?.()}
 
 {#if $page.url.pathname == "/components/modal/"}
-  <input type="checkbox" id="my_modal_6" autocomplete="off" class="modal-toggle" aria-label="Open or close modal" />
+  <input
+    type="checkbox"
+    id="my_modal_6"
+    autocomplete="off"
+    class="modal-toggle"
+    aria-label="Open or close modal"
+  />
   <div class="modal" role="dialog">
     <div class="modal-box">
       <h3 class="text-lg font-bold">Hello!</h3>
@@ -17,7 +23,13 @@
     </div>
   </div>
 
-  <input type="checkbox" id="my_modal_7" autocomplete="off" class="modal-toggle" aria-label="Open or close modal" />
+  <input
+    type="checkbox"
+    id="my_modal_7"
+    autocomplete="off"
+    class="modal-toggle"
+    aria-label="Open or close modal"
+  />
   <div class="modal" role="dialog">
     <div class="modal-box">
       <h3 class="text-lg font-bold">Congratulations random Internet user!</h3>