diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index 3f7b9273f..894d61d0a 100644
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -9,25 +9,25 @@
 
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
-            <Checkbox id="binary" inputId="binary" v-model="checked" :binary="true" />
+            <Checkbox id="binary" v-model="checked" :binary="true" />
             <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
 
             <h3>Multiple</h3>
             <div class="p-grid">
                 <div class="p-col-12">
-                    <Checkbox id="city1" inputId="city1" name="city" value="Chicago" v-model="cities" />
+                    <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
                     <label for="city1" class="p-checkbox-label">Chicago</label>
                 </div>
                 <div class="p-col-12">
-                    <Checkbox id="city2" inputId="city2" name="city" value="Los Angeles" v-model="cities" />
+                    <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
                     <label for="city2" class="p-checkbox-label">Los Angeles</label>
                 </div>
                 <div class="p-col-12">
-                    <Checkbox id="city3" inputId="city3" name="city" value="New York" v-model="cities" />
+                    <Checkbox id="city3" name="city" value="New York" v-model="cities" />
                     <label for="city3" class="p-checkbox-label">New York</label>
                 </div>
                 <div class="p-col-12">
-                    <Checkbox id="city4" inputId="city4" name="city" value="San Francisco" v-model="cities" />
+                    <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
                     <label for="city4" class="p-checkbox-label">San Francisco</label>
                 </div>
             </div>
@@ -36,7 +36,7 @@
             <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
             <div class="p-grid">
                 <div v-for="theme of themes" :key="theme.key" class="p-col-12">
