Example from https://react-md.dev/packages/form/select-field-demos#customizing-select-options

Form Example - Customizing Select Options

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Form Example - Customizing Select Options</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

import type { ReactElement } from "react";
import { Select } from "@react-md/form";

import desserts from "./desserts";

import useSelect from "./useSelect";

const options = desserts.map(({ name, calories }, i) => ({
  // this is required for a11y so that the user can still "search"
  // for this field by typing letters while the select is visible.
  // if this was not provided, a warning would be thrown in the console
  // for this select component explaining that the `children` prop
  // can't be used for searching since it is not a string
  label: name,
  value: `dessert-${i}`,
  children: (
    <>
      <span className="rmd-typography--bold">{name.substring(0, 3)}</span>
      {name.substring(3)}
      <span className="rmd-typography--italic">{` (${calories} kcal)`}</span>
    </>
  ),
}));

export default function CustomChildren(): ReactElement {
  const [value, handleChange] = useSelect(options[0].value);
  return (
    <Select
      id="select-using-custom-children"
      label="State"
      placeholder="Colorado"
      options={options}
      value={value}
      onChange={handleChange}
    />
  );
}


.container {
  display: grid;
  grid-row-gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}


import type { ReactElement } from "react";
import { Typography } from "@react-md/typography";

import UsingKeys from "./UsingKeys";
import CustomChildren from "./CustomChildren";
import WithOptionLeftAddon from "./WithOptionLeftAddon";
import styles from "./CustomizingSelectOptions.module.scss";

export default function Demo(): ReactElement {
  return (
    <div className={styles.container}>
      <Typography type="headline-6" margin="none">
        Using Keys
      </Typography>
      <UsingKeys />
      <Typography type="headline-6" margin="top">
        Custom Children
      </Typography>
      <CustomChildren />
      <Typography type="headline-6" margin="top">
        Icons and Avatars
      </Typography>
      <WithOptionLeftAddon />
    </div>
  );
}


import type { ReactElement } from "react";
import { Select } from "@react-md/form";

import immutableStates from "./states";
import useSelect from "./useSelect";

const states = immutableStates.slice();

export default function UsingKeys(): ReactElement {
  const [value, handleChange] = useSelect("");
  return (
    <Select
      id="select-using-keys"
      label="State"
      placeholder="Colorado"
      labelKey="name"
      valueKey="abbreviation"
      options={states}
      value={value}
      onChange={handleChange}
    />
  );
}


// Note: Outside of codesandbox, this can be `@use 'react-md' as *;`
@use 'react-md/dist/everything' as *;

.label {
  @include rmd-avatar-theme-update-var(size, 1.5rem);
  @include rmd-avatar-theme-update-var(font-size, 0.75rem);
}


import type { ReactElement } from "react";
import { Avatar } from "@react-md/avatar";
import scssVariables from "@react-md/avatar/dist/scssVariables";
import type { ListboxOption } from "@react-md/form";
import { Checkbox, Select, useChecked } from "@react-md/form";
import { CloseSVGIcon } from "@react-md/material-icons";

import immutableStates from "./states";

import useSelect from "./useSelect";
import styles from "./WithOptionLeftAddon.module.scss";

const COLORS = Object.keys(scssVariables["rmd-avatar-colors"]);
const states: ListboxOption[] = immutableStates.map(
  ({ name, abbreviation }, i) => ({
    leftAddon: (
      <Avatar color={COLORS[i % COLORS.length]}>{abbreviation}</Avatar>
    ),
    leftAddonType: "avatar",
    label: name,
    value: abbreviation,
    children: (
      <span>
        {name} (<span className="rmd-typography--italic">{abbreviation}</span>)
      </span>
    ),
    rightAddon: <CloseSVGIcon />,
  })
);

