Components

Dropdowns

Using dropdowns

Dropdowns must feature a label stating the current selection and a menu of at least two, preferably three option.

dropdowns visual design and states

Designing

dropdown design properties

Label
Dropdown labels communicate what selections the component conveys. Labels are obligatory for dropdowns.

Icon (optional)
Icons might simplify identification for the available selection in dropdowns by the user.

Down indicator
Dropdowns appear button like with obligatory 'down' indicator as identifier.

See WikimediaUI Figma dropdowns component.

States of dropdowns

Dropdowns have following visually separate states:

dropdowns 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”.[1]
Provide sufficient information in disabled elements context to clarify to user what is disabled and how to enable component if useful instead.

Coding

See OOUI's demos section of dropdowns.

References

  1. Web Content Accessibility Guidelines (WCAG) 2.1 – Success Criterion 1.4.3 Contrast (Minimum)