The dropdown is a form control that allows the user to select from a set of options.
When to use
When to avoid
Specifications
Label placement
Stacked
Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.
Left to Right
Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.
Content
States
Anatomy
1
Label
Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.
2
Lead icon
Is optional and may help indicate the content of the dropdown.
3
Assistive text
A persistent message below the field to provide guidance or context (e.g. "You can only select one option").
4
Text
Can be either a placeholder or valued text to display the selected item.
5
Trailing icon
Indicates whether the dropdown is expanded to display its menu.