Dropdown Component

Dropdown displays a list of options which the user can choose one or multiple options. Used for displaying 5 or more options.

Dropdown Variations

Default
When the dropdown appears but no options are selected yet. The option is active to be clicked and selected.
Hover
When the cursor is on top of the option indicating the option is active and possible to be selected.
Selected
Indicating to the user that the option has been selected
Disabled
Used when the option cannot be clicked / selected.

Guideline

• Only appears when the cursor is hovering over the selected item.
• Should contain a brief read-only text label.
• On default, tooltips are placed on top of the selected item. But when there isn’t enough space in the viewport, it should be placed to the side or below as needed.

When to Use

• To clarify or give more contextual information about the item being displayed.
• To show information in a form of short and brief sentences.
• Provide context for unlabeled icon buttons.

When not to Use

• Not to display the same thing as the hovered item. For example, providing tooltip labelled “confirm” for an action button labelled “confirm”
• Long complex format information.
• Having action button or link.

Code