diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index c0234f47f..4f18d36ee 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -12,25 +12,25 @@
             <div class="card">
                 <h5>Basic</h5>
                 <div class="field-radiobutton">
-                    <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
+                    <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
                     <label for="city1">Chicago</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
+                    <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
                     <label for="city2">Los Angeles</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton id="city3" name="city" value="New York" v-model="city" />
+                    <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
                     <label for="city3">New York</label>
                 </div>
                 <div class="field-radiobutton">
-                    <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
+                    <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
                     <label for="city4">San Francisco</label>
                 </div>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
                 <div v-for="category of categories" :key="category.key" class="field-radiobutton">
-                    <RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
+                    <RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
                     <label :for="category.key">{{category.name}}</label>
                 </div>
             </div>
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 0d0ddefae..d2ffbc0b7 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -143,7 +143,7 @@ export default {
 
 <pre v-code><code>
 &lt;label for="rb1"&gt;One&lt;/label&gt;
-&lt;RadioButton id="rb1" /&gt;
+&lt;RadioButton inputId="rb1" /&gt;
 
 &lt;span id="rb2"&gt;Two&lt;/span&gt;
 &lt;RadioButton aria-labelledby="rb2" /&gt;
@@ -210,25 +210,25 @@ export default {
     <div>
         <h5>Basic</h5>
         <div class="field-radiobutton">
-            <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
+            <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
             <label for="city1">Chicago</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
+            <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
             <label for="city2">Los Angeles</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city3" name="city" value="New York" v-model="city" />
+            <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
             <label for="city3">New York</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
+            <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
         <div v-for="category of categories" :key="category.key" class="field-radiobutton">
-            <RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
+            <RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -262,25 +262,25 @@ export default {
     <div>
         <h5>Basic</h5>
         <div class="field-radiobutton">
-            <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
+            <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
             <label for="city1">Chicago</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
+            <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
             <label for="city2">Los Angeles</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city3" name="city" value="New York" v-model="city" />
+            <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
             <label for="city3">New York</label>
         </div>
         <div class="field-radiobutton">
-            <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
+            <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
         <div v-for="category of categories" :key="category.key" class="field-radiobutton">
-            <RadioButton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
+            <RadioButton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'" />
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -312,25 +312,25 @@ export default {
                     content: `<div id="app">
             <h5>Basic</h5>
             <div class="field-radiobutton">
-                <p-radiobutton id="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
+                <p-radiobutton inputId="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
                 <label for="city1">Chicago</label>
             </div>
             <div class="field-radiobutton">
-                <p-radiobutton id="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
+                <p-radiobutton inputId="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
                 <label for="city2">Los Angeles</label>
             </div>
             <div class="field-radiobutton">
-                <p-radiobutton id="city3" name="city" value="New York" v-model="city"></p-radiobutton>
+                <p-radiobutton inputId="city3" name="city" value="New York" v-model="city"></p-radiobutton>
                 <label for="city3">New York</label>
             </div>
             <div class="field-radiobutton">
-                <p-radiobutton id="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
+                <p-radiobutton inputId="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
                 <label for="city4">San Francisco</label>
             </div>
 
             <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
             <div v-for="category of categories" :key="category.key" class="field-radiobutton">
-                <p-radiobutton :id="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
+                <p-radiobutton :inputId="category.key" name="category" :value="category.name" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
                 <label :for="category.key">{{category.name}}</label>
             </div>
         </div>