List

List is used to display list items. It renders a <ul> element by default.

View source@chakra-ui/layout

Import

import {
  List,
  ListItem,
  ListIcon,
  OrderedList,
  UnorderedList,
} from '@chakra-ui/react';

Unordered List

<UnorderedList> <ListItem>Lorem ipsum dolor sit amet</ListItem> <ListItem>Consectetur adipiscing elit</ListItem> <ListItem>Integer molestie lorem at massa</ListItem> <ListItem>Facilisis in pretium nisl aliquet</ListItem> </UnorderedList>

<UnorderedList>
  <ListItem>Lorem ipsum dolor sit amet</ListItem>
  <ListItem>Consectetur adipiscing elit</ListItem>
  <ListItem>Integer molestie lorem at massa</ListItem>
  <ListItem>Facilisis in pretium nisl aliquet</ListItem>
</UnorderedList>

Ordered List

<OrderedList> <ListItem>Lorem ipsum dolor sit amet</ListItem> <ListItem>Consectetur adipiscing elit</ListItem> <ListItem>Integer molestie lorem at massa</ListItem> <ListItem>Facilisis in pretium nisl aliquet</ListItem> </OrderedList>

<OrderedList>
  <ListItem>Lorem ipsum dolor sit amet</ListItem>
  <ListItem>Consectetur adipiscing elit</ListItem>
  <ListItem>Integer molestie lorem at massa</ListItem>
  <ListItem>Facilisis in pretium nisl aliquet</ListItem>
</OrderedList>

Unstyled List with icon

Add icons to the list items by using the ListIcon component. You can pass the name of the icon or use custom icons. The size of the icon is relative to the font size of the list item.

<List spacing={3}> <ListItem> <ListIcon as={MdCheckCircle} color='green.500' /> Lorem ipsum dolor sit amet, consectetur adipisicing elit </ListItem> <ListItem> <ListIcon as={MdCheckCircle} color='green.500' /> Assumenda, quia temporibus eveniet a libero incidunt suscipit </ListItem> <ListItem> <ListIcon as={MdCheckCircle} color='green.500' /> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </ListItem> {/* You can also use custom icons from react-icons */} <ListItem> <ListIcon as={MdSettings} color='green.500' /> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </ListItem> </List>

<List spacing={3}>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </ListItem>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Assumenda, quia temporibus eveniet a libero incidunt suscipit
  </ListItem>
  <ListItem>
    <ListIcon as={MdCheckCircle} color='green.500' />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
  {/* You can also use custom icons from react-icons */}
  <ListItem>
    <ListIcon as={MdSettings} color='green.500' />
    Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
  </ListItem>
</List>

Props

List Props

colorScheme

Description

Color Schemes for List are not implemented in the default theme. You can extend the theme to implement them.

Type

string

size

Description

Sizes for List are not implemented in the default theme. You can extend the theme to implement them.

Type

string

spacing

Description

The space between each list item

Type

SystemProps["margin"]

stylePosition

Description

Shorthand prop for listStylePosition

Type

SystemProps["listStylePosition"]

styleType

Description

Shorthand prop for listStyleType

Type

SystemProps["listStyleType"]

variant

Description

Variants for List are not implemented in the default theme. You can extend the theme to implement them.

Type

string

List Item Props

ListItem composes Box so you can pass all style and pseudo style props.