diff --git a/apps/showcase/doc/autocomplete/InvalidDoc.vue b/apps/showcase/doc/autocomplete/InvalidDoc.vue
index 99978e2e6..2ecd4aa66 100644
--- a/apps/showcase/doc/autocomplete/InvalidDoc.vue
+++ b/apps/showcase/doc/autocomplete/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,14 +18,14 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+<AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+<AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 
@@ -49,8 +49,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" />
-        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" />
+        <AutoComplete v-model="value1" :suggestions="items" @complete="search" :invalid="!value1" placeholder="Code" />
+        <AutoComplete v-model="value2" :suggestions="items" @complete="search" :invalid="!value2" variant="filled" placeholder="Code" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/datepicker/InvalidDoc.vue b/apps/showcase/doc/datepicker/InvalidDoc.vue
index 0eef44a97..cad85a50e 100644
--- a/apps/showcase/doc/datepicker/InvalidDoc.vue
+++ b/apps/showcase/doc/datepicker/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             date2: null,
             code: {
                 basic: `
-<DatePicker v-model="date1" :invalid="!date1" />
-<DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+<DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+<DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <DatePicker v-model="date1" :invalid="!date1" />
-        <DatePicker v-model="date2" :invalid="!date2" variant="filled" />
+        <DatePicker v-model="date1" :invalid="!date1" placeholder="Date" />
+        <DatePicker v-model="date2" :invalid="!date2" variant="filled" placeholder="Date" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputmask/InvalidDoc.vue b/apps/showcase/doc/inputmask/InvalidDoc.vue
index ac7b3e6e3..128d19962 100644
--- a/apps/showcase/doc/inputmask/InvalidDoc.vue
+++ b/apps/showcase/doc/inputmask/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled" />
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-<InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+<InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+<InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
@@ -43,8 +43,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputMask v-model="value1" mask="99-999999" placeholder="99-999999" :invalid="!value1" />
-        <InputMask v-model="value2" mask="99-999999" placeholder="99-999999" :invalid="!value2" variant="filled "/>
+        <InputMask v-model="value1" mask="99-999999" placeholder="Serial Key" :invalid="!value1" />
+        <InputMask v-model="value2" mask="99-999999" placeholder="Serial Key" :invalid="!value2" variant="filled" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputnumber/InvalidDoc.vue b/apps/showcase/doc/inputnumber/InvalidDoc.vue
index f71395327..5f63b1d2b 100644
--- a/apps/showcase/doc/inputnumber/InvalidDoc.vue
+++ b/apps/showcase/doc/inputnumber/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+<InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" />
-        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" />
+        <InputNumber v-model="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
+        <InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/inputtext/InvalidDoc.vue b/apps/showcase/doc/inputtext/InvalidDoc.vue
index 225353735..53351ae6b 100644
--- a/apps/showcase/doc/inputtext/InvalidDoc.vue
+++ b/apps/showcase/doc/inputtext/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: '',
             code: {
                 basic: `
-<InputText v-model="value1" :invalid="!value1" />
-<InputText v-model="value2" :invalid="!value2" variant="filled" />
+<InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+<InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <InputText v-model="value1" :invalid="!value1" />
-        <InputText v-model="value2" :invalid="!value2" variant="filled" />
+        <InputText v-model="value1" :invalid="!value1" placeholder="Name" />
+        <InputText v-model="value2" :invalid="!value2" variant="filled" placeholder="Name" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/password/InvalidDoc.vue b/apps/showcase/doc/password/InvalidDoc.vue
index 004da5bda..0ffe1e671 100644
--- a/apps/showcase/doc/password/InvalidDoc.vue
+++ b/apps/showcase/doc/password/InvalidDoc.vue
@@ -3,8 +3,8 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,14 +17,14 @@ export default {
             value2: null,
             code: {
                 basic: `
-<Password v-model="value1" :invalid="!value1" />
-<Password v-model="value2" :invalid="!value2" variant="filled" />
+<Password v-model="value1" :invalid="!value1" placeholder="Password" />
+<Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 
@@ -42,8 +42,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-4">
-        <Password v-model="value1" :invalid="!value1" />
-        <Password v-model="value2" :invalid="!value2" variant="filled" />
+        <Password v-model="value1" :invalid="!value1" placeholder="Password" />
+        <Password v-model="value2" :invalid="!value2" variant="filled" placeholder="Password" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/textarea/InvalidDoc.vue b/apps/showcase/doc/textarea/InvalidDoc.vue
index 94d815c66..29a0ae6a4 100644
--- a/apps/showcase/doc/textarea/InvalidDoc.vue
+++ b/apps/showcase/doc/textarea/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value === ''" style="resize: none" />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+<Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" :invalid="value ===''"  />
+        <Textarea v-model="value" rows="5" cols="30" :invalid="!value" style="resize: none" placeholder="Address" />
     </div>
 </template>
 
diff --git a/apps/showcase/layouts/AppConfigurator.vue b/apps/showcase/layouts/AppConfigurator.vue
index 5b15ecd84..e23d7ec31 100755
--- a/apps/showcase/layouts/AppConfigurator.vue
+++ b/apps/showcase/layouts/AppConfigurator.vue
@@ -31,7 +31,7 @@
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" />
+                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presetOptions" optionLabel="label" optionValue="value" :allowEmpty="false" size="small" />
             </div>
             <div class="flex">
                 <div class="flex-1">
diff --git a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
index 6c30973d2..b64d75eb8 100644
--- a/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
+++ b/packages/primevue/src/autocomplete/style/AutoCompleteStyle.js
@@ -230,6 +230,10 @@ const theme = ({ dt }) => `
     color: ${dt('autocomplete.placeholder.color')};
 }
 
+.p-autocomplete.p-invalid .p-autocomplete-input-chip input::placeholder {
+    color: ${dt('autocomplete.invalid.placeholder.color')};
+}
+
 .p-autocomplete-empty-message {
     padding: ${dt('autocomplete.empty.message.padding')};
 }
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index 268e59dd7..9b389af0b 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('cascadeselect.placeholder.color')};
 }
 
