Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsShowcaseBlogGuides
Sponsor

DataList

Used to display a list of similar data items.

SourceStorybookRecipe
AI TipWant to skip the docs? Use the MCP Server
New Users
234
Sales
£12,340
Revenue
3,450

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

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

Orientation

Use the orientation prop to change the orientation of the datalist component.

New Users
234
Sales
£12,340
Revenue
3,450

Info Tip

Render the InfoTip component within DataList.Item to provide additional context to the datalist.

New Users
234
Sales
£12,340
Revenue
3,450

Separator

Use the divideY prop on the DataList.Root to add a separator between items.

First Name
Jassie
Last Name
Bhatia
Email
jassie@jassie.dev
Phone
1234567890
Address
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-list

Props

Root

PropDefaultType
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.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.

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

Previous

Image

Next

Icon