Description List

The facts about one record, label beside value: the status, the request id, the time, the ip, the api version, the idempotency key, the api key. A <dl> under the hood. Where BasicPage.Row is a 68px row built for a control on its right, these are dense lines of text.

Import

import { DescriptionList } from "@photon-ai/pho-ui/components/description-list";

On a Basic Page the same parts come with the section, as BasicPage.Meta and BasicPage.MetaItem, so a detail page file needs one import.

Layouts

inline (the default) puts the label in a column beside the value column, every label the same width (a subgrid), one line per fact: the request header at the top of a detail page. stacked puts the label above the value and flows the pairs into columns from sm up: an event’s facts in a wider card.

<DescriptionList.Root layout="stacked" columns={3}>
  <DescriptionList.Item label="Event type" value="message.delivered" mono />
  <DescriptionList.Item label="Event ID" value={event.id} mono copy />
  <DescriptionList.Item label="Trace ID" optional mono copy />
</DescriptionList.Root>

Values

value takes a string (it wears the item’s type) or any node; children takes composed content (a Badge, a link) instead. mono sets the value in the mono face for ids, keys, and addresses. copy adds a CopyButton after the value: true copies a string value, a string copies that text when the value is composed (a masked key). A value that is not there says Not set in muted ink (empty changes the words), and optional marks the label (Optional) so an absent value reads as expected rather than missing.

<DescriptionList.Root>
  <DescriptionList.Item label="Status">
    <LogList.Status value={200} />
  </DescriptionList.Item>
  <DescriptionList.Item label="Request ID" value={request.id} mono copy />
  <DescriptionList.Item
    label="Idempotency key"
    value={request.idempotencyKey}
    optional
    mono
    copy
  />
  <DescriptionList.Item label="API key" copy={key.secret}>
    <span className="font-mono text-xs">{key.masked}</span>
  </DescriptionList.Item>
</DescriptionList.Root>

Props

DescriptionList.Root

• layout — inline / stacked (default inline)
• columns — 1 / 2 / 3 (default 1) — pairs per row when stacked, from sm up
• …plus any <dl> attribute

DescriptionList.Item

• label — ReactNode — the fact’s name
• value — ReactNode — the fact
• children — composed content instead of value
• mono — boolean — the mono face
• copy — boolean | string — a copy control after the value
• optional — boolean — marks the label (Optional)
• empty — ReactNode (default Not set) — what an absent value says
• …plus any <div> attribute on the pair

Accessibility

• Real semantics. A <dl> of <dt> / <dd> pairs, so a screen reader reads each label with its value and can jump between terms.
• Copy is a labelled button. Copy request id, then request id copied, with a polite live region. The label comes from the item’s own label when it is a string.
• Absence is text. Not set is read; the muted ink is only how it looks.

Best practices

• One list per record, in the order a reader wants: what happened (status), how to find it again (id), when, then the rest.
• Say optional on the facts a request may not carry (an idempotency key, a trace id), so their absence reads as normal.
• Long values truncate on their line; the copy control has the whole thing. Keep prose values (a description) to a sentence.
• For a form with controls, that is BasicPage.Row; this list is for facts.