Dropdown

Also known as

Select, Picklist

Similar to

Available since
@salt-ds/core@1.21.0

Resources

Support

Dropdown allows the user to select from an overlayed vertical list of options. A selected value is displayed in the dropdown field. Dropdowns provide a screen space-efficient way of interacting with a list of selectable options.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Keyboard interactions

KeyFunction
Tab
  • If focus is above the dropdown, Tab sets focus on the component. When focused, dropdown has a visible text cursor and the list is opened.
  • If focus is on dropdown, Tab moves focus to the next focusable element in the tab order and selects the current active option.
Shift + Tab
  • If focus is below the dropdown, this action sets focus on the component.
  • If focus is on dropdown, this action moves focus to the previous focusable element in the tab order and selects the current active option.
Space / Enter
  • If the list is open and focus is on a option that is not disabled, Enter makes a selection.
  • If the dropdown is single-select, the list closes.
  • If the dropdown is multi-select, the list remains open.
Escape
  • If the list is open, closes the list without making a selection, existing text in input field remains. Focus remains on dropdown.
  • If the list is closed, does nothing. Focus remains on dropdown.
Up arrow
  • If the list is open, moves visual focus to the previous option in the list. Focus does not wrap.
  • If the list is closed, opens the list and moves visual focus to the last option in the list.
Down arrow
  • If the list is open, moves visual focus to the next option in the list. Focus does not wrap.
  • If the list is closed, opens the list and moves visual focus to the first option in the list.
Home

When focus is within the dropdown, Home moves focus to the first option.

End

When focus is within the dropdown, this action moves focus to the last option.

Page up

When focus is within the dropdown, this action moves focus to the item before the first visible option.

Page down

When focus is within the dropdown, this action moves focus to the item after the last visible option.

Printable Characters

First opens the list if it is not already displayed and then moves visual focus to the first option that matches the typed character.

  • If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string.
  • If the same character is typed in succession, visual focus cycles among the options starting with that character.

Accessibility considerations

Update 12/17/24: This issue has been resolved in MacOS 15.

Browser/Assistive Technology Combination Issue: We have identified an accessibility issue when using Safari and VoiceOver that affects the usability of combo boxes. This issue is not related to our design system but is a known limitation in the interaction between these specific technologies and can be confirmed using the ARIA Authoring Practices Guide (APG) example on the World Wide Web Consortium (w3c) Who created the Web Content Accessibility Guidelines (WCAG) which is the industry standard on accessibility.

Issue Details:

  • Affected Components: Combobox (role=listbox)
  • OS: MacOS 14
  • Browser: Safari v15+
  • Assistive Technology: VoiceOver
  • Issue Confirmed on: 10/8/24
  • Problem: Focus is not managed correctly when using VoiceOver to select options from the combo box drop-down in Safari

User Impact: VoiceOver users using Safari may experience difficulties when interacting with combo boxes across various websites and applications, not limited to those using our design system.

Steps To Reproduce Using APG:

  1. Go to APG Select-Only Combobox Example using Safari
  2. Turn on VoiceOver
  3. Navigate to the example
  4. Open the combo box using space/enter
  5. Try to navigate and select an option.

Recommendations:

  • Use Chrome or Firefox, or update to MacOS 15.1+
  • Otherwise here is a workaround:
  1. Navigate to the example
  2. Open the combo box using space/enter
  3. VO key and right arrow to put VO focus on the dropdown
  4. VO key+shift and down arrow to go into the dropdown
  5. You should be able to navigate using right and left arrows with feedback
  6. VO key+space to make a selection.

Resources:

Previous Page

Drawer

Next Page

File drop zone