Dropdown

The dropdown is a form control that allows the user to select from a set of options.

When to use

Limited & specific selection

Dropdowns are optimal when you have a specific set of answers that user selects from

Limited & specific selection

Dropdowns are optimal when you have a specific set of answers that user selects from

Limited & specific selection

Dropdowns are optimal when you have a specific set of answers that user selects from

Compact design

Due to their compact design, you may opt to use a dropdown instead of a checklist or radio group to use less space

Compact design

Due to their compact design, you may opt to use a dropdown instead of a checklist or radio group to use less space

Compact design

Due to their compact design, you may opt to use a dropdown instead of a checklist or radio group to use less space

When to avoid

Too many options

To avoid having users scroll through a long list, you may consider a typeahead/autocomplete if the user is familiar with the options given in the dropdown menu

Too many options

To avoid having users scroll through a long list, you may consider a typeahead/autocomplete if the user is familiar with the options given in the dropdown menu

Too many options

To avoid having users scroll through a long list, you may consider a typeahead/autocomplete if the user is familiar with the options given in the dropdown menu

Lack of visibility

To avoid selections being hidden from view when selecting, you may consider a radio group instead

Lack of visibility

To avoid selections being hidden from view when selecting, you may consider a radio group instead

Lack of visibility

To avoid selections being hidden from view when selecting, you may consider a radio group instead

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.

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.

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

Valued

Placeholder

Valued

Placeholder

Valued

Placeholder

Valued

Placeholder

States

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Default

Error

Focused

Disabled

Anatomy

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.

Lead icon

Is optional and may help indicate the content of the dropdown.

Assistive text

A persistent message below the field to provide guidance or context (e.g. "You can only select one option").

Text

Can be either a placeholder or valued text to display the selected item.

Trailing icon

Indicates whether the dropdown is expanded to display its menu.

Value

Dropdown