diff --git a/packages/primevue/src/autocomplete/AutoComplete.d.ts b/packages/primevue/src/autocomplete/AutoComplete.d.ts
index 56e7c152c..1d99208e4 100755
--- a/packages/primevue/src/autocomplete/AutoComplete.d.ts
+++ b/packages/primevue/src/autocomplete/AutoComplete.d.ts
@@ -501,6 +501,11 @@ export interface AutoCompleteProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Defines a string value that labels an interactive element.
      */
@@ -528,11 +533,6 @@ export interface AutoCompleteProps {
      * @defaultValue false
      */
     unstyled?: boolean;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @defaultValue false
-     */
-    fluid?: boolean;
 }
 
 /**
diff --git a/packages/primevue/src/button/BaseButton.vue b/packages/primevue/src/button/BaseButton.vue
index 41e168608..a15be6bb2 100644
--- a/packages/primevue/src/button/BaseButton.vue
+++ b/packages/primevue/src/button/BaseButton.vue
@@ -81,6 +81,10 @@ export default {
         plain: {
             type: Boolean,
             default: false
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: ButtonStyle,
diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts
index a9c41b30a..e4a9e5ea3 100755
--- a/packages/primevue/src/button/Button.d.ts
+++ b/packages/primevue/src/button/Button.d.ts
@@ -177,6 +177,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index e5fe97698..9ab25c5eb 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -78,6 +78,14 @@ const theme = ({ dt }) => `
     font-weight: ${dt('button.label.font.weight')};
 }
 
+.p-button-fluid {
+    width: 100%;
+}
+
+.p-button-fluid.p-button-icon-only {
+    width: ${dt('button.icon.only.width')};
+}
+
 .p-button:not(:disabled):hover {
     background: ${dt('button.primary.hover.background')};
     border: 1px solid ${dt('button.primary.hover.border.color')};
@@ -607,7 +615,8 @@ const classes = {
             'p-button-outlined': props.outlined,
             'p-button-sm': props.size === 'small',
             'p-button-lg': props.size === 'large',
-            'p-button-plain': props.plain
+            'p-button-plain': props.plain,
+            'p-button-fluid': props.fluid
         }
     ],
     loadingIcon: 'p-button-loading-icon',
diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
index 6aa2be654..89d530782 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.d.ts
@@ -415,6 +415,11 @@ export interface CascadeSelectProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
@@ -442,11 +447,6 @@ export interface CascadeSelectProps {
      * @defaultValue false
      */
     unstyled?: boolean;
-    /**
-     * Spans 100% width of the container when enabled.
-     * @defaultValue false
-     */
-    fluid?: boolean;
 }
 
 /**
diff --git a/packages/primevue/src/datepicker/BaseDatePicker.vue b/packages/primevue/src/datepicker/BaseDatePicker.vue
index 1a1939e99..75607bff5 100644
--- a/packages/primevue/src/datepicker/BaseDatePicker.vue
+++ b/packages/primevue/src/datepicker/BaseDatePicker.vue
@@ -232,6 +232,10 @@ export default {
                 return { severity: 'secondary', text: true, rounded: true };
             }
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         ariaLabelledby: {
             type: String,
             default: null
diff --git a/packages/primevue/src/datepicker/DatePicker.d.ts b/packages/primevue/src/datepicker/DatePicker.d.ts
index d1fdc28db..49f5d110c 100755
--- a/packages/primevue/src/datepicker/DatePicker.d.ts
+++ b/packages/primevue/src/datepicker/DatePicker.d.ts
@@ -784,6 +784,11 @@ export interface DatePickerProps {
      * @defaultValue { severity: 'secondary', text: true }
      */
     timepickerButtonProps?: object | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index 130f5f6ac..a4a167dea 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -71,11 +71,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.input.icon.color')};
 }
 
