List

Lists display a set of related text-only content. Each list item begins with a bullet or a number.

Examples

Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator.

Drag to resize example

Props

children
React.ReactNode
List item elements
type
"bullet" | "number"
Type of list to display

Accessibility

The list component outputs list items (<li>) inside a list wrapper (<ul> for bullet lists or <ol> for numbered lists). By default, list items are conveyed as a group of related elements to assistive technology users.

To group items for layout only, consider using the stack component.

Bulleted list

Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator.

Bulleted list on Android

Numbered list

Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.

Numbered list on Android

Accessibility

See Material Design and development documentation about accessibility for Android:

Bulleted list

Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator.

Bulleted list on iOS

Numbered list

Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.

Numbered list on iOS

Accessibility

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

Best practices

Lists should:

  • Break up chunks of related content to make the information easier for merchants to scan
  • Be phrased consistently (e.g. try to start each item with a noun or a verb and be consistent with each item)
  • Not be used for lists where the entire item represents an action

Content guidelines

List items

Every item in a list should:

  • Start with a capital letter
  • Not use commas or semicolons at the end of each line
  • Red

  • Yellow

  • Blue

  • Red;

  • Yellow;

  • Blue.

  • Be written in sentence case
  • Item one

  • Item two

  • Item three

  • Item One

  • Item Two

  • Item Three