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.
Key | Function |
---|
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.
|