DataList

DataList displays a set of label/value pairs, such as user details or metadata, in a clean, aligned layout. Compose items with DataList.Item, DataList.ItemLabel, and DataList.ItemValue, or pass a data array for a quick setup.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Basic Usage

Compose DataList.Item with DataList.ItemLabel and DataList.ItemValue to render aligned label/value pairs.

Loading demo…

import

 

{

 

DataList

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<DataList

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Name

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

John

 

Doe

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Email

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

john@example

.

com

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Role

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

Software

 

Engineer

</DataList.ItemValue

>

      

</DataList.Item

>

    

</DataList

>

  

)

;

}

Vertical Orientation

Set orientation="vertical" to stack each label above its value — useful for longer values or narrow layouts.

Loading demo…

import

 

{

 

DataList

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<DataList

 

orientation

=

"vertical"

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Shipping

address

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

2825

 

Winding

 

Way

,

 

Providence

,

 

RI

 

02908

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Tracking

 

number

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

1Z

999

 

AA1

 

01

 

2345

 

6784

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Estimated

delivery

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

July

 

12

,

 

2026

</DataList.ItemValue

>

      

</DataList.Item

>

    

</DataList

>

  

)

;

}

Dividers & Aligned Labels

Enable withDivider to separate items with a border, and set labelWidth to keep the value column aligned.

Loading demo…

import

 

{

 

DataList

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<DataList

withDivider

labelWidth

=

{

120

}

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Plan

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

Pro

 

(

annual

)

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Seats

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

12

of

20

used

</DataList.ItemValue

>

      

</DataList.Item

>

      

<DataList.Item

>

        

<DataList.ItemLabel

>

Renews

</DataList.ItemLabel

>

        

<DataList.ItemValue

>

January

 

1

,

 

2027

</DataList.ItemValue

>

      

</DataList.Item

>

    

</DataList

>

  

)

;

}

Sizes

Use the size prop (xs–3xl, or a number) to scale font size and spacing together.

Loading demo…

import

 

{

 

Block

,

 

DataList

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

SIZES

 

=

 

[

'xs'

,

 

'sm'

,

 

'md'

,

 

'lg'

,

 

'xl'

,

 

'2xl'

,

 

'3xl'

]

as

const

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Block

>

      

{

SIZES

.

map

(

(

size

)

 

=>

 

(

        

<Block

 

key

=

{

size

}

>

          

<Text

 

variant

=

"small"

 

color

=

"secondary"

>

{

size

}

</Text

>

          

<DataList

 

size

=

{

size

}

 

labelWidth

=

{

90

}

>

            

<DataList.Item

 

label

=

"Status"

 

value

=

"Active"

 

/>

            

<DataList.Item

 

label

=

"Region"

 

value

=

"us-east-1"

 

/>

          

</DataList

>

        

</Block

>

      

)

)

}

    

</Block

>

  

)

;

}

Data Prop Shorthand

Skip the composition and pass a data array of { label, value } objects to render items automatically.

Loading demo…

import

 

{

 

DataList

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

details

=

 

[

  

{

label

:

 

'Order'

,

value

:

 

'#SS-10428'

 

}

,

  

{

label

:

 

'Placed'

,

value

:

 

'July 3, 2026'

 

}

,

  

{

label

:

 

'Total'

,

value

:

 

'$248.00'

 

}

,

  

{

label

:

 

'Payment'

,

value

:

 

'Visa •••• 4242'

 

}

,

]

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

<DataList

 

data

=

{

details

}

withDivider

labelWidth

=

{

100

}

 

/>

;

}

Scan to open this page on your phonereact-ui-library.com/components/DataList

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap