List

A bulleted or numbered list of short items in running text. For navigation, use Side navigation; for records with several values, use Table.

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>
  );
}

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

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

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>
  );
}

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

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>
  );
}

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.

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

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