---
components: ["OrderedList", "ListItem"]
---

<script>
  import { InlineNotification, OrderedList, ListItem, Link } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

`OrderedList` provides a structured way to display numbered lists of items. It supports nested lists, native browser styles, and expressive typography for enhanced visual hierarchy.

<InlineNotification svx-ignore lowContrast title="Tip:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Consider using the <Link href="/components/RecursiveList#ordered">RecursiveList</Link> component for rendering tree structured data.
  </div>
</InlineNotification>

## Default

Create a basic ordered list by wrapping `ListItem` components within `OrderedList`.

<OrderedList>
  <ListItem>Ordered list item</ListItem>
  <ListItem>Ordered list item</ListItem>
  <ListItem>Ordered list item</ListItem>
</OrderedList>

## With links

Add interactive elements like `Link` components within list items.

<OrderedList>
  <ListItem>
    <Link href="#">Ordered list item</Link>
  </ListItem>
  <ListItem>
    <Link href="#">Ordered list item</Link>
  </ListItem>
  <ListItem>
    <Link href="#">Ordered list item</Link>
  </ListItem>
</OrderedList>

## Nested

Set the `nested` prop to `true` to create hierarchical lists with proper indentation and numbering.

<OrderedList>
  <ListItem>
    Ordered list level 1
    <OrderedList nested>
      <ListItem>Ordered list level 2</ListItem>
      <ListItem>
        Ordered list level 3
        <OrderedList nested>
          <ListItem>Ordered list level 3</ListItem>
          <ListItem>Ordered list level 3</ListItem>
        </OrderedList>
      </ListItem>
    </OrderedList>
  </ListItem>
  <ListItem>Ordered list level 1</ListItem>
  <ListItem>Ordered list level 1</ListItem>
</OrderedList>

## Native list styles

Enable native browser list styles by setting the `native` prop to `true`. This is useful for large lists where the list number may overlap with the list item text.

<OrderedList native>
  <ListItem>
    Ordered list level 1
    <OrderedList nested>
      <ListItem>Ordered list level 2</ListItem>
      <ListItem>
        Ordered list level 3
        <OrderedList nested>
          <ListItem>Ordered list level 3</ListItem>
          <ListItem>Ordered list level 3</ListItem>
        </OrderedList>
      </ListItem>
    </OrderedList>
  </ListItem>
  <ListItem>Ordered list level 1</ListItem>
  <ListItem>Ordered list level 1</ListItem>
</OrderedList>

## Expressive styles

Use Carbon's expressive typesetting by setting the `expressive` prop to `true`.

<OrderedList expressive>
  <ListItem><Link size="lg" href="#">Ordered list item</Link></ListItem>
  <ListItem>Ordered list item</ListItem>
  <ListItem>Ordered list item</ListItem>
</OrderedList>