export default function WithOptionLeftAddon(): ReactElement {
  const [value, handleChange] = useSelect("");
  const [disableLeftAddon, handleLeftAddonChange] = useChecked(false);
  return (
    <>
      <Checkbox
        id="enable-left-addon"
        label="Disable Left Addon"
        checked={disableLeftAddon}
        onChange={handleLeftAddonChange}
      />
      <Select
        id="select-using-left-addon"
        label="State"
        placeholder="Colorado"
        options={states}
        value={value}
        onChange={handleChange}
        disableLeftAddon={disableLeftAddon}
        displayLabelClassName={styles.label}
      />
    </>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


export interface Dessert {
  name: string;
  calories: number;
  fat: number;
  carbs: number;
  protein: number;
  sodium: number;
  calcium: number;
  iron: number;
  type: "Ice cream" | "Pastry" | "Other";
}

const desserts: readonly Dessert[] = [
  {
    name: "Frozen yogurt",
    type: "Ice cream",
    calories: 159,
    fat: 6.0,
    carbs: 24,
    protein: 4.0,
    sodium: 87,
    calcium: 14,
    iron: 1,
  },
  {
    name: "Ice cream sandwich",
    type: "Ice cream",
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3,
    sodium: 129,
    calcium: 8,
    iron: 1,
  },
  {
    name: "Eclair",
    type: "Pastry",
    calories: 262,
    fat: 16.0,
    carbs: 37,
    protein: 6.0,
    sodium: 337,
    calcium: 6,
    iron: 7,
  },
  {
    name: "Cupcake",
    type: "Pastry",
    calories: 305,
    fat: 3.7,
    carbs: 67,
    protein: 4.3,
    sodium: 413,
    calcium: 3,
    iron: 8,
  },
  {
    name: "Gingerbread",
    type: "Pastry",
    calories: 356,
    fat: 16.0,
    carbs: 49,
    protein: 3.9,
    sodium: 327,
    calcium: 7,
    iron: 16,
  },
  {
    name: "Jelly bean",
    type: "Other",
    calories: 375,
    fat: 0.0,
    carbs: 94,
    protein: 0.0,
    sodium: 50,
    calcium: 0,
    iron: 0,
  },
  {
    name: "Lollipop",
    type: "Other",
    calories: 392,
    fat: 0.2,
    carbs: 98,
    protein: 0.0,
    sodium: 38,
    calcium: 0,
    iron: 2,
  },
  {
    name: "Honeycomb",
    type: "Other",
    calories: 408,
    fat: 3.2,
    carbs: 87,
    protein: 6.5,
    sodium: 562,
    calcium: 0,
    iron: 45,
  },
  {
    name: "Donut",
    type: "Pastry",
    calories: 52,
    fat: 25.0,
    carbs: 51,
    protein: 4.9,
    sodium: 326,
    calcium: 2,
    iron: 22,
  },
  {
    name: "KitKat",
    type: "Other",
    calories: 16,
    fat: 6.0,
    carbs: 65,
    protein: 7.0,
    sodium: 54,
    calcium: 12,
    iron: 6,
  },
];

export default desserts;


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


export default [
  {
    name: "Alabama",
    abbreviation: "AL",
  },
  {
    name: "Alaska",
    abbreviation: "AK",
  },
  {
    name: "American Samoa",
    abbreviation: "AS",
  },
  {
    name: "Arizona",
    abbreviation: "AZ",
  },
  {
    name: "Arkansas",
    abbreviation: "AR",
  },
  {
    name: "California",
    abbreviation: "CA",
  },
  {
    name: "Colorado",
    abbreviation: "CO",
  },
  {
    name: "Connecticut",
    abbreviation: "CT",
  },
  {
    name: "Delaware",
    abbreviation: "DE",
  },
  {
    name: "District Of Columbia",
    abbreviation: "DC",
  },
  {
    name: "Federated States Of Micronesia",
    abbreviation: "FM",
  },
  {
    name: "Florida",
    abbreviation: "FL",
  },
  {
    name: "Georgia",
    abbreviation: "GA",
  },
  {
    name: "Guam",
    abbreviation: "GU",
  },
  {
    name: "Hawaii",
    abbreviation: "HI",
  },
  {
    name: "Idaho",
    abbreviation: "ID",
  },
  {
    name: "Illinois",
    abbreviation: "IL",
  },
  {
    name: "Indiana",
    abbreviation: "IN",
  },
  {
    name: "Iowa",
    abbreviation: "IA",
  },
  {
    name: "Kansas",
    abbreviation: "KS",
  },
  {
    name: "Kentucky",
    abbreviation: "KY",
  },
  {
    name: "Louisiana",
    abbreviation: "LA",
  },
  {
    name: "Maine",
    abbreviation: "ME",
  },
  {
    name: "Marshall Islands",
    abbreviation: "MH",
  },
  {
    name: "Maryland",
    abbreviation: "MD",
  },
  {
    name: "Massachusetts",
    abbreviation: "MA",
  },
  {
    name: "Michigan",
    abbreviation: "MI",
  },
  {
    name: "Minnesota",
    abbreviation: "MN",
  },
  {
    name: "Mississippi",
    abbreviation: "MS",
  },
  {
    name: "Missouri",
    abbreviation: "MO",
  },
  {
    name: "Montana",
    abbreviation: "MT",
  },
  {
    name: "Nebraska",
    abbreviation: "NE",
  },
  {
    name: "Nevada",
    abbreviation: "NV",
  },
  {
    name: "New Hampshire",
    abbreviation: "NH",
  },
  {
    name: "New Jersey",
    abbreviation: "NJ",
  },
  {
    name: "New Mexico",
    abbreviation: "NM",
  },
  {
    name: "New York",
    abbreviation: "NY",
  },
  {
    name: "North Carolina",
    abbreviation: "NC",
  },
  {
    name: "North Dakota",
    abbreviation: "ND",
  },
  {
    name: "Northern Mariana Islands",
    abbreviation: "MP",
  },
  {
    name: "Ohio",
    abbreviation: "OH",
  },
  {
    name: "Oklahoma",
    abbreviation: "OK",
  },
  {
    name: "Oregon",
    abbreviation: "OR",
  },
  {
    name: "Pennsylvania",
    abbreviation: "PA",
  },
  {
    name: "Puerto Rico",
    abbreviation: "PR",
  },
  {
    name: "Rhode Island",
    abbreviation: "RI",
  },
  {
    name: "South Carolina",
    abbreviation: "SC",
  },
  {
    name: "South Dakota",
    abbreviation: "SD",
  },
  {
    name: "Tennessee",
    abbreviation: "TN",
  },
  {
    name: "Texas",
    abbreviation: "TX",
  },
  {
    name: "Utah",
    abbreviation: "UT",
  },
  {
    name: "Vermont",
    abbreviation: "VT",
  },
  {
    name: "Virgin Islands",
    abbreviation: "VI",
  },
  {
    name: "Virginia",
    abbreviation: "VA",
  },
  {
    name: "Washington",
    abbreviation: "WA",
  },
  {
    name: "West Virginia",
    abbreviation: "WV",
  },
  {
    name: "Wisconsin",
    abbreviation: "WI",
  },
  {
    name: "Wyoming",
    abbreviation: "WY",
  },
] as const;


@use "./everything" as *;

@include react-md-utils;


import { useCallback, useState } from "react";

type ChangeHandler = (nextValue: string) => void;

/**
 * A simple hook that memoizes the value and change handler for the select
 * demos. This is really only needed since the set state action from `useState`
 * throws a warning about a second argument being applied since the `onChange`
 * callback for the `Select` is:
 *
 * ```
 * onChange(nextValue: string, option: ListboxOption): void
 * ```
 *
 * This just makes sure that we only use the nextValue for all the demos.
 *
 * @param defaultValue - The default value for the select in the demo
 * @returns an ordered list of value and change handler.
 */
export default function useSelect(
  defaultValue: string
): [string, ChangeHandler] {
  const [value, setValue] = useState(defaultValue);
  const handleChange = useCallback((nextValue: string) => {
    setValue(nextValue);
  }, []);

  return [value, handleChange];
}
