From e92789c55a4e03d1a3a723e7d6a2a976a91ef2ed Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Sun, 14 Sep 2025 02:42:13 +0200
Subject: [PATCH] docs: reorganize radio documentation (#22144)

---
 docs/en-US/component/radio.md                 | 38 +++++++------------
 docs/examples/radio/button-style.vue          | 34 -----------------
 ...on-fill-textcolor.vue => radio-button.vue} | 10 ++---
 ...radio-button-group.vue => radio-group.vue} |  0
 4 files changed, 18 insertions(+), 64 deletions(-)
 delete mode 100644 docs/examples/radio/button-style.vue
 rename docs/examples/radio/{button-fill-textcolor.vue => radio-button.vue} (82%)
 rename docs/examples/radio/{radio-button-group.vue => radio-group.vue} (100%)

diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md
index c63ce7f3c4..fba9107680 100644
--- a/docs/en-US/component/radio.md
+++ b/docs/en-US/component/radio.md
@@ -51,13 +51,21 @@ radio/disabled
 
 :::
 
-## Radio button group
+## Radio Group
 
 Suitable for choosing from some mutually exclusive options.
 
 :::demo Combine `el-radio-group` with `el-radio` to display a radio group. Bind a variable with `v-model` of `el-radio-group` element and set label value in `el-radio`. It also provides `change` event with the current value as its parameter.
 
-radio/radio-button-group
+radio/radio-group
+
+:::
+
+## With borders
+
+:::demo The `border` attribute adds a border to Radios.
+
+radio/with-borders
 
 :::
 
@@ -69,31 +77,13 @@ radio/options
 
 :::
 
-## Button style
+## Radio Button
 
-Radio with button styles.
+Radio with button group visual effect.
 
-:::demo You just need to change `el-radio` element into `el-radio-button` element. We also provide `size` attribute.
+:::demo You just need to change `el-radio` element into `el-radio-button` element. You can also set the style of the button when it is active by using `fill` and `text-color`.
 
-radio/button-style
-
-:::
-
-## Button style
-
-Radio with button styles.
-
-:::demo You can set the style of the button when it is active by using `fill` and `text-color`.
-
-radio/button-fill-textcolor
-
-:::
-
-## With borders
-
-:::demo The `border` attribute adds a border to Radios.
-
-radio/with-borders
+radio/radio-button
 
 :::
 
diff --git a/docs/examples/radio/button-style.vue b/docs/examples/radio/button-style.vue
deleted file mode 100644
index 494b3b3246..0000000000
--- a/docs/examples/radio/button-style.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <el-radio-group v-model="radio1" size="large">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <el-radio-group v-model="radio2">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-  <div style="margin-top: 20px">
-    <el-radio-group v-model="radio3" size="small">
-      <el-radio-button label="New York" value="New York" />
-      <el-radio-button label="Washington" value="Washington" disabled />
-      <el-radio-button label="Los Angeles" value="Los Angeles" />
-      <el-radio-button label="Chicago" value="Chicago" />
-    </el-radio-group>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const radio1 = ref('New York')
-const radio2 = ref('New York')
-const radio3 = ref('New York')
-</script>
diff --git a/docs/examples/radio/button-fill-textcolor.vue b/docs/examples/radio/radio-button.vue
similarity index 82%
rename from docs/examples/radio/button-fill-textcolor.vue
rename to docs/examples/radio/radio-button.vue
index 4c86ea8dfa..b30f59c07d 100644
--- a/docs/examples/radio/button-fill-textcolor.vue
+++ b/docs/examples/radio/radio-button.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-radio-group v-model="radio1" size="large" fill="#6cf">
+    <el-radio-group v-model="radio" size="large" fill="#6cf">
       <el-radio-button label="New York" value="New York" />
       <el-radio-button label="Washington" value="Washington" />
       <el-radio-button label="Los Angeles" value="Los Angeles" />
@@ -9,7 +9,7 @@
   </div>
   <div style="margin-top: 20px">
     <el-radio-group
-      v-model="radio2"
+      v-model="radio"
       text-color="#626aef"
       fill="rgb(239, 240, 253)"
     >
@@ -20,7 +20,7 @@
     </el-radio-group>
   </div>
   <div style="margin-top: 20px">
-    <el-radio-group v-model="radio3" size="small">
+    <el-radio-group v-model="radio" size="small">
       <el-radio-button label="New York" value="New York" />
       <el-radio-button label="Washington" value="Washington" disabled />
       <el-radio-button label="Los Angeles" value="Los Angeles" />
@@ -32,7 +32,5 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-const radio1 = ref('New York')
-const radio2 = ref('New York')
-const radio3 = ref('New York')
+const radio = ref('New York')
 </script>
diff --git a/docs/examples/radio/radio-button-group.vue b/docs/examples/radio/radio-group.vue
similarity index 100%
rename from docs/examples/radio/radio-button-group.vue
rename to docs/examples/radio/radio-group.vue