How to create dropdown list with description in React

Question

I am trying to create a dropdown list with description in React. For reference you can see the image below:

Is there any other way using bootstrap or Material-UI so I can achieve this? I am using react-select npm package for dropdown list. you can find live link and code below:

https://codesandbox.io/embed/react-select-selected-option-background-color-forked-jpu99?fontsize=14&hidenavigation=1&theme=dark

const colourOptions = [
  { value: "red", label: "Red" ,description:"Test description for red"},
  { value: "green", label: "Green", description:"Test description for green" },
  { value: "blue", label: "Blue", description:"Test description for blue" }
];

//for styling

const colourStyles = {
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    // const color = chroma(data.color);
    console.log({ data, isDisabled, isFocused, isSelected });
    return {
      ...styles,
      backgroundColor: isFocused ? "#00A3BE" : "#191D2F",
      font: "Segoe UI",
      color: "#F9FAFC"
    };
  }
};

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    label="Single select"
    options={colourOptions}
    styles={colourStyles}
  />
);

Answer 1

You can override the Option component and provide your own Option that can display both title and description:

import Select, { components } from "react-select";

const colourStyles = {
  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
    return {
      ...styles,
      backgroundColor: isFocused ? "#00A3BE" : "",

      color: isFocused ? "#F9FAFC" : "#191D2F",
      display: "flex",
      paddingLeft: 0,

      "& .left": {
        display: "flex",
        justifyContent: "center",
        width: 60,
        marginTop: 3
      },
      "& .right": {
        width: "100%"
      },

      "& .right > .title": {
        display: "block",
        margin: "5px 0"
      }
    };
  }
};

const Option = (props) => {
  return (
    <components.Option {...props}>
      <div className="left">{props.isSelected ? "✔" : ""}</div>
      <div className="right">
        <strong className="title">{props.data.label}</strong>
        <div>{props.data.description}</div>
      </div>
    </components.Option>
  );
};

export default () => (
  <Select
    defaultValue={colourOptions[1]}
    label="Single select"
    options={colourOptions}
    styles={colourStyles}
    components={{ Option }}
  />
);

Live Demo