diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index 62fed6ea5..436b62cc5 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -8,41 +8,35 @@
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
-            <div class="p-grid">
-                <div class="p-col-12">
-                    <Checkbox id="binary" v-model="checked" :binary="true" />
-                    <label for="binary" style="font-weight: bold">{{checked}}</label>
-                </div>
+            <h3>Basic</h3>
+            <div class="p-field-checkbox">
+                <Checkbox id="binary" v-model="checked" :binary="true" />
+                <label for="binary">{{checked}}</label>
             </div>
 
             <h3>Multiple</h3>
-            <div class="p-grid">
-                <div class="p-col-12">
-                    <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
-                    <label for="city1">Chicago</label>
-                </div>
-                <div class="p-col-12">
-                    <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
-                    <label for="city2">Los Angeles</label>
-                </div>
-                <div class="p-col-12">
-                    <Checkbox id="city3" name="city" value="New York" v-model="cities" />
-                    <label for="city3">New York</label>
-                </div>
-                <div class="p-col-12">
-                    <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
-                    <label for="city4">San Francisco</label>
-                </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
+                <label for="city2">Los Angeles</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city3" name="city" value="New York" v-model="cities" />
+                <label for="city3">New York</label>
+            </div>
+            <div class="p-field-checkbox">
+                <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
+                <label for="city4">San Francisco</label>
             </div>
             <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
 
             <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 :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
-                    <label :for="theme.key">{{theme.name}}</label>
-                </div>
+            <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>
             <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
         </div>
@@ -70,15 +64,4 @@ export default {
         'CheckboxDoc': CheckboxDoc
     }
 }
