Dropdown menus

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular

<cpc-ds-dropdown
    labelText="Default State"
    labelId="dropdown-label"
    [selectOptions]="selectOptions"
    [selected]="selected"
    [control]="selectFormControl"
    errorMsgRequired="Please select an option">
</cpc-ds-dropdown>

interface SelectOptions {
  name: string;
  value: string;
}

selectOptions: SelectOptions[] = [
 { name: '---', value: '' },
 { name: 'Dog', value: 'Woof!' },
 { name: 'Cat', value: 'Meow!' },
 { name: 'Cow', value: 'Moo!' },
 { name: 'Fox', value: 'Wa-pa-pa-pa-pa-pa-pow!' }
];

HTML

<script src="[JS-PLACE-HOLDER]"></script> 
<script>DSCpcSelects.init();</script>

<label id="custom-dropdown-label">Choose year</label>
<select 
    id="custom-dropdown" 
    aria-labelledby="custom-dropdown-label errMsg1" 
    aria-invalid="true" 
    class="ds-cpc-control-select__tpl error" 
    style="display: none;">
 <option selected="selected" value="">Select year</option>
 <option value="2013">2013</option>
 <option value="2012">2012</option>
 <option value="2011">2011</option>
</select>

<div id="errMsg1" class="ds-error">Error message goes here</div>

General guidelines

Dropdown menu display a list of options that the user can select. It consists of a dropdown menu label, input field, input field text and the menu options.

Dropdown menus should be used when there are between 6 and 15 options to display. Keep dropdowns succinct to avoid scrolling. The scrollbar should be persistent. Try to let users see all the available options up front.

Consider using radio buttons or checkboxes if you have less than 6 options.

In the case of more than 15 options, consider using an open input field (e.g. asking for birth year). You can also let users narrow in on menu options by typing letters. For example, if they want to choose “France”, they can click on the menu field and start typing “F, R” to jump to “France” in the list.

Ordering the menu items

Use context to order the options in a dropdown menu. When contextual organization isn’t available, alphabetize the options or order them on a scale (e.g. youngest to oldest when selecting an age range.)

Positioning

Dropdown menus are stacked on a form. In cases where the dropdown menus are related information, place them side by side (for example, selecting a time range).

Labels

Place a descriptive label above the dropdown menu to clearly let users know what options to expect. This also keeps the user focused on the task they’re trying to complete.

Responsive design

Dropdown menu UI is applied the same way consistently across different devices.

Work with your writer to keep text short and concise.

If you have text that is too long to be displayed in full on a smaller device, truncate the text using an ellipsis. The truncation generally happens automatically for menu items at around 36 characters (depending on a user’s mobile device).

Interaction

States

A dropdown consists of an interactive header element that shows the selected option and the flyout element, which shows the available options.

1. Default
   The default state is how the dropdown menu appears before users make a selection.
   
   

   In some cases, you may include a preselected option in the menu, but only if you are certain most users will choose that response.

2. Focus
   Dropdown menus have a field focus, and a menu focus.
   
   

   Field focus activates when a user navigates to a dropdown component. This state activates by wrapping the dropdown field in a box, indicating that further interaction will open it.

   Menu focus activates after opening a dropdown by highlighting the currently selected menu item. Using the keyboard to navigate items will move the focus state accordingly.

3. Hover
   When a mouse is used to hover over a menu item, it will be highlighted.
4. Disabled
   In the disabled state, a dropdown is visible but cannot be interacted with. Faded colours are used to distinguish disabled dropdowns from active ones.

Accessibility considerations

Keyboard accessibility

Users navigate to dropdowns using tab, accessing and navigating options using arrow keys. Enter or spacebar will confirm their selection.

Design specs

For all screen sizes.

General guidelines

Use clear, concise and descriptive language to help the user select an option from the dropdown menu. Expect users to simply scan the list items. Use a single line of text for each option.

Guidelines

Focus halo

Dropdown menus should have a prominent focus outline when they're focused or hovered. The options in the dropdown menu should also be highlighted when they're focused or hovered.

Keyboard interaction

When the dropdown menu has focus:

• Alt + down arrow displays the options menu (expanded state)
• Enter displays the options menu (expanded state)
• Spacebar displays the options menu (expanded state)
• Down arrow selects the next option in the Combobox
• Up arrow selects the previous option in the Combobox

When the dropdown menu is expanded and the options menu has focus:

• Enter selects the focused option and collapses the options menu
• End sets the focus on the last option
• Home sets the focus on the first option
• Down arrow sets the focus to the next option
• Up Arrow sets the focus to the previous option

Testing

When testing a dropdown menu, the tester must ensure:

• The dropdown menu is fully keyboard operable
• Indications for the focused and hovered states are clear and prominent
• The dropdown menu has the role of “combobox”
• The screen reader announces the dropdown label, role, its current value, state (expanded/collapsed), hint text (if present), and error text (if present)