diff --git a/doc/autocomplete/InvalidDoc.vue b/doc/autocomplete/InvalidDoc.vue
index c0e250725..a942d32ae 100644
--- a/doc/autocomplete/InvalidDoc.vue
+++ b/doc/autocomplete/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +16,12 @@ export default {
             items: [],
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+<AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
 </template>
 
@@ -44,7 +44,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" class="p-invalid" />
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" invalid />
     </div>
 </template>
 
diff --git a/doc/calendar/InvalidDoc.vue b/doc/calendar/InvalidDoc.vue
index d6049feed..0526ffc3e 100644
--- a/doc/calendar/InvalidDoc.vue
+++ b/doc/calendar/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Calendar is used a controlled input component with <i>v-model</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" class="p-invalid" />
+        <Calendar v-model="date" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             date: null,
             code: {
                 basic: `
-<Calendar v-model="date" class="p-invalid" />
+<Calendar v-model="date" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" class="p-invalid" />
+        <Calendar v-model="date" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Calendar v-model="date" class="p-invalid" />
+        <Calendar v-model="date" invalid />
     </div>
 </template>
 
diff --git a/doc/cascadeselect/InvalidDoc.vue b/doc/cascadeselect/InvalidDoc.vue
index 701ca9e8f..3cdd92f43 100644
--- a/doc/cascadeselect/InvalidDoc.vue
+++ b/doc/cascadeselect/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -89,13 +89,13 @@ export default {
             ],
             code: {
                 basic: `
-<CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+<CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
     :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+        <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
 </template>
@@ -187,7 +187,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <CascadeSelect v-model="selectedCity" class="p-invalid" :options="countries" optionLabel="cname" optionGroupLabel="name"
+        <CascadeSelect v-model="selectedCity" invalid :options="countries" optionLabel="cname" optionGroupLabel="name"
             :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
     </div>
 </template>
diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index abf678c0e..758462619 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" binary />
+        <Checkbox v-model="checked" invalid binary />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" class="p-invalid" binary />
+<Checkbox v-model="checked" invalid binary />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" binary />
+        <Checkbox v-model="checked" invalid binary />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" binary />
+        <Checkbox v-model="checked" invalid binary />
     </div>
 </template>
 
diff --git a/doc/chips/InvalidDoc.vue b/doc/chips/InvalidDoc.vue
index a3d0856a6..edf0b80da 100644
--- a/doc/chips/InvalidDoc.vue
+++ b/doc/chips/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <Chips v-model="value" class="p-invalid" />
+        <Chips v-model="value" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Chips v-model="value" class="p-invalid" />
+<Chips v-model="value" invalid />
 `,
                 options: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" class="p-invalid" />
+        <Chips v-model="value" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <Chips v-model="value" class="p-invalid" />
+        <Chips v-model="value" invalid />
     </div>
 </template>
 
diff --git a/doc/dropdown/InvalidDoc.vue b/doc/dropdown/InvalidDoc.vue
index 8c399a06b..8556b8f0b 100644
--- a/doc/dropdown/InvalidDoc.vue
+++ b/doc/dropdown/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
+<Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="p-invalid w-full md:w-14rem" />
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/inlinemessage/FormDoc.vue b/doc/inlinemessage/FormDoc.vue
index fec1cb245..bbfde8c8a 100644
--- a/doc/inlinemessage/FormDoc.vue
+++ b/doc/inlinemessage/FormDoc.vue
@@ -5,12 +5,12 @@
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" class="p-invalid" />
+            <InputText id="username" placeholder="Username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
             <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" class="p-invalid" />
+            <InputText id="email" placeholder="Email" invalid />
             <InlineMessage />
         </div>
     </div>
@@ -25,12 +25,12 @@ export default {
                 basic: `
 <div class="flex flex-wrap align-items-center mb-3 gap-2">
     <label for="username" class="p-sr-only">Username</label>
-    <InputText id="username" placeholder="Username" class="p-invalid" />
+    <InputText id="username" placeholder="Username" invalid />
     <InlineMessage>Username is required</InlineMessage>
 </div>
 <div class="flex flex-wrap align-items-center gap-2">
     <label for="email" class="p-sr-only">email</label>
-    <InputText id="email" placeholder="Email" class="p-invalid" />
+    <InputText id="email" placeholder="Email" invalid />
     <InlineMessage />
 </div>
 `,
@@ -39,12 +39,12 @@ export default {
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" class="p-invalid" />
+            <InputText id="username" placeholder="Username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
             <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" class="p-invalid" />
+            <InputText id="email" placeholder="Email" invalid />
             <InlineMessage />
         </div>
     </div>
@@ -58,12 +58,12 @@ export default {
     <div class="card">
         <div class="flex flex-wrap align-items-center mb-3 gap-2">
             <label for="username" class="p-sr-only">Username</label>
-            <InputText id="username" placeholder="Username" class="p-invalid" />
+            <InputText id="username" placeholder="Username" invalid />
             <InlineMessage>Username is required</InlineMessage>
         </div>
         <div class="flex flex-wrap align-items-center gap-2">
             <label for="email" class="p-sr-only">email</label>
-            <InputText id="email" placeholder="Email" class="p-invalid" />
+            <InputText id="email" placeholder="Email" invalid />
             <InlineMessage />
         </div>
     </div>
diff --git a/doc/inputnumber/InvalidDoc.vue b/doc/inputnumber/InvalidDoc.vue
index 1f84e76d5..c1f98b480 100644
--- a/doc/inputnumber/InvalidDoc.vue
+++ b/doc/inputnumber/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
+<InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
+        <InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />
     </div>
 </template>
 
diff --git a/doc/inputswitch/InvalidDoc.vue b/doc/inputswitch/InvalidDoc.vue
index 9e34e0c01..ca1e4883d 100644
--- a/doc/inputswitch/InvalidDoc.vue
+++ b/doc/inputswitch/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" class="p-invalid" />
+        <InputSwitch v-model="checked" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<InputSwitch v-model="checked" class="p-invalid" />
+<InputSwitch v-model="checked" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" class="p-invalid" />
+        <InputSwitch v-model="checked" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputSwitch v-model="checked" class="p-invalid" />
+        <InputSwitch v-model="checked" invalid />
     </div>
 </template>
 
diff --git a/doc/inputtext/InvalidDoc.vue b/doc/inputtext/InvalidDoc.vue
index a6a95488a..745dd9600 100644
--- a/doc/inputtext/InvalidDoc.vue
+++ b/doc/inputtext/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>.p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputText v-model="value" class="p-invalid" />
+        <InputText v-model="value" invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,13 +15,13 @@ export default {
             value: null,
             code: {
                 basic: `
-<InputText v-model="value" class="p-invalid" />
+<InputText v-model="value" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputText v-model="value" class="p-invalid" />
-    </div> 
+        <InputText v-model="value" invalid />
+    </div>
 </template>
 
 <script>
@@ -37,8 +37,8 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputText v-model="value" class="p-invalid" />
-    </div> 
+        <InputText v-model="value" invalid />
+    </div>
 </template>
 
 <script setup>
diff --git a/doc/listbox/InvalidDoc.vue b/doc/listbox/InvalidDoc.vue
index c8462dd79..3f01e6a7b 100644
--- a/doc/listbox/InvalidDoc.vue
+++ b/doc/listbox/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,12 +22,12 @@ export default {
             ],
             code: {
                 basic: `
-<Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
+<Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
@@ -51,7 +51,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="p-invalid w-full md:w-14rem" />
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" invalid class="w-full md:w-14rem" />
     </div>
 </template>
 
diff --git a/doc/password/InvalidDoc.vue b/doc/password/InvalidDoc.vue
index da0891692..971587a25 100644
--- a/doc/password/InvalidDoc.vue
+++ b/doc/password/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Password class="p-invalid" />
+        <Password invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: null,
             code: {
                 basic: `
-<Password class="p-invalid" />
+<Password invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Password class="p-invalid" />
+        <Password invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Password class="p-invalid" />
+        <Password invalid />
     </div>
 </template>
 
diff --git a/doc/radiobutton/InvalidDoc.vue b/doc/radiobutton/InvalidDoc.vue
index 0767f2feb..f0998cf9b 100644
--- a/doc/radiobutton/InvalidDoc.vue
+++ b/doc/radiobutton/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <RadioButton class="p-invalid" />
+        <RadioButton invalid />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<RadioButton class="p-invalid" />
+<RadioButton invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <RadioButton class="p-invalid" />
+        <RadioButton invalid />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <RadioButton class="p-invalid" />
+        <RadioButton invalid />
     </div>
 </template>
 
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index bc7e78b2d..363ad7b09 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30" class="p-invalid" style="resize: none" />
+        <Textarea v-model="value" rows="5" cols="30" invalid style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<Textarea v-model="value" rows="5" cols="30" />
+<Textarea v-model="value" rows="5" cols="30" invalid />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30" class="p-invalid" />
+        <Textarea v-model="value" rows="5" cols="30" invalid />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30"   class="p-invalid" />
+        <Textarea v-model="value" rows="5" cols="30"   invalid />
     </div>
 </template>
 
diff --git a/doc/togglebutton/InvalidDoc.vue b/doc/togglebutton/InvalidDoc.vue
index 861df79b3..ba063ba02 100644
--- a/doc/togglebutton/InvalidDoc.vue
+++ b/doc/togglebutton/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
+        <ToggleButton v-model="checked" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: true,
             code: {
                 basic: `
-<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
+<ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
+        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" class="p-invalid w-full sm:w-10rem" aria-label="Confirmation" />
+        <ToggleButton v-model="checked1" onIcon="pi pi-check" offIcon="pi pi-times" invalid class="w-full sm:w-10rem" aria-label="Confirmation" />
     </div>
 </template>
 
diff --git a/doc/treeselect/InvalidDoc.vue b/doc/treeselect/InvalidDoc.vue
index 91e02040f..73df14c63 100644
--- a/doc/treeselect/InvalidDoc.vue
+++ b/doc/treeselect/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
     <DocSectionCode :code="code" :service="['NodeService']" v-bind="$attrs" />
 </template>
@@ -18,12 +18,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
+<TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
@@ -46,7 +46,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" class="md:w-20rem w-full p-invalid" :options="nodes" placeholder="TreeSelect" />
+        <TreeSelect v-model="selectedValue" invalid class="md:w-20rem w-full" :options="nodes" placeholder="TreeSelect" />
     </div>
 </template>
 
diff --git a/doc/tristatecheckbox/InvalidDoc.vue b/doc/tristatecheckbox/InvalidDoc.vue
index bdf3445ef..9ef0689f4 100644
--- a/doc/tristatecheckbox/InvalidDoc.vue
+++ b/doc/tristatecheckbox/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox v-model="value" class="p-invalid" />
+        <TriStateCheckbox v-model="value" invalid />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
     </div>
     <DocSectionCode :code="code" />
@@ -16,32 +16,32 @@ export default {
             value: null,
             code: {
                 basic: `
-<TriStateCheckbox v-model="value" class="p-invalid" />
+<TriStateCheckbox v-model="value" invalid />
 `,
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox v-model="value" class="p-invalid" />
+        <TriStateCheckbox v-model="value" invalid />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
+    </div>
 </template>
 
 <script>
 export default {
-  data() {
-      return {
-          value: null
-      }
-  }
+    data() {
+        return {
+            value: null
+        }
+    }
 }
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
-        <TriStateCheckbox v-model="value" class="p-invalid" />
+        <TriStateCheckbox v-model="value" invalid />
         <label for="checkbox">{{ value == null ? 'null' : value }}</label>
-    </div>  
+    </div>
 </template>
 
 <script setup>