List

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

List component 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.

import {List} from '@shopify/polaris';
import React from 'react';

function ListExample() {
  return (
    <List type="bullet">
      <List.Item>Yellow shirt</List.Item>
      <List.Item>Red shirt</List.Item>
      <List.Item>Green shirt</List.Item>
    </List>
  );
}

Props

interface ListProps

gap?'extraTight' | 'loose': Determines the space between list items.
Defaults to 'loose'.
type?'bullet' | 'number': Type of list to display.
Defaults to 'bullet'.
children?React.ReactNode: List item elements.

Best practices

Lists should:

Break up chunks of related content to make the information easier for merchants to scan
Be phrased consistently (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

Don't

Red;
Yellow;
Blue.

Be written in sentence case

Item one
Item two
Item three

Don't

Item One
Item Two
Item Three

To create a list of checkboxes or radio buttons, use the choice list component
To present a collection of objects of the same type such as customers, products, or orders, use the resource list component
When text labels for each item are useful for describing the content, use the Description List component

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 vertical stack component.