diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 731a7a8da..f56e1c87a 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -78,7 +78,7 @@
         <img v-if="product.image" :src="`https://primefaces.org/cdn/primevue/images/product/${product.image}`" :alt="product.image" class="block m-auto pb-3" />
         <div class="field">
             <label for="name">Name</label>
-            <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{ 'p-invalid': submitted && !product.name }" />
+            <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
             <small v-if="submitted && !product.name" class="p-error">Name is required.</small>
         </div>
         <div class="field">
@@ -317,7 +317,7 @@ export default {
             <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
             <div class="field">
                 <label for="name">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
             <div class="field">
@@ -450,7 +450,7 @@ export default {
         saveProduct() {
             this.submitted = true;
 
-			if (this.product.name.trim()) {
+			if (this.product?.name?.trim()) {
                 if (this.product.id) {
                     this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value: this.product.inventoryStatus;
                     this.products[this.findIndexById(this.product.id)] = this.product;
@@ -608,7 +608,7 @@ export default {
             <img v-if="product.image" :src="\`https://primefaces.org/cdn/primevue/images/product/\${product.image}\`" :alt="product.image" class="block m-auto pb-3" />
             <div class="field">
                 <label for="name">Name</label>
-                <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
+                <InputText id="name" v-model.trim="product.name" required="true" autofocus :invalid="submitted && !product.name" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
             <div class="field">
@@ -740,7 +740,7 @@ const hideDialog = () => {
 const saveProduct = () => {
     submitted.value = true;
 
-    if (product.value.name.trim()) {
+    if (product?.value.name?.trim()) {
         if (product.value.id) {
             product.value.inventoryStatus = product.value.inventoryStatus.value ? product.value.inventoryStatus.value : product.value.inventoryStatus;
             products.value[findIndexById(product.value.id)] = product.value;
@@ -864,7 +864,7 @@ const getStatusLabel = (status) => {
         saveProduct() {
             this.submitted = true;
 
-            if (this.product.name.trim()) {
+            if (this.product?.name?.trim()) {
                 if (this.product.id) {
                     this.product.inventoryStatus = this.product.inventoryStatus.value ? this.product.inventoryStatus.value : this.product.inventoryStatus;
                     this.products[this.findIndexById(this.product.id)] = this.product;
diff --git a/doc/inputmask/InvalidDoc.vue b/doc/inputmask/InvalidDoc.vue
index 1e39fe558..6df8082f3 100644
--- a/doc/inputmask/InvalidDoc.vue
+++ b/doc/inputmask/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-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid" />
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+<InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
 
@@ -33,12 +33,12 @@ export default {
     }
 }
 <\/script>
-        
+
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" class="p-invalid"/>
+        <InputMask v-model="value" mask="99-999999" placeholder="99-999999" invalid />
     </div>
 </template>
 
diff --git a/doc/multiselect/InvalidDoc.vue b/doc/multiselect/InvalidDoc.vue
index efb8d4117..d93c0eb96 100644
--- a/doc/multiselect/InvalidDoc.vue
+++ b/doc/multiselect/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-content-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities" :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -23,13 +23,13 @@ export default {
             code: {
                 basic: `
 <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-    :maxSelectedLabels="3" class="p-invalid w-full md:w-20rem" />
+    :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
 `,
                 options: `
 <template>
     <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" />
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
 
@@ -54,7 +54,7 @@ export default {
 <template>
     <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" />
+            :maxSelectedLabels="3" invalid class="w-full md:w-20rem" />
     </div>
 </template>
 
diff --git a/doc/selectbutton/InvalidDoc.vue b/doc/selectbutton/InvalidDoc.vue
index 7b699e803..ebd5cb186 100644
--- a/doc/selectbutton/InvalidDoc.vue
+++ b/doc/selectbutton/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-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +16,12 @@ export default {
             options: ['One-Way', 'Return'],
             code: {
                 basic: `
-<SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+<SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>
 
@@ -39,7 +39,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" class="p-invalid" />
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" invalid />
     </div>
 </template>