Single Select

A standard Select menu. Useful for allowing selection from a list without occupying too much space.

Editable example
() => {
  const [value, setValue] = React.useState("");

  return (
    <Select
      placeholder="Select an option"
      label="Example select"
      value={value}
      onChange={setValue}
    >
      <SelectOption value="option1">Option 1</SelectOption>
      <SelectOption value="option2">Option 2</SelectOption>
      <SelectOption value="option3">Option 3</SelectOption>
    </Select>
  );
}
() => {
  const [value, setValue] = React.useState("");

  return (
    <Select
      placeholder="Select an option"
      label="Example select"
      value={value}
      onChange={setValue}
    >
      <SelectOption value="option1">Option 1</SelectOption>
      <SelectOption value="option2">Option 2</SelectOption>
      <SelectOption value="option3">Option 3</SelectOption>
    </Select>
  );
}

Best practices

1. Use with three or more options. For fewer options, or when the options have very short labels, consider using a SegmentedControl.
2. For long lists, it's better to use the Combobox because it can be searched/filtered.
3. For menus that are triggered by a button and options that perform an action, use an OptionMenu.

Sizes

Like with all controls, match the sizing of the Select with other controls surrounding it. Smaller sizes are used for more densely packed interfaces, while larger sizes are good for less populated forms.

Editable example
() => {
  const [xSmall, setXSmall] = React.useState("");
  const [small, setSmall] = React.useState("");
  const [medium, setMedium] = React.useState("");
  const [large, setLarge] = React.useState("");

  const options = ["Option 1", "Option 2", "Option 3", "Option 4"];

  return (
    <>
      <Select label="Extra Small" placeholder="Select an option" value={xSmall} onChange={setXSmall} size="xs">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Small" placeholder="Select an option" value={small} onChange={setSmall} size="s">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Medium" placeholder="Select an option" value={medium} onChange={setMedium} size="m">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Large" placeholder="Select an option" value={large} onChange={setLarge} size="l">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
    </>
  );
}
() => {
  const [xSmall, setXSmall] = React.useState("");
  const [small, setSmall] = React.useState("");
  const [medium, setMedium] = React.useState("");
  const [large, setLarge] = React.useState("");

  const options = ["Option 1", "Option 2", "Option 3", "Option 4"];

  return (
    <>
      <Select label="Extra Small" placeholder="Select an option" value={xSmall} onChange={setXSmall} size="xs">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Small" placeholder="Select an option" value={small} onChange={setSmall} size="s">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Medium" placeholder="Select an option" value={medium} onChange={setMedium} size="m">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
      <Select label="Large" placeholder="Select an option" value={large} onChange={setLarge} size="l">
        {options.map((option) => (
          <SelectOption key={option} value={option}>{option}</SelectOption>
        ))}
      </Select>
    </>
  );
}

Multi select

Simply use the multiselect prop and provide an array as a value to handle multiple selection.

Editable example
() => {
  const [selected, setSelected] = React.useState([]);

  return (
    <Select
      multiselect
      label="Select a cephalopod"
      placeholder="Select one or more options"
      value={selected}
      onChange={setSelected}
    >
      <SelectOption value="octopus">Octopus</SelectOption>
      <SelectOption value="cuttlefish">Cuttlefish</SelectOption>
      <SelectOption value="squid">Squid</SelectOption>
      <SelectOption value="nautilus">Nautilus</SelectOption>
    </Select>
  );
}
() => {
  const [selected, setSelected] = React.useState([]);

  return (
    <Select
      multiselect
      label="Select a cephalopod"
      placeholder="Select one or more options"
      value={selected}
      onChange={setSelected}
    >
      <SelectOption value="octopus">Octopus</SelectOption>
      <SelectOption value="cuttlefish">Cuttlefish</SelectOption>
      <SelectOption value="squid">Squid</SelectOption>
      <SelectOption value="nautilus">Nautilus</SelectOption>
    </Select>
  );
}

Theme

Control the theme by passing the theme prop a DropdownTheme enum option.

Editable example
() => {
  const [selected, setSelected] = React.useState("");

  return (
    <Card theme={CardTheme.Dark}>
      <div className="space-inset-m">
        <Select
          label="Select a cephalopod"
          placeholder="Select one or more options"
          value={selected}
          onChange={setSelected}
          theme="dark"
        >
          <SelectOption value="octopus">Octopus</SelectOption>
          <SelectOption value="cuttlefish">Cuttlefish</SelectOption>
          <SelectOption value="squid">Squid</SelectOption>
          <SelectOption value="nautilus">Nautilus</SelectOption>
        </Select>
      </div>
    </Card>
  );
}
() => {
  const [selected, setSelected] = React.useState("");

  return (
    <Card theme={CardTheme.Dark}>
      <div className="space-inset-m">
        <Select
          label="Select a cephalopod"
          placeholder="Select one or more options"
          value={selected}
          onChange={setSelected}
          theme="dark"
        >
          <SelectOption value="octopus">Octopus</SelectOption>
          <SelectOption value="cuttlefish">Cuttlefish</SelectOption>
          <SelectOption value="squid">Squid</SelectOption>
          <SelectOption value="nautilus">Nautilus</SelectOption>
        </Select>
      </div>
    </Card>
  );
}

Errors

Use the error prop to display validation error messages.

Editable example
() => {
  const [value, setValue] = React.useState("");

  return (
    <Select
      placeholder="Select an option"
      label="Example select"
      value={value}
      onChange={setValue}
      error="Please select an option"
    >
      <SelectOption value="option1">Option 1</SelectOption>
      <SelectOption value="option2">Option 2</SelectOption>
      <SelectOption value="option3">Option 3</SelectOption>
    </Select>
  );
}
() => {
  const [value, setValue] = React.useState("");

  return (
    <Select
      placeholder="Select an option"
      label="Example select"
      value={value}
      onChange={setValue}
      error="Please select an option"
    >
      <SelectOption value="option1">Option 1</SelectOption>
      <SelectOption value="option2">Option 2</SelectOption>
      <SelectOption value="option3">Option 3</SelectOption>
    </Select>
  );
}

Accessibility

Always provide a meaningful label even when using the labelHidden prop as it will only visually hide te label but still be read by a screen reader.