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.

States of dropdowns

Dropdowns have following visually separate states:

dropdowns states

Coding

See OOUI's demos section of dropdowns.