diff --git a/src/docs/src/routes/components/drawer.svelte.md b/src/docs/src/routes/components/drawer.svelte.md
index e4b23407329..d92d46940d1 100644
--- a/src/docs/src/routes/components/drawer.svelte.md
+++ b/src/docs/src/routes/components/drawer.svelte.md
@@ -79,11 +79,11 @@ You can check/uncheck the checkbox using JavaScript or using `<label>` tag.
   <input id="my-drawer" type="checkbox" className="$$drawer-toggle" />
   <div className="$$drawer-content">
     <!-- Page content here -->
-    <label for="my-drawer" className="$$btn $$btn-primary $$drawer-button">Open drawer</label>
+    <label htmlFor="my-drawer" className="$$btn $$btn-primary $$drawer-button">Open drawer</label>
 
   </div> 
   <div className="$$drawer-side">
-    <label for="my-drawer" className="$$drawer-overlay"></label>
+    <label htmlFor="my-drawer" className="$$drawer-overlay"></label>
     <ul className="$$menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
       <!-- Sidebar content here -->
       <li><a>Sidebar Item 1</a></li>
@@ -133,11 +133,11 @@ You can check/uncheck the checkbox using JavaScript or using `<label>` tag.
   <input id="my-drawer-2" type="checkbox" className="$$drawer-toggle" />
   <div className="$$drawer-content flex flex-col items-center justify-center">
     <!-- Page content here -->
-    <label for="my-drawer-2" className="$$btn $$btn-primary $$drawer-button lg:hidden">Open drawer</label>
+    <label htmlFor="my-drawer-2" className="$$btn $$btn-primary $$drawer-button lg:hidden">Open drawer</label>
   
   </div> 
   <div className="$$drawer-side">
-    <label for="my-drawer-2" className="$$drawer-overlay"></label> 
+    <label htmlFor="my-drawer-2" className="$$drawer-overlay"></label> 
     <ul className="$$menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
       <!-- Sidebar content here -->
       <li><a>Sidebar Item 1</a></li>
@@ -219,7 +219,7 @@ You can check/uncheck the checkbox using JavaScript or using `<label>` tag.
     <!-- Navbar -->
     <div className="w-full $$navbar bg-base-300">
       <div className="flex-none lg:hidden">
-        <label for="my-drawer-3" className="$$btn $$btn-square $$btn-ghost">
+        <label htmlFor="my-drawer-3" className="$$btn $$btn-square $$btn-ghost">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
         </label>
       </div> 
@@ -236,7 +236,7 @@ You can check/uncheck the checkbox using JavaScript or using `<label>` tag.
     Content
   </div> 
   <div className="$$drawer-side">
-    <label for="my-drawer-3" className="$$drawer-overlay"></label> 
+    <label htmlFor="my-drawer-3" className="$$drawer-overlay"></label> 
     <ul className="$$menu p-4 overflow-y-auto w-80 bg-base-100">
       <!-- Sidebar content here -->
       <li><a>Sidebar Item 1</a></li>
@@ -288,11 +288,11 @@ You can check/uncheck the checkbox using JavaScript or using `<label>` tag.
   <input id="my-drawer-4" type="checkbox" className="$$drawer-toggle" />
   <div className="$$drawer-content">
     <!-- Page content here -->
-    <label for="my-drawer-4" className="$$drawer-button $$btn $$btn-primary">Open drawer</label>
+    <label htmlFor="my-drawer-4" className="$$drawer-button $$btn $$btn-primary">Open drawer</label>
 
   </div> 
   <div className="$$drawer-side">
-    <label for="my-drawer-4" className="$$drawer-overlay"></label>
+    <label htmlFor="my-drawer-4" className="$$drawer-overlay"></label>
     <ul className="$$menu p-4 overflow-y-auto w-80 bg-base-100 text-base-content">
       <!-- Sidebar content here -->
       <li><a>Sidebar Item 1</a></li>
diff --git a/src/docs/src/routes/components/modal.svelte.md b/src/docs/src/routes/components/modal.svelte.md
index 68de4a7d488..551e934aba7 100644
--- a/src/docs/src/routes/components/modal.svelte.md
+++ b/src/docs/src/routes/components/modal.svelte.md
@@ -45,7 +45,7 @@ data="{[
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<!-- The button to open modal -->
-<label for="my-modal" className="$$btn $$modal-button">open modal</label>
+<label htmlFor="my-modal" className="$$btn $$modal-button">open modal</label>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="my-modal" className="$$modal-toggle" />
@@ -54,7 +54,7 @@ data="{[
     <h3 className="font-bold text-lg">Congratulations random Internet user!</h3>
     <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
     <div className="$$modal-action">
-      <label for="my-modal" className="$$btn">Yay!</label>
+      <label htmlFor="my-modal" className="$$btn">Yay!</label>
     </div>
   </div>
 </div>`
@@ -114,13 +114,13 @@ data="{[
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<!-- The button to open modal -->
-<label for="my-modal-3" className="$$btn $$modal-button">open modal</label>
+<label htmlFor="my-modal-3" className="$$btn $$modal-button">open modal</label>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="my-modal-3" className="$$modal-toggle" />
 <div className="$$modal">
   <div className="$$modal-box relative">
-    <label for="my-modal-3" className="$$btn $$btn-sm $$btn-circle absolute right-2 top-2">✕</label>
+    <label htmlFor="my-modal-3" className="$$btn $$btn-sm $$btn-circle absolute right-2 top-2">✕</label>
     <h3 className="text-lg font-bold">Congratulations random Internet user!</h3>
     <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
   </div>
@@ -146,11 +146,11 @@ data="{[
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<!-- The button to open modal -->
-<label for="my-modal-4" className="$$btn $$modal-button">open modal</label>
+<label htmlFor="my-modal-4" className="$$btn $$modal-button">open modal</label>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="my-modal-4" className="$$modal-toggle" />
-<label for="my-modal-4" className="$$modal cursor-pointer">
+<label htmlFor="my-modal-4" className="$$modal cursor-pointer">
   <label className="$$modal-box relative" for="">
     <h3 className="text-lg font-bold">Congratulations random Internet user!</h3>
     <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
@@ -180,7 +180,7 @@ data="{[
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<!-- The button to open modal -->
-<label for="my-modal-5" className="$$btn $$modal-button">open modal</label>
+<label htmlFor="my-modal-5" className="$$btn $$modal-button">open modal</label>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="my-modal-5" className="$$modal-toggle" />
@@ -189,7 +189,7 @@ data="{[
     <h3 className="font-bold text-lg">Congratulations random Internet user!</h3>
     <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
     <div className="$$modal-action">
-      <label for="my-modal-5" className="$$btn">Yay!</label>
+      <label htmlFor="my-modal-5" className="$$btn">Yay!</label>
     </div>
   </div>
 </div>`
@@ -217,7 +217,7 @@ data="{[
 }</pre>
 <pre slot="react" use:replace={{ to: $prefix }}>{
 `<!-- The button to open modal -->
-<label for="my-modal-6" className="$$btn $$modal-button">open modal</label>
+<label htmlFor="my-modal-6" className="$$btn $$modal-button">open modal</label>
 
 <!-- Put this part before </body> tag -->
 <input type="checkbox" id="my-modal-6" className="$$modal-toggle" />
@@ -226,7 +226,7 @@ data="{[
     <h3 className="font-bold text-lg">Congratulations random Internet user!</h3>
     <p className="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
     <div className="$$modal-action">
-      <label for="my-modal-6" className="$$btn">Yay!</label>
+      <label htmlFor="my-modal-6" className="$$btn">Yay!</label>
     </div>
   </div>
 </div>`