List

Used to display a list of items

AI TipWant to skip the docs? Use the MCP Server

Usage

import { List } from "@chakra-ui/react"

<List.Root>
  <List.Item>Item 1</List.Item>
  <List.Item>Item 2</List.Item>
</List.Root>

Pass the as="ol" prop to create an ordered list

Use the List.Indicator component to add an icon to the list

Here's an example of a nested list

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.

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.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.
`align`		`'center' \| 'start' \| 'end'` The align of the component

Explore the List component parts interactively. Click on parts in the sidebar to highlight them in the preview.

Hover to highlight, click to select parts

root

item

indicator

list.recipe.ts