Overview

Drop down lists hide a long list of options, arranged vertically. A person selects the drop down arrow which then reveals the complete list of options.

Make the drop down list optional, otherwise specify with a "Required" caption.

Design

Usage guidelines

Width

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

Select a single option

Use drop down lists when a person 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 are hidden in a drop down list, the visibility is low. It is recommended to use radio buttons whenever possible.

Content guidelines

The first drop down lists 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 drop down 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.

Was this page helpful?

All fields are required unless otherwise indicated.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.