diff --git a/apps/docs/content/components/autocomplete/colors.raw.jsx b/apps/docs/content/components/autocomplete/colors.raw.jsx
index 02453bca27..084f46d6cd 100644
--- a/apps/docs/content/components/autocomplete/colors.raw.jsx
+++ b/apps/docs/content/components/autocomplete/colors.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -43,7 +43,7 @@ export default function App() {
           label="Favorite Animal"
           placeholder="Search an animal"
         >
-          {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
         </Autocomplete>
       ))}
     </div>
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.jsx b/apps/docs/content/components/autocomplete/controlled.raw.jsx
index 02453bca27..084f46d6cd 100644
--- a/apps/docs/content/components/autocomplete/controlled.raw.jsx
+++ b/apps/docs/content/components/autocomplete/controlled.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -43,7 +43,7 @@ export default function App() {
           label="Favorite Animal"
           placeholder="Search an animal"
         >
-          {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+          {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
         </Autocomplete>
       ))}
     </div>
diff --git a/apps/docs/content/components/autocomplete/controlled.raw.tsx b/apps/docs/content/components/autocomplete/controlled.raw.tsx
index e1e51384d3..ac696fb0ff 100644
--- a/apps/docs/content/components/autocomplete/controlled.raw.tsx
+++ b/apps/docs/content/components/autocomplete/controlled.raw.tsx
@@ -2,35 +2,35 @@ import React from "react";
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
-  const [value, setValue] = React.useState<React.Key | null>("cat");
+  const [key, setValue] = React.useState<React.Key | null>("cat");
 
   return (
     <div className="flex w-full max-w-xs flex-col gap-2">
@@ -39,13 +39,13 @@ export default function App() {
         defaultItems={animals}
         label="Favorite Animal"
         placeholder="Search an animal"
-        selectedKey={value}
+        selectedKey={key}
         variant="bordered"
         onSelectionChange={setValue}
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
-      <p className="text-default-500 text-small">Selected: {value}</p>
+      <p className="text-default-500 text-small">Selected: {key}</p>
     </div>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
index 1c1072f365..822f4838cc 100644
--- a/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-empty-content-message.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
         }}
         placeholder="Search an animal"
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
     </div>
   );
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
index 7f0ff19257..afb0782618 100644
--- a/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -51,7 +51,7 @@ export default function App() {
       label="Search an animal"
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
index 58f68bd410..38b444f84e 100644
--- a/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
+++ b/apps/docs/content/components/autocomplete/custom-filtering.raw.tsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -51,7 +51,7 @@ export default function App() {
       label="Search an animal"
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
index f4d192332f..9df56de218 100644
--- a/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-selector-icon.raw.jsx
@@ -22,31 +22,31 @@ const SelectorIcon = (props) => (
 );
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -60,7 +60,7 @@ export default function App() {
       placeholder="Search an animal"
       selectorIcon={<SelectorIcon />}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/custom-value.raw.jsx b/apps/docs/content/components/autocomplete/custom-value.raw.jsx
index 93d0c71244..ec46f43f0c 100644
--- a/apps/docs/content/components/autocomplete/custom-value.raw.jsx
+++ b/apps/docs/content/components/autocomplete/custom-value.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -37,7 +37,7 @@ export default function App() {
       label="Search an animal"
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/description.raw.jsx b/apps/docs/content/components/autocomplete/description.raw.jsx
index d68aa29122..d8f7e5bbaa 100644
--- a/apps/docs/content/components/autocomplete/description.raw.jsx
+++ b/apps/docs/content/components/autocomplete/description.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -38,7 +38,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx
index 41ab6f13bb..8b90a1f045 100644
--- a/apps/docs/content/components/autocomplete/disabled-items.raw.jsx
+++ b/apps/docs/content/components/autocomplete/disabled-items.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -37,7 +37,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/disabled.raw.jsx b/apps/docs/content/components/autocomplete/disabled.raw.jsx
index 0e5474b97d..5524c3850a 100644
--- a/apps/docs/content/components/autocomplete/disabled.raw.jsx
+++ b/apps/docs/content/components/autocomplete/disabled.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -38,7 +38,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/dynamic.raw.jsx b/apps/docs/content/components/autocomplete/dynamic.raw.jsx
index 4acc4fb52e..02d854ca30 100644
--- a/apps/docs/content/components/autocomplete/dynamic.raw.jsx
+++ b/apps/docs/content/components/autocomplete/dynamic.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -36,7 +36,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(animal) => <AutocompleteItem key={animal.value}>{animal.label}</AutocompleteItem>}
+      {(animal) => <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/error-message.raw.jsx b/apps/docs/content/components/autocomplete/error-message.raw.jsx
index a44a21f67f..fa9082e486 100644
--- a/apps/docs/content/components/autocomplete/error-message.raw.jsx
+++ b/apps/docs/content/components/autocomplete/error-message.raw.jsx
@@ -1,38 +1,38 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
-  const [value, setValue] = React.useState("");
+  const [key, setValue] = React.useState("");
   const [touched, setTouched] = React.useState(false);
 
-  const isValid = value === "cat";
+  const isValid = key === "cat";
 
   return (
     <Autocomplete
@@ -43,12 +43,12 @@ export default function App() {
       isInvalid={isValid || !touched ? false : true}
       label="Favorite Animal"
       placeholder="Search an animal"
-      selectedKey={value}
+      selectedKey={key}
       variant="bordered"
       onClose={() => setTouched(true)}
       onSelectionChange={setValue}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/events.raw.jsx b/apps/docs/content/components/autocomplete/events.raw.jsx
index 4fca879e86..b54015518c 100644
--- a/apps/docs/content/components/autocomplete/events.raw.jsx
+++ b/apps/docs/content/components/autocomplete/events.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -51,7 +51,7 @@ export default function App() {
         onInputChange={onInputChange}
         onSelectionChange={onSelectionChange}
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
       <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
       <p className="text-small text-default-500">Current input text: {value}</p>
diff --git a/apps/docs/content/components/autocomplete/events.raw.tsx b/apps/docs/content/components/autocomplete/events.raw.tsx
index 3c072be3a6..4e0c01fd53 100644
--- a/apps/docs/content/components/autocomplete/events.raw.tsx
+++ b/apps/docs/content/components/autocomplete/events.raw.tsx
@@ -2,31 +2,31 @@ import React from "react";
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -52,7 +52,7 @@ export default function App() {
         onInputChange={onInputChange}
         onSelectionChange={onSelectionChange}
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
       <p className="mt-1 text-small text-default-500">Current selected animal: {selectedKey}</p>
       <p className="text-small text-default-500">Current input text: {value}</p>
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx
index 99449aaa4c..6b0049e68d 100644
--- a/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx
+++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.jsx
@@ -2,31 +2,31 @@ import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 import {useFilter} from "@react-aria/i18n";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -90,7 +90,7 @@ export default function App() {
       onOpenChange={onOpenChange}
       onSelectionChange={onSelectionChange}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
index b4c4bfb238..b71890a48f 100644
--- a/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
+++ b/apps/docs/content/components/autocomplete/fully-controlled.raw.tsx
@@ -9,31 +9,31 @@ export type FieldState = {
 };
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -97,7 +97,7 @@ export default function App() {
       onOpenChange={onOpenChange}
       onSelectionChange={onSelectionChange}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/label-placements.raw.jsx b/apps/docs/content/components/autocomplete/label-placements.raw.jsx
index 0693d8da2b..bc019062b4 100644
--- a/apps/docs/content/components/autocomplete/label-placements.raw.jsx
+++ b/apps/docs/content/components/autocomplete/label-placements.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -44,7 +44,7 @@ export default function App() {
               label="Favorite Animal"
               labelPlacement={placement}
             >
-              {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+              {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
             </Autocomplete>
           ))}
         </div>
@@ -61,9 +61,7 @@ export default function App() {
               placeholder="Search an animal"
             >
               {animals.map((animal) => (
-                <AutocompleteItem key={animal.value} value={animal.value}>
-                  {animal.label}
-                </AutocompleteItem>
+                <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
               ))}
             </Autocomplete>
           ))}
diff --git a/apps/docs/content/components/autocomplete/read-only.raw.jsx b/apps/docs/content/components/autocomplete/read-only.raw.jsx
index d5d2b084f4..2801df8aba 100644
--- a/apps/docs/content/components/autocomplete/read-only.raw.jsx
+++ b/apps/docs/content/components/autocomplete/read-only.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -38,7 +38,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/required.raw.jsx b/apps/docs/content/components/autocomplete/required.raw.jsx
index cb4c4faa16..5fa999c6e4 100644
--- a/apps/docs/content/components/autocomplete/required.raw.jsx
+++ b/apps/docs/content/components/autocomplete/required.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -38,7 +38,7 @@ export default function App() {
       label="Favorite Animal"
       placeholder="Search an animal"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/sizes.raw.jsx b/apps/docs/content/components/autocomplete/sizes.raw.jsx
index bf6365be1f..31906647eb 100644
--- a/apps/docs/content/components/autocomplete/sizes.raw.jsx
+++ b/apps/docs/content/components/autocomplete/sizes.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -41,7 +41,7 @@ export default function App() {
             label="Select an animal"
             size={size}
           >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
           </Autocomplete>
           <Autocomplete
             className="max-w-xs"
@@ -50,7 +50,7 @@ export default function App() {
             placeholder="Search an animal"
             size={size}
           >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
           </Autocomplete>
         </div>
       ))}
diff --git a/apps/docs/content/components/autocomplete/start-content.raw.jsx b/apps/docs/content/components/autocomplete/start-content.raw.jsx
index a343e7c689..58e526aaac 100644
--- a/apps/docs/content/components/autocomplete/start-content.raw.jsx
+++ b/apps/docs/content/components/autocomplete/start-content.raw.jsx
@@ -37,31 +37,31 @@ const PetIcon = (props) => {
 };
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -75,7 +75,7 @@ export default function App() {
       startContent={<PetIcon className="text-xl" />}
       variant="bordered"
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }
diff --git a/apps/docs/content/components/autocomplete/usage.raw.jsx b/apps/docs/content/components/autocomplete/usage.raw.jsx
index d25bbd6e74..f95a67897f 100644
--- a/apps/docs/content/components/autocomplete/usage.raw.jsx
+++ b/apps/docs/content/components/autocomplete/usage.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -33,9 +33,7 @@ export default function App() {
     <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
       <Autocomplete className="max-w-xs" label="Select an animal">
         {animals.map((animal) => (
-          <AutocompleteItem key={animal.value} value={animal.value}>
-            {animal.label}
-          </AutocompleteItem>
+          <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
         ))}
       </Autocomplete>
       <Autocomplete
@@ -44,7 +42,7 @@ export default function App() {
         label="Favorite Animal"
         placeholder="Search an animal"
       >
-        {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+        {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
       </Autocomplete>
     </div>
   );
diff --git a/apps/docs/content/components/autocomplete/variants.raw.jsx b/apps/docs/content/components/autocomplete/variants.raw.jsx
index dcfa9bea18..a222f3afaf 100644
--- a/apps/docs/content/components/autocomplete/variants.raw.jsx
+++ b/apps/docs/content/components/autocomplete/variants.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -41,7 +41,7 @@ export default function App() {
             label="Select an animal"
             variant={variant}
           >
-            {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+            {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
           </Autocomplete>
           <Autocomplete
             className="max-w-xs"
@@ -50,9 +50,7 @@ export default function App() {
             variant={variant}
           >
             {animals.map((animal) => (
-              <AutocompleteItem key={animal.value} value={animal.value}>
-                {animal.label}
-              </AutocompleteItem>
+              <AutocompleteItem key={animal.key}>{animal.label}</AutocompleteItem>
             ))}
           </Autocomplete>
         </div>
diff --git a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx
index 3f332407ae..56e0385b12 100644
--- a/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx
+++ b/apps/docs/content/components/autocomplete/without-scroll-shadow.raw.jsx
@@ -1,31 +1,31 @@
 import {Autocomplete, AutocompleteItem} from "@nextui-org/react";
 
 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: "Cat", key: "cat", description: "The second most popular pet in the world"},
+  {label: "Dog", key: "dog", description: "The most popular pet in the world"},
+  {label: "Elephant", key: "elephant", description: "The largest land animal"},
+  {label: "Lion", key: "lion", description: "The king of the jungle"},
+  {label: "Tiger", key: "tiger", description: "The largest cat species"},
+  {label: "Giraffe", key: "giraffe", description: "The tallest land animal"},
   {
     label: "Dolphin",
-    value: "dolphin",
+    key: "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: "Penguin", key: "penguin", description: "A group of aquatic flightless birds"},
+  {label: "Zebra", key: "zebra", description: "A several species of African equids"},
   {
     label: "Shark",
-    value: "shark",
+    key: "shark",
     description: "A group of elasmobranch fish characterized by a cartilaginous skeleton",
   },
   {
     label: "Whale",
-    value: "whale",
+    key: "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"},
+  {label: "Otter", key: "otter", description: "A carnivorous mammal in the subfamily Lutrinae"},
+  {label: "Crocodile", key: "crocodile", description: "A large semiaquatic reptile"},
 ];
 
 export default function App() {
@@ -40,7 +40,7 @@ export default function App() {
         isEnabled: false,
       }}
     >
-      {(item) => <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>}
+      {(item) => <AutocompleteItem key={item.key}>{item.label}</AutocompleteItem>}
     </Autocomplete>
   );
 }