- 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
import { List } from "@chakra-ui/react" export const ListBasic = () => ( <List.Root> <List.Item> Lorem ipsum dolor sit amet, consectetur adipisicing elit </List.Item> <List.Item> Assumenda, quia temporibus eveniet a libero incidunt suscipit </List.Item> <List.Item> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </List.Item> </List.Root> ) Usage
import { List } from "@chakra-ui/react"<List.Root> <List.Item>Item 1</List.Item> <List.Item>Item 2</List.Item> </List.Root>Examples
Ordered
Pass the as="ol" prop to create an ordered list
- 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
import { List } from "@chakra-ui/react" const Demo = () => { return ( <List.Root as="ol"> <List.Item> Lorem ipsum dolor sit amet, consectetur adipisicing elit </List.Item> <List.Item> Assumenda, quia temporibus eveniet a libero incidunt suscipit </List.Item> <List.Item> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </List.Item> </List.Root> ) } Icon
Use the List.Indicator component to add an icon to the list
- 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
import { List } from "@chakra-ui/react" import { LuCircleCheck, LuCircleDashed } from "react-icons/lu" const Demo = () => { return ( <List.Root gap="2" variant="plain" align="center"> <List.Item> <List.Indicator asChild color="green.500"> <LuCircleCheck /> </List.Indicator> Lorem ipsum dolor sit amet, consectetur adipisicing elit </List.Item> <List.Item> <List.Indicator asChild color="green.500"> <LuCircleCheck /> </List.Indicator> Assumenda, quia temporibus eveniet a libero incidunt suscipit </List.Item> <List.Item> <List.Indicator asChild color="green.500"> <LuCircleDashed /> </List.Indicator> Quidem, ipsam illum quis sed voluptatum quae eum fugit earum </List.Item> </List.Root> ) } Nested
Here's an example of a nested list
- First order item
- First order item
- First order item with list
- Nested item
- Nested item
- Nested item
- First order item
import { List } from "@chakra-ui/react" const Demo = () => { return ( <List.Root> <List.Item>First order item</List.Item> <List.Item>First order item</List.Item> <List.Item> First order item with list <List.Root ps="5"> <List.Item>Nested item</List.Item> <List.Item>Nested item</List.Item> <List.Item>Nested item</List.Item> </List.Root> </List.Item> <List.Item>First order item</List.Item> </List.Root> ) } Marker Style
Use the _marker prop to style the marker of the list
- Your failure to comply with any provision of these Terms of Service;
- Your use of the Services, including but not limited to economic, physical, emotional, psychological or privacy related considerations; and
- Your actions to knowingly affect the Services via any bloatware, malware, computer virus, worm, Trojan horse, spyware, adware, crimeware, scareware, rootkit or any other program installed in a way that executable code of any program is scheduled to utilize or utilizes processor cycles during periods of time when such program is not directly or indirectly being used.
import { List } from "@chakra-ui/react" const items = [ "Your failure to comply with any provision of these Terms of Service;", "Your use of the Services, including but not limited to economic, physical, emotional, psychological or privacy related considerations; and", "Your actions to knowingly affect the Services via any bloatware, malware, computer virus, worm, Trojan horse, spyware, adware, crimeware, scareware, rootkit or any other program installed in a way that executable code of any program is scheduled to utilize or utilizes processor cycles during periods of time when such program is not directly or indirectly being used.", ] const Demo = () => { return ( <List.Root as="ol" listStyle="decimal"> {items.map((item, index) => ( <List.Item key={index} _marker={{ color: "inherit" }}> {item} </List.Item> ))} </List.Root> ) } Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
variant | 'marker' | 'marker' | 'plain'The variant of the component |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. | |
align | 'center' | 'start' | 'end'The align of the component |
Explorer
Explore the List component parts interactively. Click on parts in the sidebar to highlight them in the preview.
- 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
Component Anatomy
Hover to highlight, click to select parts
root
item
indicator
list.recipe.ts