Dropdown

Dropdown allows the user to select from an overlaid vertical list of options. A selected value or values is displayed in the dropdown field, providing a screen space-efficient way of interacting with the list.

Also known as: Select, Picklist
Salt package@salt-ds/core
Available since1.21.0
Code
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Using the component

When to use

  • 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 not to use

  • 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.

Controlled/Uncontrolled

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.

Import

To import Dropdown from the core Salt package, use:

Props

Dropdown

Option

OptionGroup

References