-</script>
-
-<style scoped>
-.p-col-12 {
-    display: flex;
-    align-items: center;
-}
-
-label {
-    margin-left: .5rem;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 7323e4b3e..40d2b3a9a 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -146,40 +146,34 @@ export default {
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;Checkbox id="binary" v-model="checked" :binary="true"/&gt;
-        &lt;label for="binary" class="p-checkbox-label" style="font-weight: bold"&gt;{{checked}}&lt;/label&gt;
-    &lt;/div&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;Checkbox id="binary" v-model="checked" :binary="true" /&gt;
+    &lt;label for="binary"&gt;{{checked}}&lt;/label&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Multiple&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt;
-        &lt;label for="city1" class="p-checkbox-label"&gt;Chicago&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /&gt;
-        &lt;label for="city2" class="p-checkbox-label"&gt;Los Angeles&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;Checkbox id="city3" name="city" value="New York" v-model="cities" /&gt;
-        &lt;label for="city3" class="p-checkbox-label"&gt;New York&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt;
-        &lt;label for="city4" class="p-checkbox-label"&gt;San Francisco&lt;/label&gt;
-    &lt;/div&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;Checkbox id="city1" name="city" value="Chicago" v-model="cities" /&gt;
+    &lt;label for="city1"&gt;Chicago&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" /&gt;
+    &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;Checkbox id="city3" name="city" value="New York" v-model="cities" /&gt;
+    &lt;label for="city3"&gt;New York&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;Checkbox id="city4" name="city" value="San Francisco" v-model="cities" /&gt;
+    &lt;label for="city4"&gt;San Francisco&lt;/label&gt;
 &lt;/div&gt;
 &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 class="p-grid"&gt;
-    &lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
-        &lt;Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/&gt;
-        &lt;label :for="theme.key" class="p-checkbox-label"&gt;{{theme.name}}&lt;/label&gt;
-    &lt;/div&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&gt;
 &lt;p&gt;Selected Themes: &lt;span style="font-weight: bold"&gt;{{this.selectedThemes}}&lt;/span&gt;&lt;/p&gt;
 </template>
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
index ace6ab089..e98913f00 100755
--- a/src/views/inputnumber/InputNumberDemo.vue
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -9,101 +9,101 @@
 
         <div class="content-section implementation">
             <h3>Numerals</h3>
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-3">
-                    Integer Only
-                    <InputNumber v-model="value1" />
+            <div class="p-fluid p-grid p-formgrid">
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="integeronly">Integer Only</label>
+                    <InputNumber id="integeronly" v-model="value1" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Without Grouping
-                    <InputNumber v-model="value2" mode="decimal" :useGrouping="false" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="withoutgrouping">Without Grouping</label>
+                    <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Min-Max Fraction Digits
-                    <InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="integeronly">Min-Max Fraction Digits</label>
+                    <InputNumber id="integeronly" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Min-Max Boundaries
-                    <InputNumber v-model="value4" mode="decimal" :min="0" :max="100" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="minmax">Min-Max Boundaries</label>
+                    <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
                 </div>
 
-                <div class="p-col-12 p-md-3">
-                    User Locale
-                    <InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-user">User Locale</label>
+                    <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    United State Locale
-                    <InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-us">United States Locale</label>
+                    <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    German Locale
-                    <InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-german">German Locale</label>
+                    <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Indian Locale
-                    <InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="locale-japan">Indian Locale</label>
+                    <InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
                 </div>
             </div>
 
             <h3>Currency</h3>
             <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-3">
-                    United States
-                    <InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-us">United States</label>
+                    <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Germany
-                    <InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-germany">Germany</label>
+                    <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    India
-                    <InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-india">India</label>
+                    <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Japan
-                    <InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="currency-japan">Japan</label>
+                    <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
                 </div>
             </div>
 
             <h3>Prefix and Suffix</h3>
             <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-3">
-                    Mile
-                    <InputNumber v-model="value13" suffix=" mi" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="mile">Mile</label>
+                    <InputNumber id="mile" v-model="value13" suffix=" mi" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Percent
-                    <InputNumber v-model="value14" prefix="%" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="percent">Percent</label>
+                    <InputNumber id="percent" v-model="value14" prefix="%" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Expiry
-                    <InputNumber v-model="value15" prefix="Expires in " suffix=" days" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="expiry">Expiry</label>
+                    <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Temperature
-                    <InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="temperature">Temperature</label>
+                    <InputNumber id="temperature" v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
                 </div>
             </div>
 
             <h3>Buttons</h3>
             <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-3">
-                    Stacked
-                    <InputNumber v-model="value17" showButtons mode="currency" currency="USD" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="stacked">Stacked</label>
+                    <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Horizontal with Step
-                    <InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="horizontal">Horizontal with Step</label>
+                    <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
                         decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    <div>Vertical</div>
-                    <InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="vertical">Vertical</label>
+                    <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
                         decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
                 </div>
-                <div class="p-col-12 p-md-3">
-                    Min-Max Boundaries
-                    <InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
+                <div class="p-field p-col-12 p-md-3">
+                    <label for="minmax-buttons">Min-Max Boundaries</label>
+                    <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
                 </div>
             </div>
         </div>
@@ -147,7 +147,7 @@ export default {
 </script>
 
 <style scoped>
-.p-inputnumber {
-    margin-top: 1rem;
+.layout-content .content-section.implementation > h3 {
+    font-weight: 600;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 49b3375a5..1f387a4e5 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -321,101 +321,101 @@ Vertical
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Numerals&lt;/h3&gt;
-&lt;div class="p-grid p-fluid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Integer Only
-        &lt;InputNumber v-model="value1" /&gt;
+&lt;div class="p-fluid p-grid p-formgrid"&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="integeronly"&gt;Integer Only&lt;/label&gt;
+        &lt;InputNumber id="integeronly" v-model="value1" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Without Grouping
-        &lt;InputNumber v-model="value2" mode="decimal" :useGrouping="false" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="withoutgrouping"&gt;Without Grouping&lt;/label&gt;
+        &lt;InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Min-Max Fraction Digits
-        &lt;InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="integeronly"&gt;Min-Max Fraction Digits&lt;/label&gt;
+        &lt;InputNumber id="integeronly" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Min-Max Boundaries
-        &lt;InputNumber v-model="value4" mode="decimal" :min="0" :max="100" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="minmax"&gt;Min-Max Boundaries&lt;/label&gt;
+        &lt;InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" /&gt;
     &lt;/div&gt;
 
-    &lt;div class="p-col-12 p-md-3"&gt;
-        User Locale
-        &lt;InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="locale-user"&gt;User Locale&lt;/label&gt;
+        &lt;InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        United State Locale
-        &lt;InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="locale-us"&gt;United States Locale&lt;/label&gt;
+        &lt;InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        German Locale
-        &lt;InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="locale-german"&gt;German Locale&lt;/label&gt;
+        &lt;InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Indian Locale
-        &lt;InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="locale-japan"&gt;Indian Locale&lt;/label&gt;
+        &lt;InputNumber id="locale-japan" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Currency&lt;/h3&gt;
 &lt;div class="p-grid p-fluid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        United States
-        &lt;InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="currency-us"&gt;United States&lt;/label&gt;
+        &lt;InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Germany
-        &lt;InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="currency-germany"&gt;Germany&lt;/label&gt;
+        &lt;InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        India
-        &lt;InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="currency-india"&gt;India&lt;/label&gt;
+        &lt;InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Japan
-        &lt;InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="currency-japan"&gt;Japan&lt;/label&gt;
+        &lt;InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Prefix and Suffix&lt;/h3&gt;
 &lt;div class="p-grid p-fluid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Mile
-        &lt;InputNumber v-model="value13" suffix=" mi" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="mile"&gt;Mile&lt;/label&gt;
+        &lt;InputNumber id="mile" v-model="value13" suffix=" mi" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Percent
-        &lt;InputNumber v-model="value14" prefix="%" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="percent"&gt;Percent&lt;/label&gt;
+        &lt;InputNumber id="percent" v-model="value14" prefix="%" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Expiry
-        &lt;InputNumber v-model="value15" prefix="Expires in " suffix=" days" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="expiry"&gt;Expiry&lt;/label&gt;
+        &lt;InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Temperature
-        &lt;InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="temperature"&gt;Temperature&lt;/label&gt;
+        &lt;InputNumber id="temperature" v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Buttons&lt;/h3&gt;
 &lt;div class="p-grid p-fluid"&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Stacked
-        &lt;InputNumber v-model="value17" showButtons mode="currency" currency="USD" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="stacked"&gt;Stacked&lt;/label&gt;
+        &lt;InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Horizontal with Step
-        &lt;InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
-            decrementButtonclass="p-button-danger" incrementButtonclass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="horizontal"&gt;Horizontal with Step&lt;/label&gt;
+        &lt;InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="horizontal" :step="0.25"
+            decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        &lt;div&gt;Vertical&lt;/div&gt;
-        &lt;InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="vertical"&gt;Vertical&lt;/label&gt;
+        &lt;InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
             decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-3"&gt;
-        Min-Max Boundaries
-        &lt;InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" /&gt;
+    &lt;div class="p-field p-col-12 p-md-3"&gt;
+        &lt;label for="minmax-buttons"&gt;Min-Max Boundaries&lt;/label&gt;
+        &lt;InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
 </template>
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 59941b744..9e1421f32 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -8,33 +8,29 @@
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Basic</h3>
-            <div class="p-grid">
-                <div class="p-col-12">
-                    <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
-                    <label for="city1">Chicago</label>
-                </div>
-                <div class="p-col-12">
-                    <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
-                    <label for="city2">Los Angeles</label>
-                </div>
-                <div class="p-col-12">
-                    <RadioButton id="city3" name="city" value="New York" v-model="city" />
-                    <label for="city3">New York</label>
-                </div>
-                <div class="p-col-12">
-                    <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
-                    <label for="city4">San Francisco</label>
-                </div>
+            <h3>Basic</h3>
+             <div class="p-field-radiobutton">
+                <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
+                <label for="city1">Chicago</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
+                <label for="city2">Los Angeles</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city3" name="city" value="New York" v-model="city" />
+                <label for="city3">New York</label>
+            </div>
+            <div class="p-field-radiobutton">
+                <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
+                <label for="city4">San Francisco</label>
             </div>
             <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
 
             <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 :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
-                    <label :for="theme.key">{{theme.name}}</label>
-                </div>
+            <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>
            <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
         </div>
@@ -61,15 +57,4 @@ export default {
         'RadioButtonDoc': RadioButtonDoc
     }
 }
-</script>
-
-<style scoped>
-.p-col-12 {
-    display: flex;
-    align-items: center;
-}
-
-label {
-    margin-left: .5rem;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index eeced1b14..51283eacb 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -138,32 +138,28 @@ export default {
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
-&lt;div class="p-grid"&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
-        &lt;label for="city1" class="p-radiobutton-label"&gt;Chicago&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;RadioButton id="city2" name="city" value="Los Angeles" v-model="city" /&gt;
-        &lt;label for="city2" class="p-radiobutton-label"&gt;Los Angeles&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;RadioButton id="city3" name="city" value="New York" v-model="city" /&gt;
-        &lt;label for="city3" class="p-radiobutton-label"&gt;New York&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div class="p-col-12"&gt;
-        &lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt;
-        &lt;label for="city4" class="p-radiobutton-label"&gt;San Francisco&lt;/label&gt;
-    &lt;/div&gt;
+    &lt;div class="p-field-radiobutton"&gt;
+    &lt;RadioButton id="city1" name="city" value="Chicago" v-model="city" /&gt;
+    &lt;label for="city1"&gt;Chicago&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-radiobutton"&gt;
+    &lt;RadioButton id="city2" name="city" value="Los Angeles" v-model="city" /&gt;
+    &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-radiobutton"&gt;
+    &lt;RadioButton id="city3" name="city" value="New York" v-model="city" /&gt;
+    &lt;label for="city3"&gt;New York&lt;/label&gt;
+&lt;/div&gt;
+&lt;div class="p-field-radiobutton"&gt;
+    &lt;RadioButton id="city4" name="city" value="San Francisco" v-model="city" /&gt;
+    &lt;label for="city4"&gt;San Francisco&lt;/label&gt;
 &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 class="p-grid"&gt;
-    &lt;div v-for="theme of themes" :key="theme.key" class="p-col-12"&gt;
-        &lt;RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" /&gt;
-        &lt;label :for="theme.key" class="p-radiobutton-label"&gt;{{theme.name}}&lt;/label&gt;
-    &lt;/div&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;/div&gt;
 &lt;p&gt;Selected Theme: &lt;span style="font-weight: bold"&gt;{{this.selectedTheme}}&lt;/span&gt;&lt;/p&gt;
 </template>
diff --git a/src/views/togglebutton/ToggleButtonDemo.vue b/src/views/togglebutton/ToggleButtonDemo.vue
index 90da8d660..a50c6dd3e 100755
--- a/src/views/togglebutton/ToggleButtonDemo.vue
+++ b/src/views/togglebutton/ToggleButtonDemo.vue
@@ -10,11 +10,11 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" />
-            <p style="font-weight: bold">{{checked1}}</p>
+            <p>{{checked1}}</p>
 
             <h3>Customized</h3>
             <ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" />
-            <p style="font-weight: bold">{{checked2}}</p>
+            <p>{{checked2}}</p>
         </div>
 
         <ToggleButtonDoc/>
diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue
index 1f6e10510..3f9ce8196 100755
--- a/src/views/togglebutton/ToggleButtonDoc.vue
+++ b/src/views/togglebutton/ToggleButtonDoc.vue
@@ -168,11 +168,11 @@ export default {
 <template v-pre>
 &lt;h3&gt;Basic&lt;/h3&gt;
 &lt;ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" /&gt;
-&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
+&lt;p&gt;{{checked1}}&lt;/p&gt;
 
 &lt;h3&gt;Customized&lt;/h3&gt;
 &lt;ToggleButton v-model="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" style="width: 10em" /&gt;
-&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
+&lt;p&gt;{{checked2}}&lt;/p&gt;
 </template>
 </CodeHighlight>
 
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
index 0f747717a..1aedaf08b 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
@@ -8,13 +8,10 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12">
-                    <TriStateCheckbox v-model="value" />
-                    <label>{{value == null ? 'null' : value}}</label>
-                </div>
+            <div class="p-field-checkbox">
+                <TriStateCheckbox v-model="value" />
+                <label>{{value == null ? 'null' : value}}</label>
             </div>
-
         </div>
 
         <TriStateCheckboxDoc/>
@@ -34,16 +31,4 @@ export default {
         'TriStateCheckboxDoc': TriStateCheckboxDoc
     }
 }
-</script>
-
-<style scoped>
-.p-col-12 {
-    display: flex;
-    align-items: center;
-}
-
-label {
-    font-weight: bold;
-    margin-left: .5rem;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index 85deacd62..6323947e4 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -123,8 +123,10 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;TriStateCheckbox v-model="value" /&gt;
-&lt;span &gt;{{value == null ? 'null' : value}}&lt;/span&gt;
+&lt;div class="p-field-checkbox"&gt;
+    &lt;TriStateCheckbox v-model="value" /&gt;
+    &lt;label&gt;{{value == null ? 'null' : value}}&lt;/label&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>