List

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

Import

import {
  List,
  ListItem,
  ListIcon,
  DiscList,
  DecimalList,
} from "@yamada-ui/react"

Copied!

list: A wrapper component for a list without item icons.
ListItem: A component for an item.
ListIcon: A component for an item's icon.
DiscList: A wrapper component for an unordered list.
DecimalList: A wrapper component for an ordered list.

Usage

Editable example

<List>
  <For
    each={[
      "よろしければわたしが喜びのダンスを踊りましょうか！",
      "お命頂だい!!!　とうっ!!!",
      "う…宇宙一のスピードを誇るオ…オレさまのうしろに……",
      "オ…オレたちが勝てるわけはなかったはずだ………",
      "オレは試合場のゴミ拾いみたいなもんかよ…",
    ]}
  >
    {(text, index) => <ListItem key={index}>{text}</ListItem>}
  </For>
</List>

Copied!

Unordered List

Editable example

<DiscList>
  <For
    each={[
      "よろしければわたしが喜びのダンスを踊りましょうか！",
      "お命頂だい!!!　とうっ!!!",
      "う…宇宙一のスピードを誇るオ…オレさまのうしろに……",
      "オ…オレたちが勝てるわけはなかったはずだ………",
      "オレは試合場のゴミ拾いみたいなもんかよ…",
    ]}
  >
    {(text, index) => <ListItem key={index}>{text}</ListItem>}
  </For>
</DiscList>

Copied!

Ordered List

Editable example

<DecimalList>
  <For
    each={[
      "よろしければわたしが喜びのダンスを踊りましょうか！",
      "お命頂だい!!!　とうっ!!!",
      "う…宇宙一のスピードを誇るオ…オレさまのうしろに……",
      "オ…オレたちが勝てるわけはなかったはずだ………",
      "オレは試合場のゴミ拾いみたいなもんかよ…",
    ]}
  >
    {(text, index) => <ListItem key={index}>{text}</ListItem>}
  </For>
</DecimalList>

Copied!

Using Custom Icons

To use custom icons for items, use ListIcon.

Editable example

<List>
  <For
    each={[
      "よろしければわたしが喜びのダンスを踊りましょうか！",
      "お命頂だい!!!　とうっ!!!",
      "う…宇宙一のスピードを誇るオ…オレさまのうしろに……",
      "オ…オレたちが勝てるわけはなかったはずだ………",
      "オレは試合場のゴミ拾いみたいなもんかよ…",
    ]}
  >
    {(text, index) => (
      <ListItem key={index}>
        <ListIcon
          as={index === 4 ? CheckIcon : CircleCheckIcon}
          color="green.500"
        />
        {text}
      </ListItem>
    )}
  </For>
</List>

Copied!

Other Lists

Editable example

<VStack>
  <For each={["square", "circle", "lower-alpha"]}>
    {(styleType, index) => (
      <List
        styleType={styleType}
        ms={styleType === "lower-alpha" ? "1.2em" : "0em"}
      >
        <For
          each={[
            "よろしければわたしが喜びのダンスを踊りましょうか！",
            "お命頂だい!!!　とうっ!!!",
            "う…宇宙一のスピードを誇るオ…オレさまのうしろに……",
            "オ…オレたちが勝てるわけはなかったはずだ………",
            "オレは試合場のゴミ拾いみたいなもんかよ…",
          ]}
        >
          {(text, index) => (
            <ListItem
              key={index}
              ps={styleType === "lower-alpha" ? "0.2em" : "0em"}
            >
              {text}
            </ListItem>
          )}
        </For>
      </List>
    )}
  </For>
</VStack>

Copied!

Edit this page on GitHub

PreviousKbd NextDataList