Select

The Select component allows the user to click and select an item from a list of options.

Import

Select: The select component
DropdownItem: A helper component designed to represent a complex item inside a list.

Basic usage

type Option = { key: string; label: string };

const costCenters: (Option & { owner: string })[] = [
  {
    key: "marketing",
    label: "Marketing",
    owner: "Michael Murphy",
  },
  // ...
];

const Demo = () => {
  const [selectedOption, setSelectedOption] = useState<Option>();

  return (
    <Select
      fit="parent"
      placeholder="Select a cost center"
      options={costCenters}
      value={selectedOption}
      onSelect={setSelectedOption}
    />
  );
};

Placement

Use the placement prop to move the list of options above or below the Select.

<>
  <Select placement="bottom-start" {...otherProps} />
  <Select placement="top-start" {...otherProps} />
</>

Customization

Max height

The dropdownContentMaxHeight prop is used to define a maximum height for the select's dropdown content. It defaults to 152px.

<Select dropdownContentMaxHeight="232px" {...otherProps} />

Customized option

Use the renderOption prop to customize how options are rendered.

<Select
  renderOption={(option: CostCenter, optionState) => (
    <DropdownItem
      label={`${option.label} (${option.owner})`}
      {...optionState}
    />
  )}
  {...otherProps}
/>