Enhancement - Options to allow key value array

src/Select/Select.jsx

@@ -1,4 +1,5 @@
 import { MenuItem, TextField } from "@mui/material";
+
 import PropTypes from "prop-types";
 import React from "react";
 
@@ -15,9 +16,14 @@ export default function Select({
   options = [],
   required = false,
   size = "medium",
-  value,
+  value = "",
   variant = "outlined"
 }) {
+  // set value for select, when options is a key value pair the value will be in option.value otherwise option is the value
+  const setValue = options.some(
+    option => option.value === value || option === value
+  );
+
   // return components
   return (
     <TextField
@@ -28,18 +34,23 @@ export default function Select({
       margin={margin}
       fullWidth
       label={label}
-      value={options.includes(value) ? value : ""}
+      value={setValue ? value : ""}
       onChange={onChange}
       disabled={disabled}
       id={label}
       helperText={helperText}
       size={size}
     >
-      {options.map(option => (
-        <MenuItem value={option} key={option}>
-          {option}
-        </MenuItem>
-      ))}
+      {/* Render the options */}
+      {options.map(option => {
+        const value = option.value || option;
+        const key = option.key || option;
+        return (
+          <MenuItem value={value} key={key}>
+            {value}
+          </MenuItem>
+        );
+      })}
     </TextField>
   );
 }
@@ -76,10 +87,17 @@ Select.propTypes = {
    */
   onChange: PropTypes.func,
   /**
-   * Array of options to display.
+   * Array of options to display. Each option can be a string, number, or an object with `key` and `value` properties.
    */
   options: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+      PropTypes.shape({
+        key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+      })
+    ])
   ),
   /**
    * If true, the label will indicate that the input is required.

src/Select/Select.stories.js

@@ -33,3 +33,22 @@ export const Default = {
 
   render: Template
 };
+
+export const KeyValueOptions = {
+  args: {
+    disabled: false,
+    error: false,
+    helperText: "",
+    label: "Select an option",
+    margin: "normal",
+    options: [
+      { key: "option-a", value: "Option A" },
+      { key: "option-b", value: "Option B" }
+    ],
+    required: true,
+    size: "medium",
+    variant: "outlined"
+  },
+
+  render: Template
+};