---
title: List
description: >-
  Lists display a set of related content. Each list item usually begins with a
  bullet or a number.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/list
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/other/list.md
---

# List

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

## ListProps

* accessibilityLabel

  string

  A label that describes the purpose or contents of the list. When set, it will be announced to buyers using assistive technologies and will provide them with more context.

* id

  string

  A unique identifier for the component.

* marker

  Marker

  Default: 'bullet'

  Type of marker to display

* spacing

  MaybeResponsiveConditionalStyle\<Spacing>

  Default: 'base'

  Adjust spacing between list items

### Marker

```ts
'none' | 'bullet' | 'number'
```

### MaybeResponsiveConditionalStyle

A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. To learn more check out the \[conditional styles]\(/api/checkout-ui-extensions/components/utilities/stylehelper) documentation.

```ts
T | ConditionalStyle<T, ViewportSizeCondition>
```

### ConditionalStyle

* conditionals

  An array of conditional values.

  ```ts
  ConditionalValue<T, AcceptedConditions>[]
  ```

* default

  The default value applied when none of the conditional values specified in \`conditionals\` are met.

  ```ts
  T
  ```

```ts
export interface ConditionalStyle<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The default value applied when none of the conditional values
   * specified in `conditionals` are met.
   */
  default?: T;
  /**
   * An array of conditional values.
   */
  conditionals: ConditionalValue<T, AcceptedConditions>[];
}
```

### ConditionalValue

* conditions

  The conditions that must be met for the value to be applied. At least one condition must be specified.

  ```ts
  AcceptedConditions
  ```

* value

  The value that will be applied if the conditions are met.

  ```ts
  T
  ```

```ts
export interface ConditionalValue<
  T,
  AcceptedConditions extends BaseConditions = Conditions,
> {
  /**
   * The conditions that must be met for the value to be applied. At least one
   * condition must be specified.
   */
  conditions: AcceptedConditions;
  /**
   * The value that will be applied if the conditions are met.
   */
  value: T;
}
```

### ViewportSizeCondition

* viewportInlineSize

  ```ts
  { min: T; }
  ```

```ts
export interface ViewportSizeCondition<T = ViewportInlineSize> {
  viewportInlineSize: {min: T};
}
```

### Spacing

```ts
'none' | 'extraTight' | 'tight' | 'base' | 'loose' | 'extraLoose'
```

### Examples

* #### Basic List

  ##### React

  ```tsx
  import {
    reactExtension,
    List,
    ListItem,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    return (
      <List>
        <ListItem>100% organic cotton</ListItem>
        <ListItem>Made in Canada</ListItem>
        <ListItem>Machine washable</ListItem>
      </List>
    );
  }
  ```

  ##### JS

  ```js
  import {extension, List, ListItem} from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const list = root.createComponent(List, undefined, [
      root.createComponent(ListItem, undefined, '100% organic cotton'),
      root.createComponent(ListItem, undefined, 'Made in Canada'),
      root.createComponent(ListItem, undefined, 'Machine washable'),
    ]);

    root.appendChild(list);
  });
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/list-default.png)

## Best Practices

* Use lists to break up chunks of related content to make the information easier for customers to scan.

* Phrase list items consistently. Try to start each item with a noun or a verb and be consistent with each item.

* Use bullets for a text-only list of related items that don’t need to be in a specific order.

* Use numbers for a text-only list of related items when you need to communicate order, priority, or sequence.

* Don’t use a marker when only the semantic value of a list matters, such as with a list of links.

## Related

[Component - ListItem](listItem)