-.p-fluid .p-datepicker {
+.p-datepicker-fluid {
     display: flex;
 }
 
-.p-fluid .p-datepicker-input {
+.p-datepicker-fluid .p-datepicker-input {
     width: 1%;
 }
 
@@ -374,6 +374,7 @@ const classes = {
         'p-datepicker p-component p-inputwrapper',
         {
             'p-invalid': props.invalid,
+            'p-datepicker-fluid': props.fluid,
             'p-inputwrapper-filled': props.modelValue,
             'p-inputwrapper-focus': state.focused,
             'p-focus': state.focused || state.overlayVisible
diff --git a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js
index 4d1c7d3dd..dc6e3b6e6 100644
--- a/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js
+++ b/packages/primevue/src/inlinemessage/style/InlineMessageStyle.js
@@ -26,10 +26,6 @@ const theme = ({ dt }) => `
     width: 0;
 }
 
-.p-fluid .p-inlinemessage {
-    display: flex;
-}
-
 .p-inlinemessage-info {
     background: ${dt('inlinemessage.info.background')};
     border: 1px solid ${dt('inlinemessage.info.border.color')};
diff --git a/packages/primevue/src/inputchips/style/InputChipsStyle.js b/packages/primevue/src/inputchips/style/InputChipsStyle.js
index a87edb5cc..fe393ad45 100644
--- a/packages/primevue/src/inputchips/style/InputChipsStyle.js
+++ b/packages/primevue/src/inputchips/style/InputChipsStyle.js
@@ -98,10 +98,6 @@ const theme = ({ dt }) => `
 .p-inputchips-input-item input::placeholder {
     color: ${dt('inputchips.placeholder.color')};
 }
-
-.p-fluid .p-inputchips {
-    display: flex;
-}
 `;
 
 const classes = {
diff --git a/packages/primevue/src/inputgroup/BaseInputGroup.vue b/packages/primevue/src/inputgroup/BaseInputGroup.vue
index a6d45bf96..05fc62e9b 100644
--- a/packages/primevue/src/inputgroup/BaseInputGroup.vue
+++ b/packages/primevue/src/inputgroup/BaseInputGroup.vue
@@ -5,6 +5,12 @@ import InputGroupStyle from 'primevue/inputgroup/style';
 export default {
     name: 'BaseInputGroup',
     extends: BaseComponent,
+    props: {
+        fluid: {
+            type: Boolean,
+            default: false
+        }
+    },
     style: InputGroupStyle,
     provide() {
         return {
diff --git a/packages/primevue/src/inputgroup/InputGroup.d.ts b/packages/primevue/src/inputgroup/InputGroup.d.ts
index 45ac2b771..6080ac0f9 100644
--- a/packages/primevue/src/inputgroup/InputGroup.d.ts
+++ b/packages/primevue/src/inputgroup/InputGroup.d.ts
@@ -22,6 +22,10 @@ export interface InputGroupPassThroughMethodOptions {
      * Defines instance.
      */
     instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: InputGroupProps;
     /**
      * Defines valid attributes.
      */
@@ -63,6 +67,11 @@ export interface InputGroupPassThroughAttributes {
  * Defines valid properties in InputGroup component.
  */
 export interface InputGroupProps {
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
index 3494628ec..d5d836be8 100644
--- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js
+++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
@@ -28,9 +28,9 @@ const theme = ({ dt }) => `
 }
 
 .p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup-fluid .p-inputtext,
 .p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
+.p-inputgroup-fluid .p-input {
     flex: 1 1 auto;
     width: 1%;
 }
@@ -92,17 +92,22 @@ const theme = ({ dt }) => `
     border-bottom-right-radius: ${dt('inputgroup.addon.border.radius')};
 }
 
-.p-fluid .p-inputgroup .p-button {
+.p-inputgroup-fluid .p-button {
     width: auto;
 }
 
-.p-fluid .p-inputgroup .p-button.p-button-icon-only {
+.p-inputgroup-fluid .p-button.p-button-icon-only {
     width: 2.5rem;
 }
 `;
 
 const classes = {
-    root: 'p-inputgroup'
+    root: ({ props }) => [
+        'p-inputgroup',
+        {
+            'p-inputgroup-fluid': props.fluid
+        }
+    ]
 };
 
 export default BaseStyle.extend({
diff --git a/packages/primevue/src/inputmask/BaseInputMask.vue b/packages/primevue/src/inputmask/BaseInputMask.vue
index 5786066d0..15e9a177e 100644
--- a/packages/primevue/src/inputmask/BaseInputMask.vue
+++ b/packages/primevue/src/inputmask/BaseInputMask.vue
@@ -46,6 +46,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputMaskStyle,
diff --git a/packages/primevue/src/inputmask/InputMask.d.ts b/packages/primevue/src/inputmask/InputMask.d.ts
index 64872ac6d..9bd4a0f76 100755
--- a/packages/primevue/src/inputmask/InputMask.d.ts
+++ b/packages/primevue/src/inputmask/InputMask.d.ts
@@ -144,6 +144,11 @@ export interface InputMaskProps {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
diff --git a/packages/primevue/src/inputmask/InputMask.vue b/packages/primevue/src/inputmask/InputMask.vue
index 3c19ddb84..de6f1fd8f 100755
--- a/packages/primevue/src/inputmask/InputMask.vue
+++ b/packages/primevue/src/inputmask/InputMask.vue
@@ -7,6 +7,7 @@
         :invalid="invalid"
         :variant="variant"
         :placeholder="placeholder"
+        :fluid="fluid"
         :unstyled="unstyled"
         @input="onInput"
         @focus="onFocus"
diff --git a/packages/primevue/src/inputnumber/BaseInputNumber.vue b/packages/primevue/src/inputnumber/BaseInputNumber.vue
index 21a5cb507..9448dfeeb 100644
--- a/packages/primevue/src/inputnumber/BaseInputNumber.vue
+++ b/packages/primevue/src/inputnumber/BaseInputNumber.vue
@@ -133,6 +133,10 @@ export default {
             type: String,
             default: null
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/inputnumber/InputNumber.d.ts b/packages/primevue/src/inputnumber/InputNumber.d.ts
index b8066387b..558904fe1 100755
--- a/packages/primevue/src/inputnumber/InputNumber.d.ts
+++ b/packages/primevue/src/inputnumber/InputNumber.d.ts
@@ -334,6 +334,11 @@ export interface InputNumberProps {
      * Placeholder text for the input.
      */
     placeholder?: string | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * 	Identifier of the focus input to match a label defined for the chips.
      */
diff --git a/packages/primevue/src/inputnumber/style/InputNumberStyle.js b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
index 77bad1532..c08f06932 100644
--- a/packages/primevue/src/inputnumber/style/InputNumberStyle.js
+++ b/packages/primevue/src/inputnumber/style/InputNumberStyle.js
@@ -131,15 +131,15 @@ const theme = ({ dt }) => `
     flex: 1 1 auto;
 }
 
-.p-fluid .p-inputnumber {
+.p-inputnumber-fluid {
     width: 100%;
 }
 
-.p-fluid .p-inputnumber .p-inputnumber-input {
+.p-inputnumber-fluid .p-inputnumber-input {
     width: 1%;
 }
 
-.p-fluid .p-inputnumber-vertical .p-inputnumber-input {
+.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
     width: 100%;
 }
 `;
@@ -152,7 +152,8 @@ const classes = {
             'p-inputwrapper-focus': instance.focused,
             'p-inputnumber-stacked': props.showButtons && props.buttonLayout === 'stacked',
             'p-inputnumber-horizontal': props.showButtons && props.buttonLayout === 'horizontal',
-            'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical'
+            'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical',
+            'p-inputnumber-fluid': instance.fluid
         }
     ],
     pcInput: 'p-inputnumber-input',
diff --git a/packages/primevue/src/inputtext/BaseInputText.vue b/packages/primevue/src/inputtext/BaseInputText.vue
index 8a9123b09..05da21cc0 100644
--- a/packages/primevue/src/inputtext/BaseInputText.vue
+++ b/packages/primevue/src/inputtext/BaseInputText.vue
@@ -18,6 +18,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: InputTextStyle,
diff --git a/packages/primevue/src/inputtext/InputText.d.ts b/packages/primevue/src/inputtext/InputText.d.ts
index 2d94077fb..b6784dcff 100755
--- a/packages/primevue/src/inputtext/InputText.d.ts
+++ b/packages/primevue/src/inputtext/InputText.d.ts
@@ -101,6 +101,11 @@ export interface InputTextProps extends InputHTMLAttributes {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index c7aae48f2..a62b77730 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -61,7 +61,7 @@ const theme = ({ dt }) => `
     padding: ${dt('inputtext.lg.padding.y')} ${dt('inputtext.lg.padding.x')};
 }
 
-.p-fluid .p-inputtext {
+.p-inputtext-fluid {
     width: 100%;
 }
 `;
@@ -74,7 +74,8 @@ const classes = {
             'p-inputtext-sm': props.size === 'small',
             'p-inputtext-lg': props.size === 'large',
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-inputtext-fluid': props.fluid
         }
     ]
 };
diff --git a/packages/primevue/src/multiselect/BaseMultiSelect.vue b/packages/primevue/src/multiselect/BaseMultiSelect.vue
index 6f457c46d..bdbec7cee 100644
--- a/packages/primevue/src/multiselect/BaseMultiSelect.vue
+++ b/packages/primevue/src/multiselect/BaseMultiSelect.vue
@@ -26,7 +26,14 @@ export default {
             type: Boolean,
             default: false
         },
-        disabled: Boolean,
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts
index 2d0bc843b..8526ec949 100755
--- a/packages/primevue/src/multiselect/MultiSelect.d.ts
+++ b/packages/primevue/src/multiselect/MultiSelect.d.ts
@@ -364,6 +364,11 @@ export interface MultiSelectProps {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Identifier of the underlying input element.
      */
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index e9136142e..ef9ef3f9b 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -191,7 +191,7 @@ const theme = ({ dt }) => `
     padding: calc(${dt('multiselect.padding.y')} / 2) calc(${dt('multiselect.padding.x')} / 2);
 }
 
-.p-fluid .p-multiselect {
+.p-multiselect-fluid {
     display: flex;
 }
 `;
@@ -211,7 +211,8 @@ const classes = {
             'p-focus': instance.focused,
             'p-inputwrapper-filled': props.modelValue && props.modelValue.length,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-multiselect-open': instance.overlayVisible
+            'p-multiselect-open': instance.overlayVisible,
+            'p-multiselect-fluid': props.fluid
         }
     ],
     labelContainer: 'p-multiselect-label-container',
diff --git a/packages/primevue/src/password/BasePassword.vue b/packages/primevue/src/password/BasePassword.vue
index 0f2d2d67d..ec24b08bb 100644
--- a/packages/primevue/src/password/BasePassword.vue
+++ b/packages/primevue/src/password/BasePassword.vue
@@ -79,6 +79,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/password/Password.d.ts b/packages/primevue/src/password/Password.d.ts
index d0290ff3e..de2c4947c 100755
--- a/packages/primevue/src/password/Password.d.ts
+++ b/packages/primevue/src/password/Password.d.ts
@@ -247,6 +247,11 @@ export interface PasswordProps extends InputHTMLAttributes {
      * @defaultValue false
      */
     required?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Identifier of the underlying input element.
      */
diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js
index 8f35a5acd..a4f0fc8f0 100644
--- a/packages/primevue/src/password/style/PasswordStyle.js
+++ b/packages/primevue/src/password/style/PasswordStyle.js
@@ -35,10 +35,14 @@ const theme = ({ dt }) => `
     background: ${dt('password.strength.strong.background')};
 }
 
-.p-fluid .p-password {
+.p-password-fluid {
     display: flex;
 }
 
+.p-password-fluid .p-password-input {
+    width: 100%;
+}
+
 .p-password-input::-ms-reveal,
 .p-password-input::-ms-clear {
     display: none;
@@ -83,7 +87,8 @@ const classes = {
         'p-password p-component p-inputwrapper',
         {
             'p-inputwrapper-filled': instance.filled,
-            'p-inputwrapper-focus': instance.focused
+            'p-inputwrapper-focus': instance.focused,
+            'p-password-fluid': props.fluid
         }
     ],
     pcInput: 'p-password-input',
diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue
index 9c44d6413..41d58fa9c 100644
--- a/packages/primevue/src/select/BaseSelect.vue
+++ b/packages/primevue/src/select/BaseSelect.vue
@@ -50,6 +50,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/select/Select.d.ts b/packages/primevue/src/select/Select.d.ts
index ba505aa18..3bcd3485b 100755
--- a/packages/primevue/src/select/Select.d.ts
+++ b/packages/primevue/src/select/Select.d.ts
@@ -375,6 +375,11 @@ export interface SelectProps {
      * @defaultValue false
      */
     showClear?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * @deprecated since v4.0. Use 'labelId' instead.
      * Identifier of the underlying input element.
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index 6874a5aff..31e3ab8b6 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -188,13 +188,9 @@ input.p-select-label {
     padding: ${dt('select.empty.message.padding')};
 }
 
-.p-fluid .p-select {
+.p-select-fluid {
     display: flex;
 }
-
-.p-fluid .p-select-label {
-    width: 1%;
-}
 `;
 
 const classes = {
@@ -207,7 +203,8 @@ const classes = {
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,
-            'p-select-open': state.overlayVisible
+            'p-select-open': state.overlayVisible,
+            'p-select-fluid': props.fluid
         }
     ],
     label: ({ instance, props }) => [
diff --git a/packages/primevue/src/splitbutton/BaseSplitButton.vue b/packages/primevue/src/splitbutton/BaseSplitButton.vue
index 15cce4e16..b764097b7 100644
--- a/packages/primevue/src/splitbutton/BaseSplitButton.vue
+++ b/packages/primevue/src/splitbutton/BaseSplitButton.vue
@@ -34,6 +34,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         class: {
             type: null,
             default: null
diff --git a/packages/primevue/src/splitbutton/SplitButton.d.ts b/packages/primevue/src/splitbutton/SplitButton.d.ts
index ba7fa7b0c..5d13d0963 100755
--- a/packages/primevue/src/splitbutton/SplitButton.d.ts
+++ b/packages/primevue/src/splitbutton/SplitButton.d.ts
@@ -147,6 +147,11 @@ export interface SplitButtonProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Style class of the component.
      */
diff --git a/packages/primevue/src/splitbutton/SplitButton.vue b/packages/primevue/src/splitbutton/SplitButton.vue
index 57ffc62ff..6d1ceec29 100755
--- a/packages/primevue/src/splitbutton/SplitButton.vue
+++ b/packages/primevue/src/splitbutton/SplitButton.vue
@@ -10,6 +10,7 @@
             :icon="icon"
             :outlined="outlined"
             :size="size"
+            :fluid="fluid"
             :aria-label="label"
             @click="onDefaultButtonClick"
             v-bind="buttonProps"
diff --git a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
index ca3809bdb..f4e2dd029 100644
--- a/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
+++ b/packages/primevue/src/splitbutton/style/SplitButtonStyle.js
@@ -32,7 +32,7 @@ const theme = ({ dt }) => `
     min-width: 100%;
 }
 
-.p-fluid .p-splitbutton {
+.p-splitbutton-fluid {
     display: flex;
 }
 
@@ -56,7 +56,8 @@ const classes = {
         'p-splitbutton p-component',
         {
             'p-splitbutton-raised': props.raised,
-            'p-splitbutton-rounded': props.rounded
+            'p-splitbutton-rounded': props.rounded,
+            'p-splitbutton-fluid': props.fluid
         }
     ],
     pcButton: 'p-splitbutton-button',
diff --git a/packages/primevue/src/textarea/BaseTextarea.vue b/packages/primevue/src/textarea/BaseTextarea.vue
index 2e82e3941..b068bfd49 100644
--- a/packages/primevue/src/textarea/BaseTextarea.vue
+++ b/packages/primevue/src/textarea/BaseTextarea.vue
@@ -15,6 +15,10 @@ export default {
         variant: {
             type: String,
             default: null
+        },
+        fluid: {
+            type: Boolean,
+            default: false
         }
     },
     style: TextareaStyle,
diff --git a/packages/primevue/src/textarea/Textarea.d.ts b/packages/primevue/src/textarea/Textarea.d.ts
index 611388cf3..9625a6562 100755
--- a/packages/primevue/src/textarea/Textarea.d.ts
+++ b/packages/primevue/src/textarea/Textarea.d.ts
@@ -107,6 +107,11 @@ export interface TextareaProps extends TextareaHTMLAttributes {
      * @defaultValue outlined
      */
     variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js
index f44692f90..39ab06915 100644
--- a/packages/primevue/src/textarea/style/TextareaStyle.js
+++ b/packages/primevue/src/textarea/style/TextareaStyle.js
@@ -51,7 +51,7 @@ const theme = ({ dt }) => `
     color: ${dt('textarea.placeholder.color')};
 }
 
-.p-fluid .p-textarea {
+.p-textarea-fluid {
     width: 100%;
 }
 
@@ -68,7 +68,8 @@ const classes = {
             'p-filled': instance.filled,
             'p-textarea-resizable ': props.autoResize,
             'p-invalid': props.invalid,
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled'
+            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
+            'p-textarea-fluid': props.fluid
         }
     ]
 };
diff --git a/packages/primevue/src/treeselect/BaseTreeSelect.vue b/packages/primevue/src/treeselect/BaseTreeSelect.vue
index 5cceb451b..af9304b49 100644
--- a/packages/primevue/src/treeselect/BaseTreeSelect.vue
+++ b/packages/primevue/src/treeselect/BaseTreeSelect.vue
@@ -52,6 +52,10 @@ export default {
             type: Boolean,
             default: false
         },
+        fluid: {
+            type: Boolean,
+            default: false
+        },
         inputId: {
             type: String,
             default: null
diff --git a/packages/primevue/src/treeselect/TreeSelect.d.ts b/packages/primevue/src/treeselect/TreeSelect.d.ts
index b5a1bb87d..f0e64c50c 100644
--- a/packages/primevue/src/treeselect/TreeSelect.d.ts
+++ b/packages/primevue/src/treeselect/TreeSelect.d.ts
@@ -204,6 +204,11 @@ export interface TreeSelectProps {
      * Defines the selection mode.
      */
     selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * Spans 100% width of the container when enabled.
+     * @defaultValue false
+     */
+    fluid?: boolean;
     /**
      * Style class of the overlay panel.
      */
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index 4b562ccb3..0f8b2612a 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -113,7 +113,7 @@ const theme = ({ dt }) => `
     background: transparent;
 }
 
-.p-fluid .p-treeselect {
+.p-treeselect-fluid {
     display: flex;
 }
 
@@ -147,7 +147,8 @@ const classes = {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled' || instance.$primevue.config.inputVariant === 'filled',
             'p-inputwrapper-filled': !instance.emptyValue,
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
-            'p-treeselect-open': instance.overlayVisible
+            'p-treeselect-open': instance.overlayVisible,
+            'p-treeselect-fluid': props.fluid
         }
     ],
     labelContainer: 'p-treeselect-label-container',