> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# List - Web

> Lists display ordered or unordered content with consistent typography and spacing.

> [!NOTE]
>
> For development, import `List` from
> `@servicetitan/anvil2`. For design, find it in the
> [Anvil2 file](https://www.figma.com/design/xaNQsvRKczoxu7pj0M6QT8/Anvil2-v3).

## Anatomy

The List consists of two primary elements that work together to present content in a structured format.

1. **List container** – The wrapper that renders as either an unordered list (`ul`) or ordered list (`ol`), applying typography and spacing from the design system.
2. **List item** – Individual items within the list, rendered as `li` elements.

## Options

The List supports the following configurations to accommodate various content and layout scenarios.

### Variant

Lists can be unordered (bullets) or ordered (numbers). Use unordered lists for items without sequence; use ordered lists for steps, rankings, or sequence-dependent content.

list-design-variant

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-design-variant?file=src/App.tsx)

| Variant | Use case |
| - | - |
| Unordered | Bullet points, non-sequential items |
| Ordered | Steps, rankings, numbered items |

### Size

Typography size aligns with the design system paragraph scale. Size affects readability and hierarchy when lists appear alongside other content.

list-design-size

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-design-size?file=src/App.tsx)

| Size | Description |
| - | - |
| Small | Compact content or dense UIs |
| Medium | Default body size |
| Large | Emphasis or larger text blocks |

### Nesting

Lists support nesting. Place a List inside a List item to create sub-lists (for example, an ordered sub-list inside an unordered parent).

list-nested

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-nested?file=src/App.tsx)

## Behavior

The List responds to the chosen variant and size without interactive states. It renders semantic HTML so screen readers announce list structure and item count correctly.

## Usage Guidelines

Use the List when presenting content as a series of items that benefit from list semantics and design system styling.

| Standard | Requirement |
| - | - |
| DoBullet points or numbered steps in body content | Use List for bulleted or numbered content within body text, instead of typing bullet or number characters. |
| DoOutlining options, features, or requirements | Break options, features, or requirements into separate items so they are easy to scan. |
| DoShowing sequential instructions | Use the ordered variant for steps, rankings, or criteria where the sequence matters. |
| DoGrouping related items | Nest a List inside a List item to show sub-items under a parent item. |
| DoPresentational lists with semantic markup | Use List for presentational lists with correct semantic markup; see [How to Use](#how-to-use). |
| Don'tSelectable options | Use [Listbox](https://anvil.servicetitan.com/docs/components/listbox/web.md) or [Menu](https://anvil.servicetitan.com/docs/components/menu/web.md) for user selection; see [How to Use](#how-to-use). |
| Don'tData grids or tables | Use [ListView](https://anvil.servicetitan.com/docs/components/list-view/web.md) or [Data Table](https://anvil.servicetitan.com/docs/components/data-table/web) for tabular or multi-column data. |

### How to Use

Use `List` with `List.Item` for each entry. Set `variant="ordered"` for numbered lists; omit it or set `variant="unordered"` for bullet lists.

list-design-do

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-design-do?file=src/App.tsx)

> [!TIP]
>
> **Do**

Use List for presentational lists with correct semantic markup.

> [!CAUTION]
>
> **Don't**

Don't use List for interactive selection; use [Listbox](https://anvil.servicetitan.com/docs/components/listbox/web.md) or [Menu](https://anvil.servicetitan.com/docs/components/menu/web.md) instead.

## Content

Content within each List item should be concise and scannable. Keep items parallel in structure where possible. For ordered lists, use clear step or sequence language.

## Keyboard Interaction

Users can navigate the List using standard keyboard controls. Lists are not focusable as a single widget; focus moves through interactive elements inside items if present. Semantic list markup supports screen reader navigation (e.g., list length and position announcements).

## Code

**Implementation**

list-basic

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-basic?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List } from "@servicetitan/anvil2";

function App() {
  return (
    <List>
      <List.Item>First item</List.Item>
      <List.Item>Second item</List.Item>
      <List.Item>Third item</List.Item>
    </List>
  );
}

export default App;
```

## Common Examples

```tsx theme={null}
import { List } from "@servicetitan/anvil2";

