List

List is used to display list items, it renders a <ul> by default.

Import#

Chakra UI exports 3 list related components.

  • CList: The wrapper for the list content
  • CListItem: The individual element for items inside the CList
  • CListIcon: The icon displayed in accompaniment with a list item.
import { CList, CListItem, CListIcon } from "@chakra-ui/vue";

Unordered List#

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Editable Example
<c-list styleType="disc">
  <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
  <c-list-item>Consectetur adipiscing elit</c-list-item>
  <c-list-item>Integer molestie lorem at massa</c-list-item>
  <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
</c-list>

Ordered List#

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
Editable Example
<c-list as="ol" style-type="decimal">
  <c-list-item>Lorem ipsum dolor sit amet</c-list-item>
  <c-list-item>Consectetur adipiscing elit</c-list-item>
  <c-list-item>Integer molestie lorem at massa</c-list-item>
  <c-list-item>Facilisis in pretium nisl aliquet</c-list-item>
</c-list>

Unstyled List with icon#

Add nice icons to the list item by using the CListIcon component. You can pass the name of the icon or custom icons. The icon is sized relative to the font size of the list item.

In the example below, the check-circle is an internal icon provided by Chakra and the cog icon is from Font Awesome. Learn more about using custom icons in chakra here

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit
  • Assumenda, quia temporibus eveniet a libero incidunt suscipit
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  • Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Editable Example
<c-list spacing="3">
  <c-list-item>
    <c-list-icon icon="check-circle" color="green.500" />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </c-list-item>
  <c-list-item>
    <c-list-icon icon="check-circle" color="green.500" />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </c-list-item>
  <c-list-item>
    <c-list-icon icon="check-circle" color="green.500" />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </c-list-item>
  <c-list-item>
    <c-list-icon icon="cog" color="green.500" />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </c-list-item>
</c-list>

Props#

List Props#

NameTypeDefaultDescription
styleTypestringnoneThe CSS value for list-style-type
stylePosstringinsideThe CSS value for list-style-position
spacingStyledSystem.MarginBottomPropsThe space between each list item

List Item Props#

ListItem composes PseudoBox so you pass all style props, and pseudo style props.

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!