Dropdown

Dropdown allows the user to select from an overlaid 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.

Also known as: Select, Picklist

View source 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

Dropdown usability (https://baymard.com/blog/drop-down-usability)
Listboxes vs. Dropdown Lists, (https://www.nngroup.com/articles/listbox-dropdown/) NN Group, April 12, 2020

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.

Dropdown usability (https://baymard.com/blog/drop-down-usability)
Listboxes vs. Dropdown Lists, (https://www.nngroup.com/articles/listbox-dropdown/) NN Group, April 12, 2020

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.

Dropdown usability (https://baymard.com/blog/drop-down-usability)
Listboxes vs. Dropdown Lists, (https://www.nngroup.com/articles/listbox-dropdown/) NN Group, April 12, 2020