DataList
Used to display a list of similar data items.
AI TipWant to skip the docs? Use the MCP Server
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
import { DataList } from "@chakra-ui/react" const stats = [ { label: "New Users", value: "234", diff: -12, helpText: "Till date" }, { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" }, { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" }, ] const Demo = () => { return ( <DataList.Root orientation="horizontal"> {stats.map((item) => ( <DataList.Item key={item.label}> <DataList.ItemLabel>{item.label}</DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> ) } Usage
import { DataList } from "@chakra-ui/react"<DataList.Root> {data.map((item) => ( <DataList.Item key={item.label}> <DataList.ItemLabel>{item.label}</DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root>info
If you prefer a closed component composition, check out the snippet below.Examples
Sizes
Use the size prop to change the size of the datalist component.
- Name
- John Doe
- Name
- John Doe
- Name
- John Doe
import { DataList, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack gap="4"> <DataList.Root size="sm"> <DataList.Item> <DataList.ItemLabel>Name</DataList.ItemLabel> <DataList.ItemValue>John Doe</DataList.ItemValue> </DataList.Item> </DataList.Root> <DataList.Root size="md"> <DataList.Item> <DataList.ItemLabel>Name</DataList.ItemLabel> <DataList.ItemValue>John Doe</DataList.ItemValue> </DataList.Item> </DataList.Root> <DataList.Root size="lg"> <DataList.Item> <DataList.ItemLabel>Name</DataList.ItemLabel> <DataList.ItemValue>John Doe</DataList.ItemValue> </DataList.Item> </DataList.Root> </Stack> ) } Variants
Use the variant prop to change the variant of the datalist component.
Added in v3.1.x
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
import { DataList, For, Stack } from "@chakra-ui/react" const Demo = () => { return ( <Stack gap="8"> <For each={["subtle", "bold"]}> {(variant) => ( <DataList.Root variant={variant} key={variant}> {stats.map((item) => ( <DataList.Item key={item.label}> <DataList.ItemLabel>{item.label}</DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> )} </For> </Stack> ) } const stats = [ { label: "New Users", value: "234", diff: -12, helpText: "Till date" }, { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" }, { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" }, ] Orientation
Use the orientation prop to change the orientation of the datalist component.
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
import { DataList } from "@chakra-ui/react" const stats = [ { label: "New Users", value: "234", diff: -12, helpText: "Till date" }, { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" }, { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" }, ] const Demo = () => { return ( <DataList.Root> {stats.map((item) => ( <DataList.Item key={item.label}> <DataList.ItemLabel>{item.label}</DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> ) } Info Tip
Render the InfoTip component within DataList.Item to provide additional context to the datalist.
- New UsersThis is some info
- 234
- SalesThis is some info
- £12,340
- RevenueThis is some info
- 3,450
import { DataList } from "@chakra-ui/react" import { InfoTip } from "@/components/ui/toggle-tip" const stats = [ { label: "New Users", value: "234", diff: -12, helpText: "Till date" }, { label: "Sales", value: "£12,340", diff: 12, helpText: "Last 30 days" }, { label: "Revenue", value: "3,450", diff: 4.5, helpText: "Last 30 days" }, ] const Demo = () => { return ( <DataList.Root orientation="horizontal"> {stats.map((item) => ( <DataList.Item key={item.label}> <DataList.ItemLabel> {item.label} <InfoTip>This is some info</InfoTip> </DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> ) } Separator
Use the divideY prop on the DataList.Root to add a separator between items.
- First Name
- Jassie
- Last Name
- Bhatia
- jassie@jassie.dev
- Phone
- 1234567890
- Address
- 1234 Main St, Anytown, USA
import { DataList } from "@chakra-ui/react" const Demo = () => { return ( <DataList.Root orientation="horizontal" divideY="1px" maxW="md"> {items.map((item) => ( <DataList.Item key={item.label} pt="4"> <DataList.ItemLabel>{item.label}</DataList.ItemLabel> <DataList.ItemValue>{item.value}</DataList.ItemValue> </DataList.Item> ))} </DataList.Root> ) } const items = [ { label: "First Name", value: "Jassie" }, { label: "Last Name", value: "Bhatia" }, { label: "Email", value: "jassie@jassie.dev" }, { label: "Phone", value: "1234567890" }, { label: "Address", value: "1234 Main St, Anytown, USA" }, ] Closed Component
Here's how to setup the Data List for a closed component composition.
import { DataList as ChakraDataList } from "@chakra-ui/react" import { InfoTip } from "@/components/ui/toggle-tip" import * as React from "react" export const DataListRoot = ChakraDataList.Root interface ItemProps extends ChakraDataList.ItemProps { label: React.ReactNode value: React.ReactNode info?: React.ReactNode grow?: boolean } export const DataListItem = React.forwardRef<HTMLDivElement, ItemProps>( function DataListItem(props, ref) { const { label, info, value, children, grow, ...rest } = props return ( <ChakraDataList.Item ref={ref} {...rest}> <ChakraDataList.ItemLabel flex={grow ? "1" : undefined}> {label} {info && <InfoTip>{info}</InfoTip>} </ChakraDataList.ItemLabel> <ChakraDataList.ItemValue flex={grow ? "1" : undefined}> {value} </ChakraDataList.ItemValue> {children} </ChakraDataList.Item> ) }, ) If you want to automatically add the closed component to your project, run the command:
npx @chakra-ui/cli snippet add data-listProps
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'The color palette of the component |
orientation | 'vertical' | 'horizontal' | 'vertical'The orientation of the component |
size | 'md' | 'sm' | 'md' | 'lg'The size of the component |
variant | 'subtle' | 'subtle' | 'bold'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. |
Explorer
Explore the DataList component parts interactively. Click on parts in the sidebar to highlight them in the preview.
- New Users
- 234
- Sales
- £12,340
- Revenue
- 3,450
Component Anatomy
Hover to highlight, click to select parts
root
item
itemLabel
itemValue
data-list.recipe.ts