Add input style switcher

public/themes/arya-blue/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #121212;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #121212;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-green/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #121212;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #121212;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-orange/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #121212;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #121212;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);

public/themes/arya-purple/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #121212;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #121212;
+}
+
 .p-listbox {
   background: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);

public/themes/bootstrap4-dark/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.9375rem;
 }
+.p-inputtext.p-input-filled {
+  background: #20262e;
+}
 
 .p-float-label label {
   left: 0.75rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #20262e;
+}
+
 .p-listbox {
   background: #2a323d;
   color: rgba(255, 255, 255, 0.87);

public/themes/bootstrap4-light/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.9375rem;
 }
+.p-inputtext.p-input-filled {
+  background: rgba(0, 0, 0, 0.03);
+}
 
 .p-float-label label {
   left: 0.75rem;
@@ -717,6 +720,10 @@
   color: #6c757d;
 }
 
+.p-input-filled .p-inputtext {
+  background: rgba(0, 0, 0, 0.03);
+}
+
 .p-listbox {
   background: #ffffff;
   color: #212529;

public/themes/luna-amber/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #191919;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #9b9b9b;
 }
 
+.p-input-filled .p-inputtext {
+  background: #191919;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

public/themes/luna-blue/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #191919;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #9b9b9b;
 }
 
+.p-input-filled .p-inputtext {
+  background: #191919;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

public/themes/luna-green/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #191919;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #9b9b9b;
 }
 
+.p-input-filled .p-inputtext {
+  background: #191919;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

public/themes/luna-pink/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #191919;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #9b9b9b;
 }
 
+.p-input-filled .p-inputtext {
+  background: #191919;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

public/themes/nova-accent/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f4f4f4;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #666666;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f4f4f4;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

public/themes/nova-alt/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f4f4f4;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #666666;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f4f4f4;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

public/themes/nova-vue/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f4f4f4;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #666666;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f4f4f4;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

public/themes/nova/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f4f4f4;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #666666;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f4f4f4;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

public/themes/rhea/theme.css

@@ -311,7 +311,7 @@
 }
 .p-checkbox .p-checkbox-box {
   border: 1px solid #dadada;
-  background: #f4f4f4;
+  background: #ffffff;
   width: 1.5rem;
   height: 1.5rem;
   color: #666666;
@@ -404,7 +404,7 @@
 }
 
 .p-dropdown {
-  background: #f4f4f4;
+  background: #ffffff;
   border: 1px solid #dadada;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 2px;
@@ -430,7 +430,7 @@
   box-shadow: none;
 }
 .p-dropdown .p-dropdown-trigger {
-  background: #f4f4f4;
+  background: #ffffff;
   color: #666666;
   width: 2.357rem;
   border-top-right-radius: 2px;
@@ -501,7 +501,7 @@
   border-bottom-left-radius: 2px;
 }
 .p-editor-container .p-editor-content .ql-editor {
-  background: #f4f4f4;
+  background: #ffffff;
   color: #666666;
   border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
@@ -606,7 +606,7 @@
   height: 1.75rem;
 }
 .p-inputswitch .p-inputswitch-slider {
-  background: #f4f4f4;
+  background: #ffffff;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 30px;
 }
@@ -647,7 +647,7 @@
 .p-inputtext {
   font-size: 1rem;
   color: #666666;
-  background: #f4f4f4;
+  background: #ffffff;
   padding: 0.429rem 0.429rem;
   border: 1px solid #dadada;
   border-width: 1px;
@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.53625rem 0.53625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f4f4f4;
+}
 
 .p-float-label label {
   left: 0.429rem;
@@ -717,6 +720,10 @@
   color: #a6a6a6;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f4f4f4;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #666666;
@@ -769,7 +776,7 @@
 }
 
 .p-multiselect {
-  background: #f4f4f4;
+  background: #ffffff;
   border: 1px solid #dadada;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   border-radius: 2px;
@@ -790,7 +797,7 @@
   color: #a6a6a6;
 }
 .p-multiselect .p-multiselect-trigger {
-  background: #f4f4f4;
+  background: #ffffff;
   color: #666666;
   width: 2.357rem;
   border-top-right-radius: 2px;
@@ -889,7 +896,7 @@
 }
 .p-radiobutton .p-radiobutton-box {
   border: 1px solid #dadada;
-  background: #f4f4f4;
+  background: #ffffff;
   width: 20px;
   height: 20px;
   color: #666666;

public/themes/saga-blue/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f8f9fa;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: #6c757d;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f8f9fa;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

public/themes/saga-green/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f8f9fa;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: #6c757d;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f8f9fa;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

public/themes/saga-orange/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #f8f9fa;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: #6c757d;
 }
 
