# List

A bulleted or numbered list of short items in running text. For navigation, use [Side navigation](/components/side-navigation.md); for records with several values, use [Table](/components/table.md).

```tsx
// demo.tsx
import {List} from '@earendil-works/elanor-react';

export default function ListDemo() {
  return (
    <List.Root>
      <List.Item>Invite your team</List.Item>
      <List.Item>Connect a repository</List.Item>
      <List.Item>Create your first project</List.Item>
    </List.Root>
  );
}
```

## Usage

```tsx
import {List} from '@earendil-works/elanor-react';

<List.Root>
  <List.Item />
</List.Root>;
```

Root renders a `ul` and Item an `li`. Lists use `semantic.typography.primary` and `semantic.color.text.primary` like [Text](/components/text.md), so they switch to the prose style inside long-form content (`data-text-context="prose"`). Items are `semantic.dimension.space.gap.small` (8px) apart, markers are in `semantic.color.text.secondary`, and the list is indented by `semantic.dimension.space.padding.xxLarge` (24px).

## Numbered

Use `render={<ol />}` when the order matters, such as steps. Put `ol` attributes such as `start` on the rendered element.

```tsx
// numbered.tsx
import {List} from '@earendil-works/elanor-react';

export default function ListNumbered() {
  return (
    <List.Root render={<ol />}>
      <List.Item>Install the command-line tool</List.Item>
      <List.Item>Sign in with your workspace account</List.Item>
      <List.Item>Deploy the project</List.Item>
    </List.Root>
  );
}
```

## Nested

Put a List.Root inside an item. It starts 8px below the item's text and is indented again.

```tsx
// nested.tsx
import {List} from '@earendil-works/elanor-react';

export default function ListNested() {
  return (
    <List.Root>
      <List.Item>
        Workspace settings
        <List.Root>
          <List.Item>Members</List.Item>
          <List.Item>Billing</List.Item>
        </List.Root>
      </List.Item>
      <List.Item>Project settings</List.Item>
    </List.Root>
  );
}
```

## API

### `List.Root`

A bulleted list of items. Renders `ul` by default; use `render={<ol />}` for a numbered list.

Renders `<ul>`. Accepts its HTML attributes, `ref`, and `render`.

### `List.Item`

One item of a list. Nest a `List.Root` inside for a sublist.

Renders `<li>`. Accepts its HTML attributes and `ref`.