diff --git a/apps/showcase/doc/checkbox/DynamicDoc.vue b/apps/showcase/doc/checkbox/DynamicDoc.vue
index a0a470973..6fa07a6ec 100644
--- a/apps/showcase/doc/checkbox/DynamicDoc.vue
+++ b/apps/showcase/doc/checkbox/DynamicDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+                <label :for="category.key">{{ category.name }}</label>
             </div>
         </div>
     </div>
@@ -26,7 +26,7 @@ export default {
             ],
             code: {
                 basic: `
-<div v-for="category of categories" :key="category.key" class="flex items-center">
+<div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
     <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
     <label :for="category.key">{{ category.name }}</label>
 </div>
@@ -35,7 +35,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
                 <label :for="category.key">{{ category.name }}</label>
             </div>
@@ -63,7 +63,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category of categories" :key="category.key" class="flex items-center">
+            <div v-for="category of categories" :key="category.key" class="flex items-center gap-2">
                 <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
                 <label :for="category.key">{{ category.name }}</label>
             </div>
diff --git a/apps/showcase/doc/checkbox/FormsDoc.vue b/apps/showcase/doc/checkbox/FormsDoc.vue
index c4823839e..5cdc35839 100644
--- a/apps/showcase/doc/checkbox/FormsDoc.vue
+++ b/apps/showcase/doc/checkbox/FormsDoc.vue
@@ -6,21 +6,21 @@
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese" class="ml-2"> Cheese </label>
+                        <label for="cheese"> Cheese </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom" class="ml-2"> Mushroom </label>
+                        <label for="mushroom"> Mushroom </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper" class="ml-2"> Pepper </label>
+                        <label for="pepper"> Pepper </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion" class="ml-2"> Onion </label>
+                        <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
 
@@ -52,21 +52,21 @@ export default {
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
     <div class="flex flex-col gap-2">
         <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <Checkbox inputId="cheese" value="Cheese" />
-                <label for="cheese" class="ml-2"> Cheese </label>
+                <label for="cheese"> Cheese </label>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <Checkbox inputId="mushroom" value="Mushroom" />
-                <label for="mushroom" class="ml-2"> Mushroom </label>
+                <label for="mushroom"> Mushroom </label>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <Checkbox inputId="pepper" value="Pepper" />
-                <label for="pepper" class="ml-2"> Pepper </label>
+                <label for="pepper"> Pepper </label>
             </div>
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <Checkbox inputId="onion" value="Onion" />
-                <label for="onion" class="ml-2"> Onion </label>
+                <label for="onion"> Onion </label>
             </div>
         </CheckboxGroup>
 
@@ -81,21 +81,21 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese" class="ml-2"> Cheese </label>
+                        <label for="cheese"> Cheese </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom" class="ml-2"> Mushroom </label>
+                        <label for="mushroom"> Mushroom </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper" class="ml-2"> Pepper </label>
+                        <label for="pepper"> Pepper </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion" class="ml-2"> Onion </label>
+                        <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
 
@@ -141,21 +141,21 @@ export default {
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex justify-center flex-col gap-4">
             <div class="flex flex-col gap-2">
                 <CheckboxGroup name="checkbox" class="flex flex-wrap gap-4">
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="cheese" value="Cheese" />
-                        <label for="cheese" class="ml-2"> Cheese </label>
+                        <label for="cheese"> Cheese </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="mushroom" value="Mushroom" />
-                        <label for="mushroom" class="ml-2"> Mushroom </label>
+                        <label for="mushroom"> Mushroom </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="pepper" value="Pepper" />
-                        <label for="pepper" class="ml-2"> Pepper </label>
+                        <label for="pepper"> Pepper </label>
                     </div>
-                    <div class="flex items-center">
+                    <div class="flex items-center gap-2">
                         <Checkbox inputId="onion" value="Onion" />
-                        <label for="onion" class="ml-2"> Onion </label>
+                        <label for="onion"> Onion </label>
                     </div>
                 </CheckboxGroup>
 
diff --git a/apps/showcase/doc/checkbox/GroupDoc.vue b/apps/showcase/doc/checkbox/GroupDoc.vue
index 544243358..d2defdca8 100644
--- a/apps/showcase/doc/checkbox/GroupDoc.vue
+++ b/apps/showcase/doc/checkbox/GroupDoc.vue
@@ -3,21 +3,21 @@
         <p>Multiple checkboxes can be grouped together.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1" class="ml-2"> Cheese </label>
+            <label for="ingredient1"> Cheese </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2" class="ml-2"> Mushroom </label>
+            <label for="ingredient2"> Mushroom </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3" class="ml-2"> Pepper </label>
+            <label for="ingredient3"> Pepper </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4" class="ml-2"> Onion </label>
+            <label for="ingredient4"> Onion </label>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -31,42 +31,42 @@ export default {
             code: {
                 basic: `
 <div class="card flex flex-wrap justify-center gap-4">
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
         <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-        <label for="ingredient1" class="ml-2"> Cheese </label>
+        <label for="ingredient1"> Cheese </label>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
         <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-        <label for="ingredient2" class="ml-2"> Mushroom </label>
+        <label for="ingredient2"> Mushroom </label>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
         <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-        <label for="ingredient3" class="ml-2"> Pepper </label>
+        <label for="ingredient3"> Pepper </label>
     </div>
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
         <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-        <label for="ingredient4" class="ml-2"> Onion </label>
+        <label for="ingredient4"> Onion </label>
     </div>
 </div>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1" class="ml-2"> Cheese </label>
+            <label for="ingredient1"> Cheese </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2" class="ml-2"> Mushroom </label>
+            <label for="ingredient2"> Mushroom </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3" class="ml-2"> Pepper </label>
+            <label for="ingredient3"> Pepper </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4" class="ml-2"> Onion </label>
+            <label for="ingredient4"> Onion </label>
         </div>
     </div>
 </template>
@@ -84,21 +84,21 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
-            <label for="ingredient1" class="ml-2"> Cheese </label>
+            <label for="ingredient1"> Cheese </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
-            <label for="ingredient2" class="ml-2"> Mushroom </label>
+            <label for="ingredient2"> Mushroom </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
-            <label for="ingredient3" class="ml-2"> Pepper </label>
+            <label for="ingredient3"> Pepper </label>
         </div>
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
-            <label for="ingredient4" class="ml-2"> Onion </label>
+            <label for="ingredient4"> Onion </label>
         </div>
     </div>
 </template>