Drop down list

Overview

Drop down lists hide a list of options, arranged vertically. You select the downward arrow which then reveals the complete list of options.

Design

Usage guidelines

• Use a drop down list when you may only select one option from a list of 7 or more options. Use radio buttons when 7 or less options are available to choose from.
• Since all the options but one is hidden in a list, the visibility is low. It is recommended to use radio buttons whenever possible.
• Make the drop down list optional, otherwise specify with a ’Required’ caption.

Accessibility

To show the label drops down, use blue text and Chevron blue. When hovering over the label with the mouse, the label turns Chevron Black (#333333).

See Typography for more accessibility standards.

Size and positioning

Drop down lists are responsive and range in width from 272 pixels on small screens up to 550 pixels on desktop.

Content guidelines

• The first drop down list option needs a label and precedes a downward arrow selection to open the list.
• The first visible option is the most common or default option of the set. Do not use the first option as a descriptor or label of the list.
• Each option should be a brief word, description, or name.
• Limit character count to 30 characters with spaces per option.