Listbox

    A Listbox is a vertical list of interactive options, with room for icons, descriptions, and other elements.

    Examples

    Down Arrow

    Basic implementation of a control element used to let merchants select options


    Anatomy

    A diagram of the Listbox component showing the smaller primitive components it can be composed of.

    A listbox can be composed of:

    1. Options: The individual options inside the Listbox that merchants can select or deselect.
    2. Dividers: Placed between items and are useful in complex lists when there’s a lot of information for the merchant to parse.
    3. Section headers: Used at the begining of a section when it’s necessary to call out the content being displayed. In most cases, the surrounding context should be enough for the merchant to understand the information in the list.

    Best practices

    Listboxes should:

    • Be clearly labeled so it’s noticeable to the merchant what type of options will be available
    • Limit the number of options displayed at once
    • Indicate a loading state to the merchant while option data is being populated

    Content guidelines

    Option lists

    Each item in a Listbox should be clear and descriptive.

    Do

    • Traffic referrer source

    Don’t

    • Source

    Patterns that use Listbox

    Location picker



    Accessibility

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    Structure

    The Listbox component is based on the Aria 1.2 Listbox pattern.

    It is important to not present interactive elements inside of list box options as they can interfere with navigation for assistive technology users.

    Do

    • Use labels

    Don’t

    • Use interactive elements inside the list

    Keyboard support

    • Access the list of options with the up and down arrow keys
    • Select an option that has focus with the enter/return key