Updated editable-demo with error message example.

Author: Sithara Balasuriya

components-demo/editable-demo.tsx

@@ -1,12 +1,19 @@
 import {
   Editable,
-  EditablePreview,
+  EditableError,
   EditableInput,
+  EditablePreview,
   EditableTextarea,
 } from "@/components/ui/editable";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+
+const ERROR_MESSAGE = "This field is required";
 
 export function EditableDemo() {
 
+  const [showError, setShowError] = useState(false);
+
   return (
     <div>
       <h2 className="font-semibold text-4xl wrap-break-words">Editable</h2>
@@ -30,7 +37,23 @@ export function EditableDemo() {
           </div>
         </div>
 
-        
+        <div id="editable-with-error">
+          <div className="w-96">
+            <Editable
+              defaultValue=""
+              placeholder="Click to edit this text"
+              hasError={showError}
+              onEdit={() => setShowError(true)}
+            >
+              <EditablePreview className="w-80" />
+              <EditableInput
+                className={cn("w-80", showError && "border-destructive")}
+                aria-invalid={showError}
+              />
+              {showError ? <EditableError>{ERROR_MESSAGE}</EditableError> : null}
+            </Editable>
+          </div>
+        </div>
 
     </div>
   );