Select Component Browser Basics

To create a Select component (also called Combo Box / List Box / Drop Down in UX / Software Development) we use the select, option and label html tags.

This is demonstrated below where we don't use React and just provide and render a browser controlled component.

App.tsx

export default function App() {
  return (
    <>
      <label htmlFor="pet">Choose a pet</label>
      <select id="pet">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="parrot">Parrot</option>
        <option value="chicken">Chicken</option>
      </select>
    </>
  );
}

Some additional user tips:

You can click on the label to focus the select thanks to the id linking
You can navigate the select with the space-bar and arrow keys

Controlled Select component with React

We can wire the select to a state so that it is controlled by React. For this purpose we use the select.value and select.onChange props.

This is demonstrated below.

App.tsx

import { useState } from 'react';

export default function App() {
  /** Create a state variable to store the selected value */
  const [value, setValue] = useState('dog');

  return (
    <>
      <label htmlFor="pet">Choose a pet</label>
      {/* Wire the `value` and `onChange` props */}
      <select id="pet" value={value} onChange={(e) => setValue(e.target.value)}>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="parrot">Parrot</option>
        <option value="chicken">Chicken</option>
      </select>
      {/* Display an icon based on the selected value */}
      {{
        'dog': '🐕',
        'cat': '🐈',
        'parrot': '🦜',
        'chicken': '🐓'
      }[value]}
    </>
  );
}

Making a Select Optional

For an optional select we recommend using an option with dedicated display string but an empty string ('') as its value.

This is demonstrated below.

App.tsx

import { useState } from "react";

export default function App() {
  /** Start off with an empty value */
  const [value, setValue] = useState("");

  return (
    <>
      <label htmlFor="pet">Choose a pet</label>
      <select id="pet" value={value} onChange={(e) => setValue(e.target.value)}>
        {/* Something to display for an empty value */}
        <option value="">None</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="parrot">Parrot</option>
        <option value="chicken">Chicken</option>
      </select>

      {{
        'dog': '🐕',
        'cat': '🐈',
        'parrot': '🦜',
        'chicken': '🐓'
      }[value]}
    </>
  );
}

Creating a custom component

Creating a custom component for a select is very similar to what we did for a radio group.

An example custom component is demonstrated below in Select.tsx. Note this our custom Select has a few advanced features baked in:

We sort the inputs and cache the sorting with the useMemo hook.
When sorting we keep the option with the empty value ('') on top.
We ensure that the select can be reused multiple times on the same document by utilising the useId hook.

Select.tsx

App.tsx

import { useId, useMemo } from 'react';

export type SelectProps = {
  label: string,
  value: string,
  onChange: (value: string) => void,
  options: { value: string, label: string }[],
};

export const Select = ({ label, value, onChange, options }: SelectProps) => {
  const id = useId();
  const ordered = useMemo(
    () => [...options].sort((a, b) => a.value === '' ? -1 : a.label.localeCompare(b.label)),
    [options]
  );
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <select id={id} value={value} onChange={e => onChange(e.target.value)}>
        {ordered.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
};

Transcript