Multi-option dropdown

Labels

• Avoid using generic single-word labels, like Name or ID for dropdown labels.
• The ambiguous nature of these labels can cause users to be confused about their meaning.
• Also, Name or ID fields from other sources might appear on the same screen, causing confusion.
• Instead, always add a modifier to generic single-word labels, like Name or ID. For example:
• Employee name
• Project ID
• Expense type

Hint text

Use hint text only if the dropdown label does not provide enough context to help users interact with the field.

• Write hint text in full sentences with ending punctuation. This makes screen readers pause before reading out any error or warning message after the hint text.
• Do not use hint text that repeats the message in the dropdown label.

Placeholder text

You can use placeholder text if it does not provide critical information for users but instead provides a small amount of additional context.

• Make sure to provide enough context in the dropdown label and hint text so that users can easily interact with the dropdown without the aid of the placeholder text.

Requirements

Users should be able to:

• Navigate to the dropdown using assistive technology. 
• Navigate through and select an item from the list.
• Type into the input to filter options.
• Select and deselect multiple items within a list.

Interactions

Mouse interactions

• Clear hover states should be shown for mouse users, giving a visual affordance of which option is selected
• Pills used to show selected items should be removed by clicking on the ‘X’ button within the pill.

Keyboard interactions

• Tab. Moves focus from the previous interactive element on the page to the filterable dropdown.
• Typing within the input filters the list down to relevant items.
• Pressing tab again moves focus to the next interactive element on the page.
• Space. Activates a dropdown list of options.
• Focus indicator remains on the input. A secondary focus is provided for the elements within the list.
• Arrow up and Arrow down. Moves focus between options within the list.
• Enter. Selects an element within the list.
• Escape. Closes the list.
• Backspace. Removes pills and deselects options.

Design considerations

• The dropdown should have a clear, visible label, allowing users to understand its purpose.
• Use clear visible hover states so users can see which item currently has focus.
• Make sure all hover and focus states within the list have a minimum contrast ratio of 4.5:1 against the text.
• Make sure the input border has 3:1 minimum contrast ratio with the background.
• Make sure all pills have a 4.5:1 minimum contrast ratio between the text and the background of the pill.

Development considerations

• The input should be marked up as a combobox, using the input element with a role=”combobox”.
• The list of options should have role=”listbox” to allow screen reader users to interact with the list of options.
• The listbox should have an aria-multiselectable=”true” attribute, so that screen readers are aware they can select multiple items.
• The input should have an aria-controls attribute, pointed at the id of the listbox to allow screen reader users to understand the relationships between the elements.
• The input should have an aria-activedescendant attribute, pointing to the id of the focused option to allow screen reader users to know which element in the listbox is currently focused.
• The id of the selected element should be adjusted as other elements are navigated to.
• The input should have an aria-expanded attribute to let screen reader users know if the list is open or closed.
• Use JavaScript to toggle both the true and false states of the aria-expanded attribute.
• Listbox items should be wrapped in an unordered list ul with options being list items li.
• Each option should have role=”option”.
• Make sure the ‘remove’ options on pills are not focusable using the keyboard, or announced to screen reader users.