---
title: OrderedList
description: Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/structure/orderedlist
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/structure/orderedlist.md
---

# Ordered​List

Displays a numbered list of related items in a specific sequence. Use to present step-by-step instructions, ranked items, or procedures where order matters.

## Properties

* id

  string

  A unique identifier for the element.

## ListItem

Represents a single item within an unordered or ordered list. Use only as a child of `s-unordered-list` or `s-ordered-list` components.

* id

  string

  A unique identifier for the element.

### Examples

* #### Code

  ##### Default

  ```html
  <s-ordered-list>
    <s-list-item>Add items to your cart</s-list-item>
    <s-list-item>Review your order details</s-list-item>
    <s-list-item>Complete your purchase</s-list-item>
  </s-ordered-list>
  ```

## Preview

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

## Best Practices

* Use `s-ordered-list` when you need to present items in a specific sequence or order.
* Each item in the list should be wrapped in a `s-list-item` component.
* Keep list items concise and consistent in length when possible.
* Use `s-ordered-list` for step-by-step instructions, numbered procedures, or ranked items.
* Consider using `s-ordered-list` when the order of items is important for understanding.