DescriptionList

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.
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
iOS
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
Android
Full name
Rachel Chen
Email
rachel.chen@example.com
Role
Admin
Web
tsx
<DescriptionList
items={[
{ term: "Full name", value: "Rachel Chen" },
{ term: "Email", value: "rachel.chen@example.com" },
{ term: "Role", value: "Admin" }
]}
/>

Props

Prop
Description
items
required
DescriptionListItem[]
—
title
string
Card header band (only shown when `card`): a title and optional subtitle.
subtitle
string
Card header band (only shown when `card`): a title and optional subtitle.
inline
boolean
Layout (pick one; precedence inline > twoColumn > stacked).
twoColumn
boolean
Layout (pick one; precedence inline > twoColumn > stacked).
stacked
boolean
Layout (pick one; precedence inline > twoColumn > stacked).
divided
boolean
Rows: hairline divider beneath every row but the last.
card
boolean
Surface: wrap the list in a card surface.
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.

Do & Don’t

Two-column

Don’t
Client identifier
clnt_01H2X8K9P3Q7VN4W6R5T0JYMZF
Status
Active
A too-narrow label column wraps the longest term and knocks the two columns out of alignment.
Do
Client identifier
clnt_01H2X8K9P3Q7VN4W6R5T0JYMZF
Status
Active
Fix the label column wide enough for the longest term so every value lines up on one edge.

Inline-edit

Don’t
Name
Rachel Chen
Email
rachel.chen@example.com
Editable rows that look identical to read-only ones give no hint a value can be changed.
Do
Name
Rachel Chen
Email
rachel.chen@example.com
Give every editable row a trailing Update affordance so the inline editor is discoverable; pressing it opens the editor in place, and Enter or Save commits.

Stacked

Don’t
Full name
Rachel Chen
Email
rachel.chen@example.com
Muting the value and bolding nothing inverts the hierarchy; the label outweighs the data it describes.
Do
Full name
Rachel Chen
Email
rachel.chen@example.com
Keep the label small, uppercase, and muted above a full-weight value so the data stays primary.
← Collapsible
EmptyState →