SOrderedList <s-ordered-list>

A numbered list. SOrderedList is the typed Vue 3 wrapper for Shopify's Polaris <s-ordered-list> web component.

import { SOrderedList } from 'polaris-vue-elements'

Best practices

• Use it when the sequence means something. Numbered lists convey order, priority or ranking, so they fit step-by-step instructions or ranked recommendations. If the order is irrelevant, use SUnorderedList instead.
• Write items the same way. Give every item matching grammar and structure so the list reads easily. Switching styles from item to item makes readers work harder.
• Keep each item short. Lists work because they're quick to scan. If items grow long or involved, consider breaking them out into their own sections.
• Don't nest too deeply. One level of nesting can organize related points, but going past two levels gets hard to follow and suggests the content needs a different structure.

<SOrderedList>
  <SListItem>Choose a shipping carrier</SListItem>
  <SListItem>Print the shipping label</SListItem>
  <SListItem>Mark the order as fulfilled</SListItem>
</SOrderedList>

See Shopify's best practices for <s-ordered-list> for the full guidance.

Example

Free shipping over $5030-day returns24/7 customer supportAdd items to your cartReview your orderConfirm and check out

<script setup>
import { SUnorderedList, SOrderedList, SListItem, SStack } from 'polaris-vue-elements'
</script>

<template>
  <SStack direction="inline" gap="large-500" alignItems="start">
    <SUnorderedList>
      <SListItem>Free shipping over $50</SListItem>
      <SListItem>30-day returns</SListItem>
      <SListItem>24/7 customer support</SListItem>
    </SUnorderedList>
    <!-- SOrderedList renders its SListItem children as a numbered list. -->
    <SOrderedList>
      <SListItem>Add items to your cart</SListItem>
      <SListItem>Review your order</SListItem>
      <SListItem>Confirm and check out</SListItem>
    </SOrderedList>
  </SStack>
</template>

Props

Prop	Type	Description
children	any	The content of the OrderededList. Accepts only ListItem components.
id	string | undefined	A unique identifier for the element.

Slots

Slot	Description
default	The list entries displayed within the ordered list, where each item is numbered sequentially. Only accepts list item components as children. Each list item represents a single numbered entry in the sequence.