Camaleo
EN · PTGitHub
// preview in
saved for every page

DataList

Label and value pairs for the details of one record, like an order, a profile or a server. To compare several records, use a table.

Built on HTML dlServer componentSource ↗

Installation

Set up Camaleo once (Installation), then import what you need. It renders on the server.

import { DataList, DataListTerm, DataListDetail, DataListItem } from "@camaleo/react";

Anatomy

A native description list: a two-column grid where each term (<dt>) sits next to its value (<dd>). DataListItem renders one pair without adding a wrapper.

Examples

Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.

minimal · light · #3fa34d
Order
#4821
Customer
Padaria Estrela
Placed on
10/24/2026
Total
$1,240.00
Status
Paid
Payment
Visa ending in 9210
Shipping
Express, 2 business days

Status as a badge

Put a badge in the value when it is a state people scan for, like Paid. Plain text is easier to read for everything else.

Phone
(541) 555-0182
Backup contact
Not provided
Tracking
Label not printed

Missing values

Keep the row and say what is missing, like "Not provided", in a quieter color. A dash or an empty cell is easy to miss, and some screen readers skip it.

Email
compras@padariaestrela.com
Phone
(541) 555-0182

Email and phone links

Make a value a link when it opens something, like mailto: or tel:. The link text is the value itself, so it still reads well out of context.

Ship to
742 Evergreen Terrace, Apt 3
Springfield, OR 97477
Delivery notes
Leave the box with the doorman if nobody answers. The bell on the side gate doesn't work.

Long values

Addresses and notes wrap onto several lines. Align the term to the top, so it stays next to the first line instead of floating in the middle.

Plan
Team, billed yearly
Seats
12 of 15 in use
Renews on
03/01/2027

Pairs from data

When the pairs come from an array, map them to DataListItem with term. It renders the <dt> and <dd> for you, with no extra element inside the <dl>.

Publishable key
pk_test_51Msz82K901La4Z

Copy a value

Click the button to copy the key. Its name says what it copies, and a status message announces the result, because a new icon alone says nothing to a screen reader.

In context

A data list usually sits below a heading that names the record, with the record's actions next to it. These are whole pieces of UI you can copy, in the skin you picked.

Order #4821

Paid
Customer
Padaria Estrela
Placed on
10/24/2026
Total
$1,240.00
Payment
Visa ending in 9210
Shipping
Express, 2 business days
Ship to
742 Evergreen Terrace, Apt 3
Springfield, OR 97477
Order summaryDataList · Badge · Button
Role
Frontend architectAdmin
Team
Design systems
Time zone
São Paulo (UTC−3)
Joined
03/15/2023
Team member profileDataList · Avatar · Badge · Link

web-prod-2

Running
Instance type
c6g.2xlarge
CPU and memory
8 vCPUs · 16 GB
Region
sa-east-1 (São Paulo)
Public IPv4
177.71.182.49
Server detailsDataList · Badge · Button

Guidelines

Phone
(541) 555-0182
Backup contact
Not provided
DoSay when a value is missing.

"Not provided" tells people the field exists and is empty, not that the page failed to load.

Phone
(541) 555-0182
Backup contact
Don’tAn empty value.

A blank cell looks like a bug, and people can't tell whether the data is missing or still loading.

Email
compras@padariaestrela.com
Phone
(541) 555-0182
DoKeep terms to one or two words.

People scan the terms to find a row. Short terms leave room for the values, even on a phone.

The email address we use to contact you about this order
compras@padariaestrela.com
Phone
(541) 555-0182
Don’tA sentence as the term.

The term column grows, the values get squeezed, and the heading above already gives the context.

Props

PropTypeDefaultDescription
termReactNode—The label, rendered in a DataListTerm (<dt>).
children*ReactNode—The value, rendered in a DataListDetail (<dd>). Without term, the children render as they are, with no wrapper.
termPropsDetailedHTMLProps<object, object>—Props forwarded directly to the DataListTerm element.
detailPropsDetailedHTMLProps<object, object>—Props forwarded directly to the DataListDetail element.

DataList, DataListTerm and DataListDetail take the attributes of <dl>, <dt> and <dd>.

Styling hooks

Restyle it without forking: target the slots, or set the tokens on a parent, a skin or the list itself.

Tokens it reads

Color

--cml-border--cml-border-control--cml-card-border--cml-card-shadow--cml-fg--cml-fg-secondary--cml-surface-raised

Shape & size

--cml-border-width--cml-radius-popover

Type & motion

--cml-font-label

This component only

--cml-corner-shape--cml-data-list-term-fg--cml-data-list-term-tracking--cml-data-list-term-transform

Accessibility

TabMoves to links and buttons inside the values. The list itself takes no focus.
TableRows and columns, to compare several records.StatOne number with a label, for a dashboard.BadgeA short status inside a value.
Was this page helpful? · Edit this page on GitHub