function UnorderedExample() {
  return (
    <List>
      <List.Item>Item one</List.Item>
      <List.Item>Item two</List.Item>
    </List>
  );
}

function OrderedExample() {
  return (
    <List variant="ordered">
      <List.Item>Step one</List.Item>
      <List.Item>Step two</List.Item>
    </List>
  );
}
```

### Unordered list (default)

Omit `variant` or set `variant="unordered"` to render a `ul` with bullet markers.

list-basic

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-basic?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List } from "@servicetitan/anvil2";

function App() {
  return (
    <List>
      <List.Item>First item</List.Item>
      <List.Item>Second item</List.Item>
      <List.Item>Third item</List.Item>
    </List>
  );
}

export default App;
```

### Ordered list

Set `variant="ordered"` to render an `ol` with numeric markers. You can pass native `ol` attributes such as `start` and `reversed`.

list-ordered

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-ordered?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List } from "@servicetitan/anvil2";

function App() {
  return (
    <List variant="ordered">
      <List.Item>Step one</List.Item>
      <List.Item>Step two</List.Item>
      <List.Item>Step three</List.Item>
    </List>
  );
}

export default App;
```

### Size

Use `size` to control typography (`small`, `medium`, `large`).

list-design-size

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-design-size?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="4">
      <List size="small">
        <List.Item>Small list item</List.Item>
        <List.Item>Second item</List.Item>
      </List>
      <List size="medium">
        <List.Item>Medium list item</List.Item>
        <List.Item>Second item</List.Item>
      </List>
      <List size="large">
        <List.Item>Large list item</List.Item>
        <List.Item>Second item</List.Item>
      </List>
    </Flex>
  );
}

export default App;
```

### Nested lists

Render a `List` inside a `List.Item` to create sub-lists. Use a different variant (e.g., ordered inside unordered) when it fits the content.

list-nested

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-nested?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List } from "@servicetitan/anvil2";

function App() {
  return (
    <List>
      <List.Item>
        Parent item one
        <List variant="ordered">
          <List.Item>Sub-step one</List.Item>
          <List.Item>Sub-step two</List.Item>
        </List>
      </List.Item>
      <List.Item>Parent item two</List.Item>
    </List>
  );
}

export default App;
```

### Ordered with start and reversed

When `variant="ordered"`, you can pass `start` (number) and `reversed` (boolean) as with native `ol`.

list-ordered-start-reversed

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/list-ordered-start-reversed?file=src/App.tsx)

```tsx lines expandable theme={null}
import { List, Flex } from "@servicetitan/anvil2";

function App() {
  return (
    <Flex direction="column" gap="4">
      <List variant="ordered" start={5}>
        <List.Item>Five</List.Item>
        <List.Item>Six</List.Item>
      </List>
      <List variant="ordered" reversed>
        <List.Item>Third</List.Item>
        <List.Item>Second</List.Item>
        <List.Item>First</List.Item>
      </List>
    </Flex>
  );
}

export default App;
```

## React Accessibility

The `List` component renders semantic `ul`/`ol` and `li` elements, so list structure is exposed to assistive technologies without extra ARIA. Screen readers can announce the list and the number of items. Keep list item content readable and avoid using List for interactive selection; use [`Listbox`](https://anvil.servicetitan.com/docs/components/listbox/code) or [`Menu`](https://anvil.servicetitan.com/docs/components/menu/code) for that.

**List Props**

```tsx theme={null}
<List variant="unordered" size="medium">
  <List.Item>Item</List.Item>
</List>
```

## `List` Props

**size** `"small" | "medium" | "large"` (default: medium)

Typography size for list content. Maps to design system paragraph tokens.

**variant** `"unordered" | "ordered"` (default: unordered)

Renders as `ul` when `"unordered"` (default) or `ol` when `"ordered"`. When `"ordered"`, native `ol` props such as `start` and `reversed` are supported.

**List.Item Props**

```tsx theme={null}
<List.Item>Item content</List.Item>
```

## `List.Item` Props

`List.Item` accepts all standard `li` HTML attributes.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.