diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index a942d32ae..914083bba 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index 3cdd92f43..28342ba65 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index 758462619..f91f9d345 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <Checkbox v-model="checked" invalid binary />
diff --git a/doc/chips/InvalidDoc.vue b/doc/chips/InvalidDoc.vue
index edf0b80da..284b01c40 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/chips/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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 p-fluid">
         <Chips v-model="value" invalid />
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
index 8556b8f0b..c40310c8d 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/dropdown/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 576046b4c..1e39fe558 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid" />
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index c1f98b480..ece73f47c 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/inputswitch/InvalidDoc.vue
index ca1e4883d..62756eb84 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/inputswitch/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <InputSwitch v-model="checked" invalid />
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index 745dd9600..c10554452 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>.p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <InputText v-model="value" invalid />
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index 3f01e6a7b..838e9ea9f 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index 773440bb3..efb8d4117 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index 971587a25..4f866739d 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <Password invalid />
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index f0998cf9b..509840fa4 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <RadioButton invalid />
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index f9d19f530..7b699e803 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index 363ad7b09..94e67ea61 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <Textarea v-model="value" rows="5" cols="30" invalid style="resize: none" />
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index ba063ba02..857b4d391 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 73df14c63..1b76fb0f9 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-content-center">
         <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
diff --git a/doc/tristatecheckbox/InvalidDoc.vue b/doc/tristatecheckbox/InvalidDoc.vue
index 9ef0689f4..1d43ea1dc 100644
--- a/doc/tristatecheckbox/InvalidDoc.vue
+++ b/doc/tristatecheckbox/InvalidDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
+        <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-column align-items-center gap-3">
         <TriStateCheckbox v-model="value" invalid />