DescriptionList

Stacked facts

Use a readonly collection of stable, unique item IDs. IDs identify React keys within the list and are never emitted as DOM IDs, so the same facts can appear in a preview and an inspector.

Aligned facts and wrapping

Aligned facts use label and value columns when their container has room and stack inside narrow surfaces such as an inspector. Labels, long identifiers, and values wrap. A number wraps only between its digit groups and keeps its unit with the last group: 1,234,567.890 kPa can wrap as 1,234, over 567.890 kPa, never between digits or before its unit. A number without group separators stays whole. A word after a number that is not a unit, such as a code, wraps as text, and a run of more than 15 digits without separators (a serial number) is an identifier and wraps anywhere. Reserve mono for exact identifiers, timestamps, coordinates, and measurements whose character positions matter.

Detail rows

Use layout="details" for metadata in previews, inspectors, and compact summaries. Labels occupy 40% of the available column space and values occupy 60%, separated by a 16px gap. Labels are muted, uppercase, 9px medium text; values stay 11px and align right. Rows align on their text baselines with 8px spacing. Both columns wrap without switching to stacked rows at narrow widths.

EntityPreview and OperationalStatus use this same layout for their facts and quality rows. Keep actionable content at the component's regular control size; the smaller labels are passive descriptions.

Exact values and supplied content

Direct booleans display as true and false. Numeric zero remains 0. Supply explicit text for missing values and include the unit in the value; DescriptionList does not infer units, precision, or missing-value meaning. In development, a value that is null, undefined or empty text logs a warning naming its item, because its term would otherwise stand alone. Other React nodes render unchanged, including navigation and copy controls.

Props

DescriptionListItem is { id: string; label: ReactNode; value: ReactNode; mono?: boolean }. The forwarded ref targets the native dl, and ordinary description-list HTML attributes are supported.

Accessibility

• Native dl, dt, and dd semantics associate each term with its supplied value.
• Interactive content keeps its own keyboard behavior and accessible name.
• Aligned columns stack in narrow containers; detail rows retain two wrapping columns.
• Values retain their authored case and exact supplied content.

Manifest entry

<DescriptionList layout="aligned" items={[{ id: "pressure", label: "Pressure", value: "0 kPa", mono: true }, { id: "enabled", label: "Enabled", value: false }]} />

{
  "description": "Semantic label/value facts with wrapping, exact values, and stacked, responsive aligned, or compact detail layouts.",
  "props": {
    "items": {
      "type": "array",
      "items": {
        "id": "string (required, unique)",
        "label": "ReactNode (required)",
        "value": "ReactNode (required)",
        "mono": "boolean (optional)"
      },
      "required": true,
      "description": "Readonly DescriptionListItem array. IDs are stable unique keys within this list, never DOM IDs. Direct booleans render as true/false; zero and other ReactNode values are preserved. Supply explicit text for missing values (development warns for null, undefined or empty text) and include units in the value. A value that is a number, optionally followed by its unit, wraps only between digit groups and keeps the unit with its last group; a word after it that is not a unit wraps as text, and more than 15 ungrouped digits are an identifier that wraps anywhere."
    },
    "layout": {
      "type": "enum",
      "values": [
        "stacked",
        "aligned",
        "details"
      ],
      "default": "stacked",
      "description": "Stacked places each value below its label. Aligned uses columns when space permits and stacks in narrow containers. Details keeps 40/60 columns with 9px medium uppercase muted labels, 11px right-aligned values, baseline alignment, 8px row spacing and a 16px column gap. Long content wraps in either column."
    },
    "className": {
      "type": "string"
    }
  },
  "composable_with": [
    "EntityPreview",
    "OperationalStatus",
    "Inspector",
    "Popover",
    "Card",
    "Link",
    "CopyButton"
  ],
  "never_inside": [
    "Button",
    "Badge",
    "Link"
  ],
  "example": "<DescriptionList layout=\"aligned\" items={[{ id: \"pressure\", label: \"Pressure\", value: \"0 kPa\", mono: true }, { id: \"enabled\", label: \"Enabled\", value: false }]} />"
}