Dropdown

Also known as

Select, Picklist
Available since
@salt-ds/core@1.21.0

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.

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.