diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index f49fc59dc..27f30dff5 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -36,11 +36,11 @@
                 <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="theme of themes" :key="theme.key" class="p-field-checkbox">
-                    <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
-                    <label :for="theme.key">{{theme.name}}</label>
+                <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+                    <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
+                    <label :for="category.key">{{category.name}}</label>
                 </div>
-                <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
+                <p>Selected Categories: <span style="font-weight: bold">{{this.selectedCategories}}</span></p>
             </div>
         </div>
 
@@ -56,12 +56,12 @@ export default {
         return {
             checked: false,
             cities: [],
-            themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
-            selectedThemes: []
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategories: []
         }
     },
     created() {
-        this.selectedThemes = this.themes.slice(1,3);
+        this.selectedCategories = this.categories.slice(1,3);
     },
     components: {
         'CheckboxDoc': CheckboxDoc
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 8718d5a7d..4a3e94d35 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -171,27 +171,27 @@ export default {
 &lt;p&gt;Selected Cities : &lt;span style="font-weight: bold"&gt;{{cities}}&lt;/span&gt;&lt;/p&gt;
 
 &lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
-&lt;div v-for="theme of themes" :key="theme.key" class="p-field-checkbox"&gt;
-    &lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt;
-    &lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
+&lt;div v-for="category of categories" :key="category.key" class="p-field-checkbox"&gt;
+    &lt;Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/&gt;
+    &lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
 &lt;/div&gt;
-&lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;Selected Categories: &lt;span style="font-weight: bold"&gt;{{this.selectedCategories}}&lt;/span&gt;&lt;/p&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
 export default {
-	data() {
-		return {
-			checked: false,
-			cities: [],
-			themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
-			selectedThemes: []
-		}
-	},
-	created() {
-		this.selectedThemes = this.themes.slice(1,3);
-	}
+    data() {
+        return {
+            checked: false,
+            cities: [],
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategories: []
+        }
+    },
+    created() {
+        this.selectedCategories = this.categories.slice(1,3);
+    }
 }
 </CodeHighlight>
 			</TabPanel>
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index b9479f3f7..2dda52517 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -30,11 +30,11 @@
                 <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton">
-                    <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
-                    <label :for="theme.key">{{theme.name}}</label>
+                <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+                    <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
+                    <label :for="category.key">{{category.name}}</label>
                 </div>
-                <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
+                <p>Selected Category: <span style="font-weight: bold">{{this.selectedCategory}}</span></p>
             </div>
         </div>
 
@@ -49,12 +49,12 @@ export default {
     data() {
         return {
             city: null,
-            themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
-            selectedTheme: null
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategory: null
         }
     },
     created() {
-        this.selectedTheme = this.themes[1];
+        this.selectedCategory = this.categories[1];
     },
     components: {
         'RadioButtonDoc': RadioButtonDoc
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 540bdeba0..89f5d58aa 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -156,27 +156,27 @@ export default {
 &lt;/div&gt;
 &lt;p&gt;Selected City: &lt;span style="font-weight: bold"&gt;{{this.city}}&lt;/span&gt;&lt;/p&gt;
 
-&lt;h3&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h3&gt;
-&lt;div v-for="theme of themes" :key="theme.key" class="p-field-radiobutton"&gt;
-    &lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt;
-    &lt;label :for="theme.key"&gt;{{theme.name}}&lt;/label&gt;
+&lt;h5&gt;Dynamic Values, Preselection, Value Binding and Disabled Option&lt;/h5&gt;
+&lt;div v-for="category of categories" :key="category.key" class="p-field-radiobutton"&gt;
+    &lt;RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" /&gt;
+    &lt;label :for="category.key"&gt;{{category.name}}&lt;/label&gt;
 &lt;/div&gt;
-&lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt;
+&lt;p&gt;Selected Category: &lt;span style="font-weight: bold"&gt;{{this.selectedCategory}}&lt;/span&gt;&lt;/p&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
 export default {
-	data() {
-		return {
-			city: null,
-			themes: [{name: 'Apollo', key: 'A'}, {name: 'Babylon', key: 'B'}, {name: 'Serenity', key: 'S'}, {name: 'Ultima', key: 'U'}],
-			selectedTheme: null
-		}
-	},
-	created() {
-		this.selectedTheme = this.themes[1];
-	}
+    data() {
+        return {
+            city: null,
+            categories: [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}],
+            selectedCategory: null
+        }
+    },
+    created() {
+        this.selectedCategory = this.categories[1];
+    }
 }
 </CodeHighlight>
 			</TabPanel>