+.p-cascadeselect.p-invalid .p-cascadeselect-label.p-placeholder {
+    color: ${dt('cascadeselect.invalid.placeholder.color')};
+}
+
 .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: ${dt('cascadeselect.disabled.color')};
 }
diff --git a/packages/primevue/src/inputtext/style/InputTextStyle.js b/packages/primevue/src/inputtext/style/InputTextStyle.js
index 824c3028f..fb932d2c1 100644
--- a/packages/primevue/src/inputtext/style/InputTextStyle.js
+++ b/packages/primevue/src/inputtext/style/InputTextStyle.js
@@ -56,6 +56,10 @@ const theme = ({ dt }) => `
     color: ${dt('inputtext.placeholder.color')};
 }
 
+.p-inputtext.p-invalid::placeholder {
+    color: ${dt('inputtext.invalid.placeholder.color')};
+}
+
 .p-inputtext-sm {
     font-size: ${dt('inputtext.sm.font.size')};
     padding-block: ${dt('inputtext.sm.padding.y')};
diff --git a/packages/primevue/src/multiselect/style/MultiSelectStyle.js b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
index e95e3ec51..0cd50982b 100644
--- a/packages/primevue/src/multiselect/style/MultiSelectStyle.js
+++ b/packages/primevue/src/multiselect/style/MultiSelectStyle.js
@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('multiselect.placeholder.color')};
 }
 
+.p-multiselect.p-invalid .p-multiselect-label.p-placeholder {
+    color: ${dt('multiselect.invalid.placeholder.color')};
+}
+
 .p-multiselect.p-disabled .p-multiselect-label {
     color: ${dt('multiselect.disabled.color')};
 }
diff --git a/packages/primevue/src/select/style/SelectStyle.js b/packages/primevue/src/select/style/SelectStyle.js
index b7f112ddd..58ad95905 100644
--- a/packages/primevue/src/select/style/SelectStyle.js
+++ b/packages/primevue/src/select/style/SelectStyle.js
@@ -86,6 +86,10 @@ const theme = ({ dt }) => `
     color: ${dt('select.placeholder.color')};
 }
 
+.p-select.p-invalid .p-select-label.p-placeholder {
+    color: ${dt('select.invalid.placeholder.color')};
+}
+
 .p-select:has(.p-select-clear-icon) .p-select-label {
     padding-inline-end: calc(1rem + ${dt('select.padding.x')});
 }
diff --git a/packages/primevue/src/textarea/style/TextareaStyle.js b/packages/primevue/src/textarea/style/TextareaStyle.js
index acae17030..d0ad36abc 100644
--- a/packages/primevue/src/textarea/style/TextareaStyle.js
+++ b/packages/primevue/src/textarea/style/TextareaStyle.js
@@ -52,6 +52,10 @@ const theme = ({ dt }) => `
     color: ${dt('textarea.placeholder.color')};
 }
 
+.p-textarea.p-invalid::placeholder {
+    color: ${dt('textarea.invalid.placeholder.color')};
+}
+
 .p-textarea-fluid {
     width: 100%;
 }
diff --git a/packages/primevue/src/treeselect/style/TreeSelectStyle.js b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
index ffc87add3..d91d80521 100644
--- a/packages/primevue/src/treeselect/style/TreeSelectStyle.js
+++ b/packages/primevue/src/treeselect/style/TreeSelectStyle.js
@@ -90,6 +90,10 @@ const theme = ({ dt }) => `
     color: ${dt('treeselect.placeholder.color')};
 }
 
