---
title: List
description: "`List` is a component for displaying lists. By default, it renders a `ul` element."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/list/list.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/list
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-list--basic
---

# List

`List` is a component for displaying lists. By default, it renders a `ul` element.

```tsx
<List.Root>
  <List.Item>
    【一つ】この世界におけるあらゆる殺傷、戦争、略奪を禁ずる
  </List.Item>
  <List.Item>
    【二つ】争いは全てゲームにおける勝敗で解決するものとする
  </List.Item>
  <List.Item>
    【三つ】ゲームには、相互が対等と判断したものを賭けて行われる
  </List.Item>
  <List.Item>
    【四つ】 "三"に反しない限り、ゲーム内容、賭けるものは一切を問わない
  </List.Item>
  <List.Item>【五つ】ゲーム内容は、挑まれた方が決定権を有する</List.Item>
  <List.Item>【六つ】"盟約に誓って"行われた賭けは、絶対遵守される</List.Item>
  <List.Item>
    【七つ】集団における争いは、全権代理者をたてるものとする
  </List.Item>
  <List.Item>【八つ】ゲーム中の不正発覚は、敗北と見なす</List.Item>
  <List.Item>【九つ】以上をもって神の名のもと絶対不変のルールとする</List.Item>
  <List.Item>【十】みんななかよくプレイしましょう</List.Item>
</List.Root>
```

## Usage

```tsx
import { List } from "@yamada-ui/react"
```

```tsx
import { List } from "@/components/ui"
```

```tsx
import { List } from "@workspaces/ui"
```

```tsx
<List.Root>
  <List.Item>
    <List.Icon />
  </List.Item>
</List.Root>
```

### Use items

```tsx
const items = useMemo<List.Item[]>(
  () => [
    { children: "【一つ】この世界におけるあらゆる殺傷、戦争、略奪を禁ずる" },
    { children: "【二つ】争いは全てゲームにおける勝敗で解決するものとする" },
    {
      children: "【三つ】ゲームには、相互が対等と判断したものを賭けて行われる",
    },
    {
      children:
        '【四つ】 "三"に反しない限り、ゲーム内容、賭けるものは一切を問わない',
    },
    { children: "【五つ】ゲーム内容は、挑まれた方が決定権を有する" },
    { children: '【六つ】"盟約に誓って"行われた賭けは、絶対遵守される' },
    { children: "【七つ】集団における争いは、全権代理者をたてるものとする" },
    { children: "【八つ】ゲーム中の不正発覚は、敗北と見なす" },
    { children: "【九つ】以上をもって神の名のもと絶対不変のルールとする" },
    { children: "【十】みんななかよくプレイしましょう" },
  ],
  [],
)

return <List.Root items={items} />
```

### Use Marker

```tsx
<VStack>
  <For each={["disc", "decimal", "square", "circle", "lower-alpha"]}>
    {(styleType, index) => (
      <List.Root key={index} styleType={styleType}>
        <List.Item>
          【一つ】この世界におけるあらゆる殺傷、戦争、略奪を禁ずる
        </List.Item>
        <List.Item>
          【二つ】争いは全てゲームにおける勝敗で解決するものとする
        </List.Item>
        <List.Item>
          【三つ】ゲームには、相互が対等と判断したものを賭けて行われる
        </List.Item>
        <List.Item>
          【四つ】 "三"に反しない限り、ゲーム内容、賭けるものは一切を問わない
        </List.Item>
      </List.Root>
    )}
  </For>
</VStack>
```

### Using Custom Icons

To use custom icons for items, set a `ReactNode` to the `icon` property or use `List.Icon`.

```tsx
const items = useMemo<List.Item[]>(
  () => [
    {
      icon: <CircleCheckIcon color="success" />,
      children: "【一つ】この世界におけるあらゆる殺傷、戦争、略奪を禁ずる",
    },
    {
      icon: <CircleCheckIcon color="success" />,
      children: "【二つ】争いは全てゲームにおける勝敗で解決するものとする",
    },
    {
      icon: <LoaderIcon color="fg.subtle" />,
      children: "【三つ】ゲームには、相互が対等と判断したものを賭けて行われる",
    },
  ],
  [],
)

return (
  <VStack>
    <List.Root items={items} />

    <List.Root>
      <List.Item icon={<CircleCheckIcon color="success" />}>
        【四つ】 "三"に反しない限り、ゲーム内容、賭けるものは一切を問わない
      </List.Item>
      <List.Item icon={<CircleCheckIcon color="success" />}>
        【五つ】ゲーム内容は、挑まれた方が決定権を有する
      </List.Item>
      <List.Item icon={<LoaderIcon color="fg.subtle" />}>
        【六つ】"盟約に誓って"行われた賭けは、絶対遵守される
      </List.Item>
    </List.Root>

    <List.Root>
      <List.Item>
        <List.Icon>
          <CircleCheckIcon color="success" />
        </List.Icon>
        【七つ】集団における争いは、全権代理者をたてるものとする
      </List.Item>
      <List.Item>
        <List.Icon>
          <CircleCheckIcon color="success" />
        </List.Icon>
        【八つ】ゲーム中の不正発覚は、敗北と見なす
      </List.Item>
      <List.Item>
        <List.Icon>
          <CircleCheckIcon color="success" />
        </List.Icon>
        【九つ】以上をもって神の名のもと絶対不変のルールとする
      </List.Item>
      <List.Item>
        <List.Icon>
          <LoaderIcon color="fg.subtle" />
        </List.Icon>
        【十】みんななかよくプレイしましょう
      </List.Item>
    </List.Root>
  </VStack>
)
```

## Props

### List.Root

| Prop            | Default | Type                                                                                                                          | Description                                    |
| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- |
| `as`            | -       | `As`                                                                                                                          | The HTML element to render.                    |
| `asChild`       | -       | `boolean`                                                                                                                     | Merges its props onto its immediate child.     |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                    | The CSS object.                                |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`     | Set color scheme variables.                    |
| `items`         | -       | `ListItem[]`                                                                                                                  | If provided, generate elements based on items. |
| `stylePosition` | -       | `"-moz-initial" \| "inherit" \| "initial" \| "inside" \| "outside" \| "revert-layer" \| "revert" \| "unset" \| AnyString ...` | The CSS `list-style-position` property.        |
| `styleType`     | -       | `"-moz-initial" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "unset" \| AnyString ...`                | The CSS `list-style-position` property.        |

### List.Icon

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### List.Item

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `icon`        | -       | `ReactElement<any>`                                                                                                       | The icon to use.                           |

## Similar Components

- [DataList](https://yamada-ui.com/docs/components/data-list.md): `DataList` is used to display a list of data items.
- [Timeline](https://yamada-ui.com/docs/components/timeline.md): `Timeline` is a component that is used to display a list of events in chronological order.
- [Tree](https://yamada-ui.com/docs/components/tree.md): `Tree` is a component used to display hierarchical data structures in an expandable tree format.
- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable` is a component for efficiently organizing and displaying data.
- [Stat](https://yamada-ui.com/docs/components/stat.md): `Stat` is used to display numbers or data within a box.
- [Table](https://yamada-ui.com/docs/components/table.md): `Table` is a table component equipped with column sorting, row selection, and click event features.
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md): `AreaChart` is a component for drawing area charts to compare multiple sets of data.
- [Badge](https://yamada-ui.com/docs/components/badge.md): `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.