Skip to main content

​
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.
Last modified on March 13, 2026