List
List component is used to display list items. It renders a <ul> element by
default.
Import#
import { List, ListItem, ListIcon, OrderedList, UnorderedList } from "@chakra-ui/react"
Unordered List#
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Editable Example
Ordered List#
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
Editable Example
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.
- 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
Props#
List Props#
| Name | Type | Description | Default |
|---|---|---|---|
| colorScheme | "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | Color Schemes for List are not implemented in the default theme. You can extend the theme to implement them. | - |
| size | string | Sizes for List are not implemented in the default theme. You can extend the theme to implement them. | - |
| spacing | SystemProps["margin"] | The space between each list item | - |
| stylePosition | SystemProps["listStylePosition"] | Short hand prop for `listStylePosition` | - |
| styleType | SystemProps["listStyleType"] | Short hand prop for `listStyleType` | - |
| variant | string | Variants for List are not implemented in the default theme. You can extend the theme to implement them. | - |
List Item Props#
ListItem composes Box so you can pass all style and pseudo
style props.