List

Lab component

Also known as

Listbox, Menu, Option List, Selection List

ListNext and ListItemNext allow the user to select an item from an array of options. Selected items are visually distinct from nonselected items. To ensure efficient space usage, long lists of items are in a scrolling pane that can provide access to options not immediately visible to the user.

KeyFunction
Tab

If focus is above the list, Tab moves focus to one of the following items depending on previous user interaction:

  • The last selected item
  • The last item with focus
  • The first item in the list
Shift + Tab

If focus is below the list, this action moves focus to the list item that last had focus or the first item in the list.

Space / Enter

When focus is on a list item, this action selects the item and deselects the previously selected item, if any.

Up arrow

Up arrow moves focus to the previous item in the list. If focus is on the first item, the next key press retains focus on the first item. It doesn't wrap focus to the last item in the list.

Down arrow

Down arrow moves focus to the next item in the list. If focus is on the last item, the next key press retains focus on the last item. It does not wrap focus back to the first item in the list.

Home

When focus is within the list, Home moves focus to the first list item.

End

When focus is within the list, End moves focus to the last list item.