DataList

Used to display a list of similar data items.

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

Usage

import { DataList } from "chakra-ui-solid";
<DataList.Root>
  <For each={data}>
    {(item) => (
      <DataList.Item>
        <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
        <DataList.ItemValue>{item.value}</DataList.ItemValue>
      </DataList.Item>
    )}
  </For>
</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

Variants

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

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

Props

Root

DataListRootProps
PropDefaultType
orientation'vertical'
ConditionalValue<'horizontal' | 'vertical' | PresetVariant<'dataList', 'orientation'>>

Whether a label sits above its value or beside it, in a 120px-wide column.

size'md'
ConditionalValue<'sm' | 'md' | 'lg' | PresetVariant<'dataList', 'size'>>

The type scale of an item, and the gap between items.

variant'subtle'
ConditionalValue<'subtle' | 'bold' | PresetVariant<'dataList', 'variant'>>

Which half is muted — `subtle` dims the label, `bold` dims the value and weights the label.

Plus HTMLChakraProps<"dl"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.