List

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

Import#

Chakra UI exports three 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 settings 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="settings" color="green.500" />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </c-list-item>
</c-list>

Props#

List Props#

Name	Type	Default	Description
styleType	`string`	`none`	The CSS value for `list-style-type`
stylePos	`string`	`inside`	The CSS value for `list-style-position`
spacing	`StyledSystem.MarginBottomProps`		The 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!