diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index d8c47d5ef..1078c560d 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -12,31 +12,31 @@
             <div class="card">
                 <h5>Basic</h5>
                 <div class="field-checkbox">
-                    <Checkbox id="binary" v-model="checked" :binary="true" />
+                    <Checkbox inputId="binary" v-model="checked" :binary="true" />
                     <label for="binary">Remember Me</label>
                 </div>
 
                 <h5>Multiple</h5>
                 <div class="field-checkbox">
-                    <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+                    <Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
                     <label for="city1">Chicago</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+                    <Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
                     <label for="city2">Los Angeles</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+                    <Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
                     <label for="city3">New York</label>
                 </div>
                 <div class="field-checkbox">
-                    <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+                    <Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
                     <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-checkbox">
-                    <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+                    <Checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
                     <label :for="category.key">{{category.name}}</label>
                 </div>
             </div>
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 3155ff01e..107e43194 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -168,7 +168,7 @@ export default {
 
 <pre v-code><code>
 &lt;label for="chkbox1"&gt;Remember Me&lt;/label&gt;
-&lt;Checkbox id="chkbox1" /&gt;
+&lt;Checkbox inputId="chkbox1" /&gt;
 
 &lt;span id="chkbox2"&gt;Remember Me&lt;/span&gt;
 &lt;Checkbox aria-labelledby="chkbox2" /&gt;
@@ -217,31 +217,31 @@ export default {
     <div>
         <h5>Basic</h5>
         <div class="field-checkbox">
-            <Checkbox id="binary" v-model="checked" :binary="true" />
+            <Checkbox inputId="binary" v-model="checked" :binary="true" />
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
         <div class="field-checkbox">
-            <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+            <Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
             <label for="city1">Chicago</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+            <Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
             <label for="city2">Los Angeles</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+            <Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
             <label for="city3">New York</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+            <Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
             <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-checkbox">
-            <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <Checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -270,31 +270,31 @@ export default {
     <div>
         <h5>Basic</h5>
         <div class="field-checkbox">
-            <Checkbox id="binary" v-model="checked" :binary="true" />
+            <Checkbox inputId="binary" v-model="checked" :binary="true" />
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
         <div class="field-checkbox">
-            <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+            <Checkbox inputId="city1" name="city" value="Chicago" v-model="cities" />
             <label for="city1">Chicago</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+            <Checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities" />
             <label for="city2">Los Angeles</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+            <Checkbox inputId="city3" name="city" value="New York" v-model="cities" />
             <label for="city3">New York</label>
         </div>
         <div class="field-checkbox">
-            <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+            <Checkbox inputId="city4" name="city" value="San Francisco" v-model="cities" />
             <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-checkbox">
-            <Checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+            <Checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>
@@ -325,31 +325,31 @@ export default {
                     content: `<div id="app">
         <h5>Basic</h5>
         <div class="field-checkbox">
-            <p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
+            <p-checkbox inputId="binary" v-model="checked" :binary="true"></p-checkbox>
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
         <div class="field-checkbox">
-            <p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
+            <p-checkbox inputId="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
             <label for="city1">Chicago</label>
         </div>
         <div class="field-checkbox">
-            <p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
+            <p-checkbox inputId="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
             <label for="city2">Los Angeles</label>
         </div>
         <div class="field-checkbox">
-            <p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
+            <p-checkbox inputId="city3" name="city" value="New York" v-model="cities"></p-checkbox>
             <label for="city3">New York</label>
         </div>
         <div class="field-checkbox">
-            <p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
+            <p-checkbox inputId="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
             <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-checkbox">
-            <p-checkbox :id="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
+            <p-checkbox :inputId="category.key" name="category" :value="category.name" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
             <label :for="category.key">{{category.name}}</label>
         </div>
     </div>