+.p-input-filled .p-inputtext {
+  background: #f8f9fa;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

public/themes/vela-blue/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #17212f;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #17212f;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-green/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #17212f;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #17212f;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-orange/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #17212f;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #17212f;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);

public/themes/vela-purple/theme.css

@@ -676,6 +676,9 @@
   font-size: 1.25rem;
   padding: 0.625rem 0.625rem;
 }
+.p-inputtext.p-input-filled {
+  background: #17212f;
+}
 
 .p-float-label label {
   left: 0.5rem;
@@ -717,6 +720,10 @@
   color: rgba(255, 255, 255, 0.6);
 }
 
+.p-input-filled .p-inputtext {
+  background: #17212f;
+}
+
 .p-listbox {
   background: #1f2d40;
   color: rgba(255, 255, 255, 0.87);

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-wrapper" :class="[{'layout-news-active':newsActive}]">
+    <div class="layout-wrapper" :class="containerClass">
         <a class="layout-news" href="https://www.primefaces.org/store" target="_blank" tabindex="-1" v-if="newsActive">
             <div class="layout-news-container">
                 <img class="layouts-news-text-image" alt="easter" src="./assets/images/topbar-easter-2020-text.png">
@@ -79,11 +79,7 @@ export default {
             this.activeMenuIndex = null;
 
             EventBus.$emit('change-theme', event);
-
+            this.$appState.darkTheme = event.dark;
-            if (event.dark)
-                document.body.setAttribute('data-darktheme', 'true');
-            else
-                document.body.removeAttribute('data-darktheme')
 
         },
         addClass(element, className) {
@@ -115,12 +111,17 @@ export default {
             return false;
         }
     },
+    computed: {
+        containerClass() {
+            return [{'layout-news-active': this.newsActive, 'p-input-filled': this.$appState.inputStyle === 'filled'}];
+        }
+    },
     components: {
         'app-topbar': AppTopBar,
         'app-menu': AppMenu,
         'app-footer': AppFooter,
         'app-configurator': AppConfigurator
-    },
+    }
 }
 </script>
 

src/AppConfigurator.vue

@@ -17,6 +17,8 @@
                         <Button icon="pi pi-plus"  @click="incrementScale()" class="p-button-secondary" :disabled="scale === scales[scales.length - 1]" />
                     </div>
 
+                    <AppInputStyleSwitch />
+
                     <h4>Free Themes</h4>
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
 
@@ -30,7 +32,7 @@
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/bootstrap-dark.png" alt="Bootstrap Dark" @click="changeTheme($event, 'bootstrap4-dark')"/>
+                                <img src="./assets/images/themes/bootstrap-dark.png" alt="Bootstrap Dark" @click="changeTheme($event, 'bootstrap4-dark', true)"/>
                             </button>
                             <span>Dark</span>
                         </div>
@@ -46,7 +48,7 @@
                         </div>
                         <div class="p-col-3">
                             <button class="p-link">
-                                <img src="./assets/images/themes/material-dark.png" alt="Material Dark" @click="changeTheme($event, 'material-dark')"/>
+                                <img src="./assets/images/themes/material-dark.png" alt="Material Dark" @click="changeTheme($event, 'material-dark', true)"/>
                             </button>
                             <span>Dark</span>
                         </div>
