DescriptionList

Molecule
Key-value pairs in stacked, two-column, or inline-edit layouts. Used for detail panels, settings, and profile views. Rows flagged update carry a working in-place editor: Update opens it, Enter or Save commits the new value and fires onUpdate, Escape or Cancel dismisses it. muted sets each text value as a note beside its term, in the small type and the muted ink, for a list that explains its terms (a key and its effect) rather than reporting data; a node value renders as given, and a platform skin whose value detail is already the secondary ink keeps its type.
src/molecules/description-lists
View in Surfaces & data

Playground

Every control sets a real prop of DescriptionListProps. The JSX below updates as you go.
Profile
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
Props
Layout
pick one
divided
boolean
card
boolean
title
string
JSX · DescriptionListProps
<DescriptionList divided card title="Profile" />

Variants

4 examples from src/molecules/description-lists/description-lists.md, each rendered live from its own JSX.
Application details
Personal information and credentials.
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
Card
<DescriptionList
card
title="Application details"
subtitle="Personal information and credentials."
items={[
{ term: "Full name", value: "Rachel Chen" },
{ term: "Email", value: "rachel.chen@example.com" },
{ term: "Role", value: "Admin" }
]}
/>
Status
Active
Seats
12 of 20
Renews
Mar 1, 2026
Inline
Each value sits on the right of its term. A value too wide to fit beside its term (a long id with its Copy button in a narrow sidebar) wraps onto its own line under the term, still at the trailing edge, so the list never runs past its container.
<DescriptionList
inline
items={[
{ term: "Status", value: "Active" },
{ term: "Seats", value: "12 of 20" },
{ term: "Renews", value: "Mar 1, 2026" }
]}
/>
Status
Active
Plan
Pro
Members
RC
AT
GH
+5
Client ID
clnt_01H2X8K9
Rich values
A row's value can compose real atoms: status/badge render Badges, avatars renders an overlapping AvatarGroup (overflow folds the rest into its "+N" chip), and copyValue appends a ghost Copy button that hands the string to onCopy (wire your clipboard there).
<DescriptionList
twoColumn
items={[
{ term: "Status", value: "Active", status: true },
{ term: "Plan", value: "Pro", badge: true },
{ term: "Members", value: "8 members", avatars: [{ name: "Rachel Chen" }, { name: "Alan Turing" }, { name: "Grace Hopper" }], overflow: 5 },
{ term: "Client ID", value: "clnt_01H2X8K9", mono: true, copyValue: "clnt_01H2X8K9" }
]}
/>
Name
Rachel Chen
Email
rachel.chen@example.com
Inline-edit
<DescriptionList
twoColumn
items={[
{ term: "Name", value: "Rachel Chen", update: true },
{ term: "Email", value: "rachel.chen@example.com", update: true }
]}
/>

Anatomy

Profile
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
1
List
2
Term
3
Detail
4
Action
Dimmed parts appear only in some states or variants.

Props

15 props on DescriptionListProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
items *
DescriptionListItem[]
–
Card header band
2 props
title
string
–
subtitle
string
–
Layout
pick one
3 props
inline
boolean
false
twoColumn
boolean
false
stacked
boolean
false
Rows
pick one
4 props
divided
boolean
false
ruled
boolean
false
Rows: a 1 px top rule on every row, the first included, with the row padded 9 above and below and the term hugging its content (a 120 floor, 14 to the value), the v4 hand-off's accessibility-card rows. Wins over divided.
compact
boolean
false
Density: tightens the ruled rows to the v4 hand-off's semantics-card rows (Component.dc.html line 263): 8 above and below the text, 12 to the value, the term a fixed 110 column and the value at the top of its row. Only the ruled rows have a compact step; a plain or divided list is unchanged by it.
muted
boolean
false
The values as notes beside their terms: a text value in the small type and the muted ink (400 13/19) instead of the full-weight foreground data, for a list that explains each term (a key and its effect). A node value renders as given, and a platform skin whose value detail is already the secondary ink keeps its type.
Surface
5 props
card
boolean
false
onUpdate
(index: number, value: string) => void
–
Fires when a row's inline editor commits (Enter or Save): the item index and the new value.
onCopy
(value: string) => void
–
Fires with a row's copyValue when its "Copy" button is pressed.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Enter
Activates
Space
Activates
Tab
Moves focus on
Web
control 10 · field 10 · card 16 · Instrument Sans
Enter
Activates
Space
Activates
Tab
Moves focus on
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Enter
Activates
Space
Activates
Tab
Moves focus on
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<DescriptionList
items={[
{ term: "Full name", value: "Rachel Chen" },
{ term: "Email", value: "rachel.chen@example.com" },
{ term: "Role", value: "Admin" }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ion-tx
--ln
--sf
--sh-sm
--tx3

Related components