Also known as

Select, Picklist

Dropdown allows the user to select from an overlayed vertical list of options. A selected value is displayed in the dropdown field. Dropdowns provide a screen space-efficient way of interacting with a list of selectable options.

  • When a user needs the ability to choose one value from a set of five to 10 options.
  • When only the selected value from a set of options needs to be visible once the selection is made.
  • When you have more than 10 options and users would benefit from filtering to narrow down the available options. Instead, use ComboBox.
  • When you have fewer than five options and need to one option to be selected. Instead, use RadioButtonGroup.
  • When you have fewer than five options and multiple selections are required, or possible. Instead, use CheckboxGroup.
  • If you have a Boolean selection, for instance “on” or “off”. Instead, use Switch.
  • When you have large number (>100) of list items, to prevent performance issues without virtualization, we strongly recommend adding a filter e.g. use a ComboBox instead.

Just like native input elements in React, dropdowns can be controlled or uncontrolled. By default a dropdown is uncontrolled. Use the defaultSelected prop to control the default value of the dropdown.

If you want to control the value of the dropdown, use the value and selected props. The onSelectionChange prop is required when using the controlled approach.

To import Dropdown from the core Salt package, use: