diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 43a52a0c4..c6ee15d7f 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -91,12 +91,18 @@
                             <label for="multiselect">MultiSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="p-field p-col-12 p-md-4">
                         <span class="p-float-label">
                             <Textarea id="textarea" v-model="value10" rows="3" />
                             <label for="textarea">Textarea</label>
                         </span>
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Password id="password" v-model="value11" />
+                            <label for="password">Password</label>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -190,12 +196,18 @@
             &lt;label for="multiselect"&gt;MultiSelect&lt;/label&gt;
         &lt;/span&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12"&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;span class="p-float-label"&gt;
             &lt;Textarea id="textarea" v-model="value10" rows="3" /&gt;
             &lt;label for="textarea"&gt;Textarea&lt;/label&gt;
         &lt;/span&gt;
     &lt;/div&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;span class="p-float-label"&gt;
+            &lt;Password id="password" v-model="value11" /&gt;
+            &lt;label for="password"&gt;Password&lt;/label&gt;
+        &lt;/span&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 </template>
@@ -227,6 +239,7 @@ export default {
             value8: null,
             value9: null,
             value10: null,
+            value11: null,
             selectedCity: null,
             cascadeCountries: [
                 {
@@ -362,6 +375,7 @@ export default {
             value8: null,
             value9: null,
             value10: null,
+            value11: null,
             valueIconLeft: null,
             valueIconRight: null,
             selectedCity: null,
@@ -528,12 +542,18 @@ export default {
                             <label for="multiselect">MultiSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="p-field p-col-12 p-md-4">
                         <span class="p-float-label">
                             <Textarea id="textarea" v-model="value10" rows="3" />
                             <label for="textarea">Textarea</label>
                         </span>
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <span class="p-float-label">
+                            <Password id="password" v-model="value11" />
+                            <label for="password">Password</label>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
@@ -564,6 +584,7 @@ export default {
             value8: null,
             value9: null,
             value10: null,
+            value11: null,
             selectedCity: null,
             cascadeCountries: [
                 {
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index f196fcefb..a3311ee2e 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -42,6 +42,9 @@
                     <div class="p-field p-col-12 p-md-4">
                         <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -86,6 +89,9 @@
     &lt;div class="p-field p-col-12 p-md-4"&gt;
         &lt;Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" /&gt;
     &lt;/div&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;Password id="password" v-model="value10" placeholder="Password" class="p-invalid" /&gt;
+    &lt;/div&gt;
 &lt;/div&gt;
 </template>
 </code></pre>
@@ -115,6 +121,7 @@ export default {
             value7: null,
             value8: null,
             value9: null,
+            value10: null,
             selectedCity: null,
             cascadeCountries: [
                 {
@@ -249,6 +256,7 @@ export default {
             value7: null,
             value8: null,
             value9: null,
+            value10: null,
             selectedCity: null,
             cascadeCountries: [
                 {
@@ -364,6 +372,9 @@ export default {
                     <div class="p-field p-col-12 p-md-4">
                         <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
                     </div>
+                    <div class="p-field p-col-12 p-md-4">
+                        <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -392,6 +403,7 @@ export default {
             value7: null,
             value8: null,
             value9: null,
+            value10: null,
             selectedCity: null,
             cascadeCountries: [
                 {