Color Schemes for List
are not implemented in the default theme. You can extend the theme to implement them.
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#
<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
colorScheme
Description
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
size
size
Description
Sizes for List
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
spacing
spacing
Description
The space between each list item
Type
SystemProps["margin"]
stylePosition
stylePosition
Description
Short hand prop for listStylePosition
Type
SystemProps["listStylePosition"]
styleType
styleType
Description
Short hand prop for listStyleType
Type
SystemProps["listStyleType"]
variant
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.
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web