+.p-treeselect.p-invalid .p-treeselect-label.p-placeholder {
+    color: ${dt('treeselect.invalid.placeholder.color')};
+}
+
 .p-treeselect.p-disabled .p-treeselect-label {
     color: ${dt('treeselect.disabled.color')};
 }
diff --git a/packages/themes/src/presets/aura/autocomplete/index.js b/packages/themes/src/presets/aura/autocomplete/index.js
index 600338579..176de1459 100644
--- a/packages/themes/src/presets/aura/autocomplete/index.js
+++ b/packages/themes/src/presets/aura/autocomplete/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/base/index.js b/packages/themes/src/presets/aura/base/index.js
index 6879c2d31..ea7feb49a 100644
--- a/packages/themes/src/presets/aura/base/index.js
+++ b/packages/themes/src/presets/aura/base/index.js
@@ -182,10 +182,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
@@ -306,10 +307,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
                 },
diff --git a/packages/themes/src/presets/aura/cascadeselect/index.js b/packages/themes/src/presets/aura/cascadeselect/index.js
index f28d7ee0e..5b44c1786 100644
--- a/packages/themes/src/presets/aura/cascadeselect/index.js
+++ b/packages/themes/src/presets/aura/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/inputtext/index.js b/packages/themes/src/presets/aura/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/aura/inputtext/index.js
+++ b/packages/themes/src/presets/aura/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/multiselect/index.js b/packages/themes/src/presets/aura/multiselect/index.js
index 221ae61ac..63f8e8044 100644
--- a/packages/themes/src/presets/aura/multiselect/index.js
+++ b/packages/themes/src/presets/aura/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/select/index.js b/packages/themes/src/presets/aura/select/index.js
index a09752089..0684714b5 100644
--- a/packages/themes/src/presets/aura/select/index.js
+++ b/packages/themes/src/presets/aura/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/textarea/index.js b/packages/themes/src/presets/aura/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/aura/textarea/index.js
+++ b/packages/themes/src/presets/aura/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/aura/treeselect/index.js b/packages/themes/src/presets/aura/treeselect/index.js
index d74bbb56e..389b631a6 100644
--- a/packages/themes/src/presets/aura/treeselect/index.js
+++ b/packages/themes/src/presets/aura/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/base/index.js b/packages/themes/src/presets/lara/base/index.js
index 8c43861df..e884d23f2 100644
--- a/packages/themes/src/presets/lara/base/index.js
+++ b/packages/themes/src/presets/lara/base/index.js
@@ -184,10 +184,11 @@ export default {
                     color: '{surface.700}',
                     disabledColor: '{surface.500}',
                     placeholderColor: '{surface.500}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.500}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.500}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.500}',
                     shadow: 'none'
                 },
@@ -311,10 +312,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/lara/cascadeselect/index.js b/packages/themes/src/presets/lara/cascadeselect/index.js
index a00f46ef6..dd1cbfa51 100644
--- a/packages/themes/src/presets/lara/cascadeselect/index.js
+++ b/packages/themes/src/presets/lara/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/inputtext/index.js b/packages/themes/src/presets/lara/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/lara/inputtext/index.js
+++ b/packages/themes/src/presets/lara/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/multiselect/index.js b/packages/themes/src/presets/lara/multiselect/index.js
index 221ae61ac..63f8e8044 100644
--- a/packages/themes/src/presets/lara/multiselect/index.js
+++ b/packages/themes/src/presets/lara/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/select/index.js b/packages/themes/src/presets/lara/select/index.js
index 9712fd318..760eb1533 100644
--- a/packages/themes/src/presets/lara/select/index.js
+++ b/packages/themes/src/presets/lara/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/textarea/index.js b/packages/themes/src/presets/lara/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/lara/textarea/index.js
+++ b/packages/themes/src/presets/lara/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/lara/treeselect/index.js b/packages/themes/src/presets/lara/treeselect/index.js
index d74bbb56e..389b631a6 100644
--- a/packages/themes/src/presets/lara/treeselect/index.js
+++ b/packages/themes/src/presets/lara/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js
index 882042879..a38c2b6d7 100644
--- a/packages/themes/src/presets/material/base/index.js
+++ b/packages/themes/src/presets/material/base/index.js
@@ -184,10 +184,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.800}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.600}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.800}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.600}',
                     shadow: 'none'
                 },
