- 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>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>
)
},
)
Props
Root
| Prop | Default | Type |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'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 |