@@ -234,7 +236,8 @@
 <script>
 export default {
     props: {
-        theme: String
+        theme: String,
+        inputStyle: String
     },
     data() {
         return {

src/AppInputStyleSwitch.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="app-inputstyleswitch">
+        <h4>Input Style</h4>
+        <div class="p-formgroup-inline">
+        <div class="p-field-radiobutton">
+            <RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @input="onChange" />
+            <label for="input_outlined">Outlined</label>
+        </div>
+        <div class="p-field-radiobutton">
+            <RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @input="onChange" />
+            <label for="input_filled">Filled</label>
+        </div>
+    </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+    methods: {
+        onChange(value) {
+            this.$appState.inputStyle = value;
+        }
+    },
+    computed: {
+        value() {
+            return this.$appState.inputStyle;
+        }
+    }
+};
+</script>

src/assets/styles/app/_config.scss

@@ -26,7 +26,6 @@
     .layout-config-content-wrapper {
         position: relative;
         height: 100%;
-        padding: 2rem;
         box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
         color: var(--text-color);
         background-color: var(--surface-e);
@@ -74,6 +73,7 @@
     .layout-config-content {
         overflow: auto;
         height: 100%;
+        padding: 2rem;
     }
 
     .config-scale {
@@ -146,6 +146,11 @@
         img {
             width: 50px;
             border-radius: 4px;
+            transition: transform .2s;
+
+            &:hover {
+                transform: scale(1.1);
+            }
         }
 
         span {
@@ -157,6 +162,11 @@
     .premium-themes {
         img {
             width: 100%;
+            transition: transform .2s;
+
+            &:hover {
+                transform: scale(1.1);
+            }
         }
     }
 }

src/assets/styles/app/_content.scss

@@ -9,6 +9,9 @@
             background-color: var(--surface-b);
             color: var(--text-color);
             padding-bottom: 0;
+            display: flex;
+            align-items: top;
+            justify-content: space-between;
 
             .feature-intro {
                 h1 {

src/assets/styles/app/_responsive.scss

@@ -87,6 +87,14 @@
             &.submenu ul li {
                 width: 50%;
             }
+
+            &.introduction { 
+                flex-direction: column;
+                
+                .app-inputstyleswitch {
+                    margin-top: 1.5rem;
+                }
+            }
         }
 
     }

src/main.js

@@ -75,6 +75,7 @@ import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 import Galleria from './components/galleria/Galleria';
 
 import CodeHighlight from './views/codehighlight/CodeHighlight';
+import AppInputStyleSwitch from './AppInputStyleSwitch';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -89,6 +90,8 @@ Vue.use(Vuelidate);
 Vue.use(ToastService);
 Vue.directive('tooltip', Tooltip);
 
+Vue.prototype.$appState = Vue.observable({ inputStyle: 'outlined', darkTheme: false })
+
 Vue.config.productionTip = false;
 
 Vue.component('Accordion', Accordion);
@@ -163,6 +166,7 @@ Vue.component('TriStateCheckbox', TriStateCheckbox);
 Vue.component('Galleria', Galleria);
 
 Vue.component('CodeHighlight', CodeHighlight);
+Vue.component('AppInputStyleSwitch', AppInputStyleSwitch);
 
 router.beforeEach(function (to, from, next) {
     window.scrollTo(0, 0);

src/views/autocomplete/AutoCompleteDemo.vue

@@ -5,6 +5,7 @@
                 <h1>AutoComplete</h1>
                 <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/calendar/CalendarDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Calendar</h1>
                 <p>Calendar is an input component to select a date.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/chart/BarChartDemo.vue

@@ -184,7 +184,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         applyLightTheme() {
             this.basicOptions = {

src/views/chart/ComboChartDemo.vue

@@ -98,7 +98,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         applyLightTheme() {
             this.chartOptions = {

src/views/chart/DoughnutChartDemo.vue

@@ -55,7 +55,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         getLightTheme() {
             return {

src/views/chart/LineChartDemo.vue

@@ -131,7 +131,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         applyLightTheme() {
             this.basicOptions = {

src/views/chart/PieChartDemo.vue

@@ -55,7 +55,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         getLightTheme() {
             return {

src/views/chart/PolarAreaChartDemo.vue

@@ -63,7 +63,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         getLightTheme() {
             return {

src/views/chart/RadarChartDemo.vue

@@ -62,7 +62,7 @@ export default {
     },
     methods: {
         isDarkTheme() {
-            return document.body.getAttribute('data-darktheme') !== null;
+            return this.$appState.darkTheme === true;
         },
         getLightTheme() {
             return {

src/views/checkbox/CheckboxDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Checkbox</h1>
                 <p>Checkbox is an extension to standard checkbox element with theming.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/chips/ChipsDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Chips</h1>
                 <p>Chips is used to enter multiple values on an input field.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation p-fluid">

src/views/dropdown/DropdownDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Dropdown</h1>
                 <p>Dropdown is used to select an item from a list of options.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/formlayout/FormLayoutDemo.vue

@@ -123,11 +123,11 @@
 
                 <h5>Horizontal RadioButton</h5>
                 <div class="p-formgroup-inline">
-                    <div class="p-field-checkbox">
+                    <div class="p-field-radiobutton">
                         <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
                         <label for="city7">Chicago</label>
                     </div>
-                    <div class="p-field-checkbox">
+                    <div class="p-field-radiobutton">
                         <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
                         <label for="city8">Los Angeles</label>
                     </div>

src/views/formlayout/FormLayoutDoc.vue

@@ -333,11 +333,11 @@ import 'primeflex/primeflex.css';
 
 <h3>Horizontal RadioButton</h3>
 <div class="p-formgroup-inline">
-    <div class="p-field-checkbox">
+    <div class="p-field-radiobutton">
         <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
         <label for="city7">Chicago</label>
     </div>
-    <div class="p-field-checkbox">
+    <div class="p-field-radiobutton">
         <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
         <label for="city8">Los Angeles</label>
     </div>

src/views/inputgroup/InputGroupDemo.vue

@@ -5,6 +5,7 @@
                 <h1>InputGroup</h1>
                 <p>Text, icon, buttons and other content can be grouped next to an input.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/inputmask/InputMaskDemo.vue

@@ -5,6 +5,7 @@
                 <h1>InputMask</h1>
                 <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/inputnumber/InputNumberDemo.vue

@@ -5,6 +5,7 @@
                 <h1>InputNumber</h1>
                 <p>InputNumber is an input component to provide numerical input.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/inputtext/InputTextDemo.vue

@@ -3,8 +3,9 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>InputText</h1>
-                <p>InputText renders and input field where the user can enter data.</p>
+                <p>InputText renders a text field to enter data.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/listbox/ListboxDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Listbox</h1>
                 <p>Listbox is used to select one or more values from a list of items.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/multiselect/MultiSelectDemo.vue

@@ -5,6 +5,7 @@
                 <h1>MultiSelect</h1>
                 <p>MultiSelect is used to multiple values from a list of options.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/password/PasswordDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Password</h1>
                 <p>Password displays strength indicator for password fields.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/radiobutton/RadioButtonDemo.vue

@@ -5,6 +5,7 @@
                 <h1>RadioButton</h1>
                 <p>RadioButton is an extension to standard radio button element with theming.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/slider/SliderDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Slider</h1>
                 <p>Slider is an input component to provide a numerical input.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/textarea/TextareaDemo.vue

@@ -5,6 +5,7 @@
                 <h1>Textarea</h1>
                 <p>Textarea is a multi-line text input element.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">

src/views/tristatecheckbox/TriStateCheckboxDemo.vue

@@ -5,6 +5,7 @@
                 <h1>TriStateCheckbox</h1>
                 <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
             </div>
+            <AppInputStyleSwitch />
         </div>
 
         <div class="content-section implementation">