diff --git a/apps/showcase/doc/radiobutton/DynamicDoc.vue b/apps/showcase/doc/radiobutton/DynamicDoc.vue
index d529ee5a9..5ea7468a5 100644
--- a/apps/showcase/doc/radiobutton/DynamicDoc.vue
+++ b/apps/showcase/doc/radiobutton/DynamicDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+                <label :for="category.key">{{ category.name }}</label>
             </div>
         </div>
     </div>
@@ -26,18 +26,18 @@ export default {
             selectedCategory: 'Production',
             code: {
                 basic: `
-<div v-for="category in categories" :key="category.key" class="flex items-center">
+<div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-    <label :for="category.key" class="ml-2">{{ category.name }}</label>
+    <label :for="category.key">{{ category.name }}</label>
 </div>
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+                <label :for="category.key">{{ category.name }}</label>
             </div>
         </div>
     </div>
@@ -63,9 +63,9 @@ export default {
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-col gap-4">
-            <div v-for="category in categories" :key="category.key" class="flex items-center">
+            <div v-for="category in categories" :key="category.key" class="flex items-center gap-2">
                 <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
-                <label :for="category.key" class="ml-2">{{ category.name }}</label>
+                <label :for="category.key">{{ category.name }}</label>
             </div>
         </div>
     </div>
diff --git a/apps/showcase/doc/radiobutton/FormsDoc.vue b/apps/showcase/doc/radiobutton/FormsDoc.vue
index 07eae36fa..97ed38370 100644
--- a/apps/showcase/doc/radiobutton/FormsDoc.vue
+++ b/apps/showcase/doc/radiobutton/FormsDoc.vue
@@ -5,21 +5,21 @@
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="ingredient1" 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">
                     <RadioButton inputId="ingredient2" 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">
                     <RadioButton inputId="ingredient3" 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">
                     <RadioButton inputId="ingredient4" value="Onion" />
-                    <label for="ingredient4" class="ml-2">Onion</label>
+                    <label for="ingredient4">Onion</label>
                 </div>
             </RadioButtonGroup>
             <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@@ -48,21 +48,21 @@ export default {
                 basic: `
 <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
     <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
             <RadioButton inputId="ingredient1" 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">
             <RadioButton inputId="ingredient2" 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">
             <RadioButton inputId="ingredient3" 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">
             <RadioButton inputId="ingredient4" value="Onion" />
-            <label for="ingredient4" class="ml-2">Onion</label>
+            <label for="ingredient4">Onion</label>
         </div>
     </RadioButtonGroup>
     <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@@ -74,21 +74,21 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="ingredient1" 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">
                     <RadioButton inputId="ingredient2" 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">
                     <RadioButton inputId="ingredient3" 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">
                     <RadioButton inputId="ingredient4" value="Onion" />
-                    <label for="ingredient4" class="ml-2">Onion</label>
+                    <label for="ingredient4">Onion</label>
                 </div>
             </RadioButtonGroup>
             <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
@@ -130,21 +130,21 @@ export default {
     <div class="card flex justify-center">
         <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
             <RadioButtonGroup name="radiobutton" class="flex flex-wrap gap-4">
-                <div class="flex items-center">
+                <div class="flex items-center gap-2">
                     <RadioButton inputId="ingredient1" 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">
                     <RadioButton inputId="ingredient2" 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">
                     <RadioButton inputId="ingredient3" 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">
                     <RadioButton inputId="ingredient4" value="Onion" />
-                    <label for="ingredient4" class="ml-2">Onion</label>
+                    <label for="ingredient4">Onion</label>
                 </div>
             </RadioButtonGroup>
             <Message v-if="$form.radiobutton?.invalid" severity="error" icon="pi pi-times-circle">{{ $form.radiobutton.error?.message }}</Message>
diff --git a/apps/showcase/doc/radiobutton/GroupDoc.vue b/apps/showcase/doc/radiobutton/GroupDoc.vue
index 7506736b7..78ab413f9 100644
--- a/apps/showcase/doc/radiobutton/GroupDoc.vue
+++ b/apps/showcase/doc/radiobutton/GroupDoc.vue
@@ -4,21 +4,21 @@
     </DocSectionText>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-4">
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4" class="ml-2">Onion</label>
+                <label for="ingredient4">Onion</label>
             </div>
         </div>
     </div>
@@ -33,21 +33,21 @@ export default {
             code: {
                 basic: `
 <div class="flex flex-wrap gap-4">
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
         <RadioButton v-model="ingredient" 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">
         <RadioButton v-model="ingredient" 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">
         <RadioButton v-model="ingredient" 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">
         <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-        <label for="ingredient4" class="ml-2">Onion</label>
+        <label for="ingredient4">Onion</label>
     </div>
 </div>
 `,
@@ -55,21 +55,21 @@ export default {
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-4">
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4" class="ml-2">Onion</label>
+                <label for="ingredient4">Onion</label>
             </div>
         </div>
     </div>
@@ -89,21 +89,21 @@ export default {
 <template>
     <div class="card flex justify-center">
         <div class="flex flex-wrap gap-4">
-            <div class="flex items-center">
+            <div class="flex items-center gap-2">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" 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">
                 <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4" class="ml-2">Onion</label>
+                <label for="ingredient4">Onion</label>
             </div>
         </div>
     </div>