-                    <Checkbox :inputId="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
+                    <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
                     <label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
                 </div>
             </div>
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 515875132..4bd96b1cf 100644
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -156,25 +156,25 @@ export default {
 
 		&lt;div class=&quot;content-section implementation&quot;&gt;
 			&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
-			&lt;Checkbox id=&quot;binary&quot; inputId=&quot;binary&quot; v-model=&quot;checked&quot; :binary="true"/&gt;
+			&lt;Checkbox id=&quot;binary&quot; v-model=&quot;checked&quot; :binary="true"/&gt;
 			&lt;label for=&quot;binary&quot; class=&quot;p-checkbox-label&quot; style=&quot;font-weight: bold&quot;&gt;{{checked}}&lt;/label&gt;
 
 			&lt;h3&gt;Multiple&lt;/h3&gt;
 			&lt;div class=&quot;p-grid&quot;&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;Checkbox id=&quot;city1&quot; inputId=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;cities&quot; /&gt;
+					&lt;Checkbox id=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;cities&quot; /&gt;
 					&lt;label for=&quot;city1&quot; class=&quot;p-checkbox-label&quot;&gt;Chicago&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;Checkbox id=&quot;city2&quot; inputId=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;cities&quot; /&gt;
+					&lt;Checkbox id=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;cities&quot; /&gt;
 					&lt;label for=&quot;city2&quot; class=&quot;p-checkbox-label&quot;&gt;Los Angeles&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;Checkbox id=&quot;city3&quot; inputId=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;cities&quot; /&gt;
+					&lt;Checkbox id=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;cities&quot; /&gt;
 					&lt;label for=&quot;city3&quot; class=&quot;p-checkbox-label&quot;&gt;New York&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;Checkbox id=&quot;city4&quot; inputId=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;cities&quot; /&gt;
+					&lt;Checkbox id=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;cities&quot; /&gt;
 					&lt;label for=&quot;city4&quot; class=&quot;p-checkbox-label&quot;&gt;San Francisco&lt;/label&gt;
 				&lt;/div&gt;
 			&lt;/div&gt;
@@ -183,7 +183,7 @@ export default {
 			&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
 			&lt;div class=&quot;p-grid&quot;&gt;
 				&lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt;
-					&lt;Checkbox :inputId=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedThemes&quot; :disabled=&quot;theme.key === 'U'&quot;/&gt;
+					&lt;Checkbox :id=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedThemes&quot; :disabled=&quot;theme.key === 'U'&quot;/&gt;
 					&lt;label :for=&quot;theme.key&quot; class=&quot;p-checkbox-label&quot;&gt;{{theme.name}}&lt;/label&gt;
 				&lt;/div&gt;
 			&lt;/div&gt;
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 49507f104..4b9ddb436 100644
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -11,19 +11,19 @@
             <h3 class="first">Basic</h3>
             <div class="p-grid">
                 <div class="p-col-12">
-                    <RadioButton inputId="city1" name="city" value="Chicago" v-model="city" />
+                    <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
                     <label for="city1" class="p-radiobutton-label">Chicago</label>
                 </div>
                 <div class="p-col-12">
-                    <RadioButton inputId="city2" name="city" value="Los Angeles" v-model="city" />
+                    <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
                     <label for="city2" class="p-radiobutton-label">Los Angeles</label>
                 </div>
                 <div class="p-col-12">
-                    <RadioButton inputId="city3" name="city" value="New York" v-model="city" />
+                    <RadioButton id="city3" name="city" value="New York" v-model="city" />
                     <label for="city3" class="p-radiobutton-label">New York</label>
                 </div>
                 <div class="p-col-12">
-                    <RadioButton inputId="city4" name="city" value="San Francisco" v-model="city" />
+                    <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
                     <label for="city4" class="p-radiobutton-label">San Francisco</label>
                 </div>
             </div>
@@ -32,7 +32,7 @@
             <h3>Dynamic Values, Preselection, Value Binding and Disabled Option</h3>
             <div class="p-grid">
                 <div v-for="theme of themes" :key="theme.key" class="p-col-12">
-                    <RadioButton :inputId="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
+                    <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
                     <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
                 </div>
             </div>
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index be1b0bbd9..97123e4bc 100644
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -150,19 +150,19 @@ export default {
 			&lt;h3 class=&quot;first&quot;&gt;Basic&lt;/h3&gt;
 			&lt;div class=&quot;p-grid&quot;&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;RadioButton inputId=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;city&quot; /&gt;
+					&lt;RadioButton id=&quot;city1&quot; name=&quot;city&quot; value=&quot;Chicago&quot; v-model=&quot;city&quot; /&gt;
 					&lt;label for=&quot;city1&quot; class=&quot;p-radiobutton-label&quot;&gt;Chicago&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;RadioButton inputId=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;city&quot; /&gt;
+					&lt;RadioButton id=&quot;city2&quot; name=&quot;city&quot; value=&quot;Los Angeles&quot; v-model=&quot;city&quot; /&gt;
 					&lt;label for=&quot;city2&quot; class=&quot;p-radiobutton-label&quot;&gt;Los Angeles&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;RadioButton inputId=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;city&quot; /&gt;
+					&lt;RadioButton id=&quot;city3&quot; name=&quot;city&quot; value=&quot;New York&quot; v-model=&quot;city&quot; /&gt;
 					&lt;label for=&quot;city3&quot; class=&quot;p-radiobutton-label&quot;&gt;New York&lt;/label&gt;
 				&lt;/div&gt;
 				&lt;div class=&quot;p-col-12&quot;&gt;
-					&lt;RadioButton inputId=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;city&quot; /&gt;
+					&lt;RadioButton id=&quot;city4&quot; name=&quot;city&quot; value=&quot;San Francisco&quot; v-model=&quot;city&quot; /&gt;
 					&lt;label for=&quot;city4&quot; class=&quot;p-radiobutton-label&quot;&gt;San Francisco&lt;/label&gt;
 				&lt;/div&gt;
 			&lt;/div&gt;
@@ -171,7 +171,7 @@ export default {
 			&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
 			&lt;div class=&quot;p-grid&quot;&gt;
 				&lt;div v-for=&quot;theme of themes&quot; :key=&quot;theme.key&quot; class=&quot;p-col-12&quot;&gt;
-					&lt;RadioButton :inputId=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedTheme&quot; :disabled=&quot;theme.key === 'U'&quot; /&gt;
+					&lt;RadioButton :id=&quot;theme.key&quot; name=&quot;theme&quot; :value=&quot;theme&quot; v-model=&quot;selectedTheme&quot; :disabled=&quot;theme.key === 'U'&quot; /&gt;
 					&lt;label :for=&quot;theme.key&quot; class=&quot;p-radiobutton-label&quot;&gt;{{theme.name}}&lt;/label&gt;
 				&lt;/div&gt;
 			&lt;/div&gt;