From 39f84ff9b652f6b0efd40aea6e5bf39ae20cabae Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Mon, 1 Apr 2024 16:17:16 +0300
Subject: [PATCH] Update invalid doc

---
 components/doc/autocomplete/invaliddoc.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/doc/autocomplete/invaliddoc.js b/components/doc/autocomplete/invaliddoc.js
index 8bda7ff412..c374c7828c 100644
--- a/components/doc/autocomplete/invaliddoc.js
+++ b/components/doc/autocomplete/invaliddoc.js
@@ -13,7 +13,7 @@ export function InvalidDoc(props) {
 
     const code = {
         basic: `
-<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+<AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         `,
         javascript: `
 import React, { useState } from "react";
@@ -29,7 +29,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -48,7 +48,7 @@ export default function InvalidDemo() {
 
     return (
         <div className="card flex justify-content-center">
-            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
         </div>
     )
 }
@@ -59,11 +59,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    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 className="card flex justify-content-center">
-                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} className="p-invalid" />
+                <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
             </div>
             <DocSectionCode code={code} />
         </>