fix: isReadOnly in Autocomplete MDX

apps/docs/content/components/autocomplete/index.ts

@@ -24,6 +24,7 @@ import asyncLoadingItems from "./async-loading-items";
 import sections from "./sections";
 import customSectionsStyle from "./custom-sections-style";
 import customStyles from "./custom-styles";
+import readOnly from "./read-only";
 
 export const autocompleteContent = {
   usage,
@@ -52,4 +53,5 @@ export const autocompleteContent = {
   sections,
   customSectionsStyle,
   customStyles,
+  readOnly,
 };

apps/docs/content/components/autocomplete/read-only.ts

@@ -0,0 +1,54 @@
+const data = `export const animals = [
+  {label: "Cat", value: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", value: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", value: "elephant", description: "The largest land animal"},
+  {label: "Lion", value: "lion", description: "The king of the jungle"},
+  {label: "Tiger", value: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", value: "giraffe", description: "The tallest land animal"},
+  {
+    label: "Dolphin",
+    value: "dolphin",
+    description: "A widely distributed and diverse group of aquatic mammals",
+  },
+  {label: "Penguin", value: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", value: "zebra", description: "A several species of African equids"},
+  {
+    label: "Shark",
+    value: "shark",
+    description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
+  },
+  {
+    label: "Whale",
+    value: "whale",
+    description: "Diverse group of fully aquatic placental marine mammals",
+  },
+  {label: "Otter", value: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", value: "crocodile", description: "A large semiaquatic reptile"},
+];`;
+
+const App = `import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
+import {animals} from "./data";
+
+export default function App() {
+  return (
+    <Autocomplete
+      isReadOnly
+      label="Favorite Animal"
+      defaultItems={animals}
+      placeholder="Search an animal"
+      defaultSelectedKey="cat"
+      className="max-w-xs"
+    >
+      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+    </Autocomplete>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/data.js": data,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/docs/components/autocomplete.mdx

@@ -68,6 +68,13 @@ the end of the label and the autocomplete will be required.
 
 <CodeDemo title="Required" highlightedLines="8" files={autocompleteContent.required} />
 
+### Read Only
+
+If you pass the `isReadOnly` property to the Autocomplete, the Listbox will open to display 
+all available options, but users won't be able to select any of the listed options.
+
+<CodeDemo title="Read Only" highlightedLines="8" files={autocompleteContent.readOnly} />
+
 ### Sizes
 
 <CodeDemo title="Sizes" highlightedLines="13,21" files={autocompleteContent.sizes} />