Select lets merchants choose one option from an options menu. Consider select when you have 4 or more options, to avoid cluttering the interface.


    Down Arrow

    Presents a classic dropdown menu or equivalent picker as determined by merchants’ browsers.The iOS picker expands in-line. Merchants scroll to select the item they want. The Android menu is similar in behavior to the web dropdown.

    Best practices

    The select component should:

    • Be used for selecting between 4 or more pre-defined options
    • Have a default option selected whenever possible
    • Use “Select” as a placeholder option only if there’s no logical default option

    Content guidelines

    Select label

    Labels should:

    • Give a short description (1–3 words) of the requested input.
    • Be written in sentence case (the first word capitalized, the rest lowercase).
    • Avoid punctuation and articles (“the”, “an”, “a”).
    • Be independent sentences. To support internationalization, they should not act as the first part of a sentence that is finished by the component’s options.
    • Be descriptive, not instructional. If the selection needs more explanation, use help text below the field.


    • Email address


    • What is your email address?


    • Phone number


    • My phone number is:

    Select options

    Options should:

    • Start with “Select” as a placeholder if there isn’t a default option
    • Be listed alphabetically or in another logical order so merchants can easily find the option they need
    • Be written in sentence case (the first word capitalized, the rest lowercase) and avoid using commas or semicolons at the end of each option
    • Be clearly labelled based on what the option will do

    • To let merchants select one option from a list with less than 4 options, use the choice list component
    • To create a select where merchants can make multiple selections, or to allow advanced formatting of option text, use an option list inside a popover