@@ -311,10 +312,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.300}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.300}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.400}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/material/cascadeselect/index.js b/packages/themes/src/presets/material/cascadeselect/index.js
index 4f98e4a1a..650ff297d 100644
--- a/packages/themes/src/presets/material/cascadeselect/index.js
+++ b/packages/themes/src/presets/material/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/inputtext/index.js b/packages/themes/src/presets/material/inputtext/index.js
index b61e349f5..5e639cacc 100644
--- a/packages/themes/src/presets/material/inputtext/index.js
+++ b/packages/themes/src/presets/material/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/multiselect/index.js b/packages/themes/src/presets/material/multiselect/index.js
index 5c6f39e3c..8db03a5b2 100644
--- a/packages/themes/src/presets/material/multiselect/index.js
+++ b/packages/themes/src/presets/material/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/select/index.js b/packages/themes/src/presets/material/select/index.js
index fdc6c3105..d85486224 100644
--- a/packages/themes/src/presets/material/select/index.js
+++ b/packages/themes/src/presets/material/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/textarea/index.js b/packages/themes/src/presets/material/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/material/textarea/index.js
+++ b/packages/themes/src/presets/material/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/material/treeselect/index.js b/packages/themes/src/presets/material/treeselect/index.js
index 33f84b361..b5bed15f2 100644
--- a/packages/themes/src/presets/material/treeselect/index.js
+++ b/packages/themes/src/presets/material/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/base/index.js b/packages/themes/src/presets/nora/base/index.js
index b4336da70..954941221 100644
--- a/packages/themes/src/presets/nora/base/index.js
+++ b/packages/themes/src/presets/nora/base/index.js
@@ -182,10 +182,11 @@ export default {
                     color: '{surface.900}',
                     disabledColor: '{surface.600}',
                     placeholderColor: '{surface.600}',
+                    invalidPlaceholderColor: '{red.600}',
                     floatLabelColor: '{surface.600}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.600}',
-                    floatLabelInvalidColor: '{red.500}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.900}',
                     shadow: 'none'
                 },
@@ -306,10 +307,11 @@ export default {
                     color: '{surface.0}',
                     disabledColor: '{surface.400}',
                     placeholderColor: '{surface.400}',
+                    invalidPlaceholderColor: '{red.400}',
                     floatLabelColor: '{surface.400}',
                     floatLabelFocusColor: '{primary.color}',
                     floatLabelActiveColor: '{surface.400}',
-                    floatLabelInvalidColor: '{red.400}',
+                    floatLabelInvalidColor: '{form.field.invalid.placeholder.color}',
                     iconColor: '{surface.0}',
                     shadow: 'none'
                 },
diff --git a/packages/themes/src/presets/nora/cascadeselect/index.js b/packages/themes/src/presets/nora/cascadeselect/index.js
index f28d7ee0e..5b44c1786 100644
--- a/packages/themes/src/presets/nora/cascadeselect/index.js
+++ b/packages/themes/src/presets/nora/cascadeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/inputtext/index.js b/packages/themes/src/presets/nora/inputtext/index.js
index d079bcd27..133d578b7 100644
--- a/packages/themes/src/presets/nora/inputtext/index.js
+++ b/packages/themes/src/presets/nora/inputtext/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/multiselect/index.js b/packages/themes/src/presets/nora/multiselect/index.js
index 05d449365..4b1304358 100644
--- a/packages/themes/src/presets/nora/multiselect/index.js
+++ b/packages/themes/src/presets/nora/multiselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/select/index.js b/packages/themes/src/presets/nora/select/index.js
index a09752089..0684714b5 100644
--- a/packages/themes/src/presets/nora/select/index.js
+++ b/packages/themes/src/presets/nora/select/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/textarea/index.js b/packages/themes/src/presets/nora/textarea/index.js
index f8504fdeb..b45d7acf3 100644
--- a/packages/themes/src/presets/nora/textarea/index.js
+++ b/packages/themes/src/presets/nora/textarea/index.js
@@ -11,6 +11,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',
diff --git a/packages/themes/src/presets/nora/treeselect/index.js b/packages/themes/src/presets/nora/treeselect/index.js
index 86acc20bf..2d963a3a4 100644
--- a/packages/themes/src/presets/nora/treeselect/index.js
+++ b/packages/themes/src/presets/nora/treeselect/index.js
@@ -12,6 +12,7 @@ export default {
         color: '{form.field.color}',
         disabledColor: '{form.field.disabled.color}',
         placeholderColor: '{form.field.placeholder.color}',
+        invalidPlaceholderColor: '{form.field.invalid.placeholder.color}',
         shadow: '{form.field.shadow}',
         paddingX: '{form.field.padding.x}',
         paddingY: '{form.field.padding.y}',