Dropdown
Updated:
March 15, 2020
A dropdown is a selection control where the user can pick one of multiple options. It is often used when there is no room for a toggle button.
Variations
The dropdown can be used with and without an icon.
Standard dropdown
The standard dropdown displays the option currently selected.
Standard dropdown
The standard dropdown displays the option currently selected.
Icon dropdown
Mostly used in containers where it is placed together with icon buttons.
Icon dropdown
Mostly used in containers where it is placed together with icon buttons.
Component building blocks
The next steps explains how the standard and icon dropdown are built up and styled.
Anatomy
A dropdown is built up by a container framing a label and an icon.
Colors and styles
The dropdown uses the normal style.
Typography and icons
The label tells you about your location in the application and makes it easy to access other parts.
Specs
This component is built up by a oval slider and icons.
States
The look of the states are defined by the style.
