diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index 376709671..1a36decb2 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -47,7 +47,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 8b240dad3..8fe581c0d 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -111,7 +111,6 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
             'p-focus': instance.focused,
             'p-autocomplete-dd': props.dropdown,
             'p-autocomplete-multiple': props.multiple,
@@ -120,8 +119,19 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
-    container: 'p-autocomplete-multiple-container p-component p-inputtext',
+    input: ({ props, instance }) => [
+        'p-autocomplete-input p-inputtext p-component',
+        {
+            'p-autocomplete-dd-input': props.dropdown,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
+    container: ({ props, instance }) => [
+        'p-autocomplete-multiple-container p-component p-inputtext',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
     token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
     tokenLabel: 'p-autocomplete-token-label',
     removeTokenIcon: 'p-autocomplete-token-icon',
@@ -131,7 +141,6 @@ const classes = {
     panel: ({ props, instance }) => [
         'p-autocomplete-panel p-component',
         {
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index b6554035c..ae5d2de38 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -172,7 +172,12 @@ const classes = {
             'p-focus': state.focused || state.overlayVisible
         }
     ],
-    input: ({ props, instance }) => ['p-inputtext p-component', { 'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' }],
+    input: ({ props, instance }) => [
+        'p-inputtext p-component',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
     dropdownButton: 'p-datepicker-trigger',
     inputIcon: 'p-datepicker-trigger-icon',
     panel: ({ instance, props, state }) => [
diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
index 7bb86bf30..a83301ee3 100644
--- a/components/lib/cascadeselect/BaseCascadeSelect.vue
+++ b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -16,7 +16,7 @@ export default {
         placeholder: String,
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index d0eb38711..22e997d59 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -104,7 +104,7 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
@@ -124,7 +124,6 @@ const classes = {
     panel: ({ props, instance }) => [
         'p-cascadeselect-panel p-component',
         {
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
diff --git a/components/lib/checkbox/BaseCheckbox.vue b/components/lib/checkbox/BaseCheckbox.vue
index 4d9c6aba1..c113f27a6 100644
--- a/components/lib/checkbox/BaseCheckbox.vue
+++ b/components/lib/checkbox/BaseCheckbox.vue
@@ -23,7 +23,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/checkbox/style/CheckboxStyle.js b/components/lib/checkbox/style/CheckboxStyle.js
index a7fdf1b78..bad7a0019 100644
--- a/components/lib/checkbox/style/CheckboxStyle.js
+++ b/components/lib/checkbox/style/CheckboxStyle.js
@@ -28,7 +28,7 @@ const classes = {
             'p-highlight': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
     box: 'p-checkbox-box',
diff --git a/components/lib/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue
index 362adc41b..ca92eb652 100644
--- a/components/lib/chips/BaseChips.vue
+++ b/components/lib/chips/BaseChips.vue
@@ -32,7 +32,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js
index 5e2c5a4d4..19c5ec7d9 100644
--- a/components/lib/chips/style/ChipsStyle.js
+++ b/components/lib/chips/style/ChipsStyle.js
@@ -56,13 +56,17 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
             'p-inputwrapper-focus': instance.focused
         }
     ],
-    container: 'p-inputtext p-chips-multiple-container',
+    container: ({ props, instance }) => [
+        'p-inputtext p-chips-multiple-container',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
     token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
     label: 'p-chips-token-label',
     removeTokenIcon: 'p-chips-token-icon',
diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue
index 978b4f881..09028be25 100644
--- a/components/lib/dropdown/BaseDropdown.vue
+++ b/components/lib/dropdown/BaseDropdown.vue
@@ -35,7 +35,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/dropdown/style/DropdownStyle.js b/components/lib/dropdown/style/DropdownStyle.js
index c1a7b471a..7abdd35cb 100644
--- a/components/lib/dropdown/style/DropdownStyle.js
+++ b/components/lib/dropdown/style/DropdownStyle.js
@@ -105,7 +105,7 @@ const classes = {
         {
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
             'p-dropdown-clearable': props.showClear,
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
@@ -127,13 +127,17 @@ const classes = {
     panel: ({ props, instance }) => [
         'p-dropdown-panel p-component',
         {
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     header: 'p-dropdown-header',
     filterContainer: 'p-dropdown-filter-container',
-    filterInput: 'p-dropdown-filter p-inputtext p-component',
+    filterInput: ({ props, instance }) => [
+        'p-dropdown-filter p-inputtext p-component',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
     filterIcon: 'p-dropdown-filter-icon',
     wrapper: 'p-dropdown-items-wrapper',
     list: 'p-dropdown-items',
diff --git a/components/lib/floatlabel/style/FloatLabelStyle.js b/components/lib/floatlabel/style/FloatLabelStyle.js
index 407063c1a..6bf713878 100644
--- a/components/lib/floatlabel/style/FloatLabelStyle.js
+++ b/components/lib/floatlabel/style/FloatLabelStyle.js
@@ -1,50 +1,52 @@
 import BaseStyle from 'primevue/base/style';
 
 const css = `
-.p-float-label {
-    display: block;
-    position: relative;
-}
+@layer primevue {
+    .p-float-label {
+        display: block;
+        position: relative;
+    }
 
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
+    .p-float-label label {
+        position: absolute;
+        pointer-events: none;
+        top: 50%;
+        margin-top: -.5rem;
+        transition-property: all;
+        transition-timing-function: ease;
+        line-height: 1;
+    }
 
-.p-float-label:has(textarea) label {
-    top: 1rem;
-}
+    .p-float-label:has(textarea) label {
+        top: 1rem;
+    }
 
-.p-float-label:has(input:focus) label,
-.p-float-label:has(input.p-filled) label,
-.p-float-label:has(input:-webkit-autofill) label,
-.p-float-label:has(textarea:focus) label,
-.p-float-label:has(textarea.p-filled) label,
-.p-float-label:has(.p-inputwrapper-focus) label,
-.p-float-label:has(.p-inputwrapper-filled) label {
-    top: -.75rem;
-    font-size: 12px;
-}
+    .p-float-label:has(input:focus) label,
+    .p-float-label:has(input.p-filled) label,
+    .p-float-label:has(input:-webkit-autofill) label,
+    .p-float-label:has(textarea:focus) label,
+    .p-float-label:has(textarea.p-filled) label,
+    .p-float-label:has(.p-inputwrapper-focus) label,
+    .p-float-label:has(.p-inputwrapper-filled) label {
+        top: -.75rem;
+        font-size: 12px;
+    }
 
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
+    .p-float-label .p-placeholder,
+    .p-float-label input::placeholder,
+    .p-float-label .p-inputtext::placeholder {
+        opacity: 0;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
 
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
+    .p-float-label .p-focus .p-placeholder,
+    .p-float-label input:focus::placeholder,
+    .p-float-label .p-inputtext:focus::placeholder {
+        opacity: 1;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
 }
 `;
 
diff --git a/components/lib/inputmask/BaseInputMask.vue b/components/lib/inputmask/BaseInputMask.vue
index 4a3349d5b..5484a129e 100644
--- a/components/lib/inputmask/BaseInputMask.vue
+++ b/components/lib/inputmask/BaseInputMask.vue
@@ -33,7 +33,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         }
     },
     style: InputMaskStyle
diff --git a/components/lib/inputmask/style/InputMaskStyle.js b/components/lib/inputmask/style/InputMaskStyle.js
index b29b9c334..30b329187 100644
--- a/components/lib/inputmask/style/InputMaskStyle.js
+++ b/components/lib/inputmask/style/InputMaskStyle.js
@@ -6,7 +6,7 @@ const classes = {
         {
             'p-filled': instance.filled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ]
 };
diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue
index 0ed253d7b..9a5d4bb06 100644
--- a/components/lib/inputnumber/BaseInputNumber.vue
+++ b/components/lib/inputnumber/BaseInputNumber.vue
@@ -111,7 +111,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js
index f5ecd8111..85f616289 100644
--- a/components/lib/inputnumber/style/InputNumberStyle.js
+++ b/components/lib/inputnumber/style/InputNumberStyle.js
@@ -114,11 +114,15 @@ const classes = {
             'p-inputnumber-buttons-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-buttons-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
             'p-inputnumber-buttons-vertical': props.showButtons && props.buttonLayout === 'vertical',
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-invalid': props.invalid
+        }
+    ],
+    input: ({ props, instance }) => [
+        'p-inputnumber-input',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
-    input: 'p-inputnumber-input',
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ instance, props }) => [
         'p-inputnumber-button p-inputnumber-button-up',
diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue
index 1cb810646..2dc453477 100644
--- a/components/lib/multiselect/BaseMultiSelect.vue
+++ b/components/lib/multiselect/BaseMultiSelect.vue
@@ -20,7 +20,7 @@ export default {
         placeholder: String,
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index fd4cb6107..7cde82e21 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -73,6 +73,7 @@
                             :modelValue="allSelected"
                             :binary="true"
                             :disabled="disabled"
+                            :variant="variant"
                             :aria-label="toggleAllAriaLabel"
                             @change="onToggleAll"
                             :unstyled="unstyled"
@@ -140,7 +141,7 @@
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                         >
-                                            <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
+                                            <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'itemCheckbox')">
                                                 <template #icon="slotProps">
                                                     <component v-if="$slots.itemcheckboxicon" :is="$slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
                                                     <component
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 38aa5709f..891cf4f2c 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -121,7 +121,7 @@ const classes = {
             'p-multiselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
@@ -145,13 +145,17 @@ const classes = {
     panel: ({ props, instance }) => [
         'p-multiselect-panel p-component',
         {
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
     header: 'p-multiselect-header',
     filterContainer: 'p-multiselect-filter-container',
-    filterInput: 'p-multiselect-filter p-inputtext p-component',
+    filterInput: ({ props, instance }) => [
+        'p-multiselect-filter p-inputtext p-component',
+        {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }
+    ],
     filterIcon: 'p-multiselect-filter-icon',
     closeButton: 'p-multiselect-close p-link',
     closeIcon: 'p-multiselect-close-icon',
diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue
index 1fd6532eb..a8a34d561 100644
--- a/components/lib/password/BasePassword.vue
+++ b/components/lib/password/BasePassword.vue
@@ -53,7 +53,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 4cdbfe4bc..c236f94f1 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -15,6 +15,8 @@
             :placeholder="placeholder"
             :required="required"
             :disabled="disabled"
+            :variant="variant"
+            :invalid="invalid"
             @input="onInput"
             @focus="onFocus"
             @blur="onBlur"
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
index 5fb2ea87e..2e31d6748 100644
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@@ -41,9 +41,7 @@ const classes = {
         {
             'p-inputwrapper-filled': instance.filled,
             'p-inputwrapper-focus': instance.focused,
-            'p-input-icon-right': props.toggleMask,
-            'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-input-icon-right': props.toggleMask
         }
     ],
     input: ({ props }) => [
@@ -55,7 +53,6 @@ const classes = {
     panel: ({ props, instance }) => [
         'p-password-panel p-component',
         {
-            'p-input-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled',
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
diff --git a/components/lib/radiobutton/BaseRadioButton.vue b/components/lib/radiobutton/BaseRadioButton.vue
index 1f7ea053b..162ad687d 100644
--- a/components/lib/radiobutton/BaseRadioButton.vue
+++ b/components/lib/radiobutton/BaseRadioButton.vue
@@ -15,7 +15,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/radiobutton/style/RadioButtonStyle.js b/components/lib/radiobutton/style/RadioButtonStyle.js
index 7828ddf90..4ca7ad922 100644
--- a/components/lib/radiobutton/style/RadioButtonStyle.js
+++ b/components/lib/radiobutton/style/RadioButtonStyle.js
@@ -41,7 +41,7 @@ const classes = {
             'p-highlight': instance.checked,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
     box: 'p-radiobutton-box',
diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue
index 9feba9f55..8f1c27e69 100644
--- a/components/lib/textarea/BaseTextarea.vue
+++ b/components/lib/textarea/BaseTextarea.vue
@@ -14,7 +14,7 @@ export default {
         },
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         }
     },
     style: TextareaStyle,
diff --git a/components/lib/textarea/style/TextareaStyle.js b/components/lib/textarea/style/TextareaStyle.js
index 62e890609..cfda5fd9e 100644
--- a/components/lib/textarea/style/TextareaStyle.js
+++ b/components/lib/textarea/style/TextareaStyle.js
@@ -20,7 +20,7 @@ const classes = {
             'p-filled': instance.filled,
             'p-inputtextarea-resizable ': props.autoResize,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ]
 };
diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue
index 7b0ec2397..a9b125eb6 100644
--- a/components/lib/treeselect/BaseTreeSelect.vue
+++ b/components/lib/treeselect/BaseTreeSelect.vue
@@ -16,10 +16,6 @@ export default {
             type: String,
             default: null
         },
-        variant: {
-            type: String,
-            default: 'outlined'
-        },
         invalid: {
             type: Boolean,
             default: false
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index ae9605184..0a2286039 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -66,7 +66,6 @@ const classes = {
             'p-treeselect-chip': props.display === 'chip',
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled',
             'p-focus': instance.focused,
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible
diff --git a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
index 040426d3a..183901480 100644
--- a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
@@ -9,7 +9,7 @@ export default {
         modelValue: null,
         variant: {
             type: String,
-            default: 'outlined'
+            default: null
         },
         invalid: {
             type: Boolean,
diff --git a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
index 795ed659f..ce7d3a68e 100644
--- a/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
+++ b/components/lib/tristatecheckbox/style/TriStateCheckboxStyle.js
@@ -28,7 +28,7 @@ const classes = {
             'p-highlight': instance.active,
             'p-disabled': props.disabled,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant === 'filled'
+            'p-variant-filled': props.variant === 'filled' || instance.$primevue.config.inputStyle === 'filled'
         }
     ],
     box: 'p-checkbox-box',