List - Web

For development, import List from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

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

List container – The wrapper that renders as either an unordered list (ul) or ordered list (ol), applying typography and spacing from the design system.
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.

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.

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).

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.
Don’tSelectable options	Use Listbox or Menu for user selection; see How to Use.
Don’tData grids or tables	Use ListView or Data Table 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.

Use List for presentational lists with correct semantic markup.

Don’t

Don’t use List for interactive selection; use Listbox or Menu 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 Props
List.Item Props

Common Examples

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.

Ordered list

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

Size

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

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.

Ordered with start and reversed

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

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 or Menu for that.

<List variant="unordered" size="medium">
  <List.Item>Item</List.Item>
</List>

`List` Props

"small" | "medium" | "large"

default:"medium"

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

"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>Item content</List.Item>

`List.Item` Props

List.Item accepts all standard li HTML attributes.

Concepts & Guidelines

Anvil2

Resources

List - Web

Anatomy

Options

Variant

Size

Nesting

Behavior

Usage Guidelines

How to Use

Content

Keyboard Interaction

Code

Common Examples

Unordered list (default)

Ordered list

Size

Nested lists

Ordered with start and reversed

React Accessibility

`List` Props

`List.Item` Props

​Anatomy

​Options

​Variant

​Size

​Nesting

​Behavior

​Usage Guidelines

​How to Use

​Content

​Keyboard Interaction

​Code

​Common Examples

​Unordered list (default)

​Ordered list

​Size

​Nested lists

​Ordered with start and reversed

​React Accessibility

​List Props

​List.Item Props

Anatomy

Options

Variant

Size

Nesting

Behavior

Usage Guidelines

How to Use

Content

Keyboard Interaction

Code

Common Examples

Unordered list (default)

Ordered list

Size

Nested lists

Ordered with start and reversed

React Accessibility

`List` Props

`List.Item` Props