List

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

    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>

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>

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>

Custom style type#

Sometimes we need to specify our own marker in lists using the built-in capabilities of the browser. In css this can be done using the CSS property list-style-type.

To do the same in List, you can use the prop styleType.

For example:

<UnorderedList styleType='lower-roman'>
<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>

In fact, the content that you pass to styleType will become the value of the list-style-type property.

That is, you can represent styleType='lower-roman' as list-style-type: lower-roman;.

If you need to make a custom marker from a string, for example -, this can be done as follows:

<UnorderedList styleType="'-'">
<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>

It is important to understand that UnorderedList, OrderedList and List work the same in this case.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel