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>
  <ListItem>よろしければわたしが喜びのダンスを踊りましょうか！</ListItem>
  <ListItem>お命頂だい!!!　とうっ!!!</ListItem>
  <ListItem>う…宇宙一のスピードを誇るオ…オレさまのうしろに……</ListItem>
  <ListItem>オ…オレたちが勝てるわけはなかったはずだ………</ListItem>
  <ListItem>オレは試合場のゴミ拾いみたいなもんかよ…</ListItem>
</List>

Copied!

Unordered List

Editable example

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

Copied!

Ordered List

Editable example

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

Copied!

Using Custom Icons

To use custom icons for items, use ListIcon.

Editable example

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

Copied!

Other Lists

Editable example

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

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

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

Copied!

Edit this page on GitHub

PreviousLineChart NextMarkdown