Dropdowns must feature a label stating the current selection and a menu of at least two, preferably three option.
Dropdown labels communicate what selections the component conveys. Labels are obligatory for dropdowns.
Icons might simplify identification for the available selection in dropdowns by the user.
Dropdowns appear button like with obligatory 'down' indicator as identifier.
States of dropdowns
Dropdowns have following visually separate states:
Note that disabled dropdowns are not following our minimal color contrasts elsewhere. WCAG 2.1 state that “…part[s] of an inactive user interface component […] have no contrast requirement”.
Provide sufficient information in disabled elements context to clarify to user what is disabled and how to enable component if useful instead.