diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index 7f2794d85..af71833da 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
-                <label :for="category.key + index" class="ml-2">{{ category.name }}</label>
+            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
+                <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
         </div>
     </div>
@@ -26,8 +26,8 @@ export default {
             selectedCategory: 'Production',
             code: {
                 basic: `
-<div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-    <RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
+<div v-for="category in categories" :key="category.key" class="flex align-items-center">
+    <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
 `,
@@ -35,8 +35,8 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
+            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
         </div>
@@ -47,7 +47,13 @@ export default {
 export default {
     data() {
         return {
-            selectedCategory: null
+            selectedCategory: 'Production',
+            categories: [
+                { name: 'Accounting', key: 'A' },
+                { name: 'Marketing', key: 'M' },
+                { name: 'Production', key: 'P' },
+                { name: 'Research', key: 'R' }
+            ]
         }
     }
 };
@@ -56,8 +62,8 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="flex flex-column gap-3">
-            <div v-for="(category, index) in categories" :key="category.key" class="flex align-items-center">
-                <RadioButton v-model="selectedCategory" :inputId="category.key + index" name="pizza" :value="category.name" />
+            <div v-for="category in categories" :key="category.key" class="flex align-items-center">
+                <RadioButton v-model="selectedCategory" :inputId="category.key" name="pizza" :value="category.name" />
                 <label :for="category.key" class="ml-2">{{ category.name }}</label>
             </div>
         </div>
@@ -67,7 +73,13 @@ export default {
 <script setup>
 import { ref } from 'vue';
 
-const selectedCategory = ref(null);
+const selectedCategory = ref('Production');
+const categories = ref([
+    { name: 'Accounting', key: 'A' },
+    { name: 'Marketing', key: 'M' },
+    { name: 'Production', key: 'P' },
+    { name: 'Research', key: 'R' }
+]);
 <\/script>`
             }
         };