Status
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
Dropdowns present users with a list or menu of options. Users can filter these options and select multiple options concurrently.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Documentation | In progressElement design and development in progress |
Dropdown is a new component for the Dell Design System v2. It incorporates the updated font ramp and color palette, in addition to accessibility enhancements.
Component | Use case |
---|---|
Dropdown | Use the dropdown component to filter, sort, or change page content. Unlike the select component, dropdown can be styled to match the look and feel of a product or application. Dropdowns use multiple concurrent selections, filtering, and grouping to accommodate long lists. |
Select | Use the select component if the user must select only one option from a list of more than five options. Select and dropdown are visually similar, however, the appearance of the select component will be determined by browser and device settings. Consider using select if your product or application is prioritizing mobile experiences. |
Action menu | Use action menu if you have limited space and need to display overflow actions in a list. A selection should trigger the action immediately, and can include both single-select and multi-select options. |
The dropdown component is composed of two main parts: a prompt and a menu option list. The component is customizable so that it can accommodate multiple design objectives. Customizations can affect the dropdown’s anatomy and appearance depending on its intended use. The following example shows both parts of a single-select dropdown with a simple list and all possible elements.
The dropdown prompt consists of four primary elements:
When the user expands the dropdown, the options are visible: