- 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"
export const ListOrdered = () => {
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"
export const ListWithIcon = () => {
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"
export const ListNested = () => {
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>
)
}
Props
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'The color palette of the component |
variant | 'marker' | 'marker' | 'plain'The variant of the component |
align | 'center' | 'start' | 'end'The align of the component |