DataList

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.

Variants

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

Added in v3.1.x

Orientation

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

Info Tip

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

Separator

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

Closed Component

Here's how to setup the Data List for a closed component composition.

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

Explorer

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