Choice list

    A choice list lets you create a list of grouped radio buttons or checkboxes.

    Examples

    Down Arrow

    Allows merchants to select one option from a list.Make sure all options are an either/or choice.

    Use this component if you need to group together a related list of interactive choices.


    Best practices

    Choice lists should:

    • Include a title that tells merchants what to do or explains the available options
    • Label options clearly based on what the option will do
    • Avoid mutually exclusive options when allowing multiple selection

    Content guidelines

    List titles

    List titles should:

    • Help merchants understand how the items in the list are grouped together, or should explain what kind of choice merchants are making

    Do

    Pick a shipping method

    Don’t

    Pick one

    • Be concise and scannable:
      • Use simple, clear language that can be read at a glance
      • Keep list titles to a single sentence
      • It the title introduces the list, it should end with a colon
      • Should be written in sentence case

    Do

    Shipping options

    Don’t

    Shipping Options

    • Not use colons

    Do

    If the customer abandons their checkout, send them an email reminder to complete their order



    Don’t

    If the customer abandons their checkout, send them an email reminder to complete their order:



    List choices

    Every item in a choice list should:

    • Start with a capital letter

    Do

    • Option 1
    • Option 2
    • Option 3

    Don’t

    • option 1
    • option 2
    • option 3
    • Not use commas or semicolons at the end of each line

    Do

    • Red
    • Yellow
    • Blue

    Don’t

    • Red;
    • Yellow;
    • Blue.
    • Be written in sentence case (the first word capitalized, the rest lowercase)

    Do

    • Item one
    • Item two
    • Item three

    Don’t

    • Item One
    • Item Two
    • Item Three

    Helper text and descriptions

    If your list contains helper text, only the description below the list item should contain punctuation.



    Accessibility

    See Material Design and development documentation about accessibility for Android:

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

    The choice list component uses the accessibility features of the checkbox and radio button components.