diff --git a/doc/radiobutton/DynamicDoc.vue b/doc/radiobutton/DynamicDoc.vue
index fb657da78..d529ee5a9 100644
--- a/doc/radiobutton/DynamicDoc.vue
+++ b/doc/radiobutton/DynamicDoc.vue
@@ -30,7 +30,6 @@ export default {
     <RadioButton v-model="selectedCategory" :inputId="category.key" name="dynamic" :value="category.name" />
     <label :for="category.key" class="ml-2">{{ category.name }}</label>
 </div>
-
 `,
                 options: `
 <template>
diff --git a/doc/radiobutton/FilledDoc.vue b/doc/radiobutton/FilledDoc.vue
index 0c98783c4..207b6b870 100644
--- a/doc/radiobutton/FilledDoc.vue
+++ b/doc/radiobutton/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <RadioButton v-model="checked" variant="filled" binary />
+        <RadioButton v-model="value" value="1" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +12,15 @@
 export default {
     data() {
         return {
-            checked: false,
+            value: null,
             code: {
                 basic: `
-<RadioButton v-model="checked" variant="filled" binary />
+<RadioButton v-model="value" value="1" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton v-model="checked" variant="filled" binary />
+        <RadioButton v-model="value" value="1" variant="filled" />
     </div>
 </template>
 
@@ -28,7 +28,7 @@ export default {
 export default {
     data() {
         return {
-            checked: true
+            value: null
         }
     }
 }
@@ -37,14 +37,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton v-model="checked" variant="filled" binary />
+        <RadioButton v-model="value" value="1" variant="filled" />
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const checked = ref(false);
+const value = ref(null);
 <\/script>
 `
             }
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index 3474d2e52..ed365a93c 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <RadioButton invalid binary />
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,29 +12,39 @@
 export default {
     data() {
         return {
-            checked: false,
+            value: null,
             code: {
                 basic: `
-<RadioButton invalid binary />
+<RadioButton v-model="value" value="1" :invalid="value === null" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton invalid binary />
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
     </div>
 </template>
 
 <script>
+export default {
+    data() {
+        return {
+            val: null
+        }
+    }
+};
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <RadioButton invalid binary />
+        <RadioButton v-model="value" value="1" :invalid="value === null" />
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+const val = ref(null);
 <\/script>
 `
             }