Key / value list

KeyValueList draws label / value rows split by hairlines: the label on the left, the value right-aligned and drawn by its type. A detail adds a dim note after the value. The list sits in a card by default, with title as the card's eyebrow.

Preview Code

Connecting to the DMS preview…

static keyValueList = KeyValueList({
  title: "Subscription",
  currency: "EUR",
  items: [
    { id: "plan", label: "Plan", value: "Business" },
    {
      id: "status",
      label: "Status",
      value: "Past due",
      type: "status",
      tone: "error",
    },
    {
      id: "next",
      label: "Next invoice",
      value: 588,
      type: "money",
      detail: "Oct 31",
    },
    {
      id: "renewal",
      label: "Renews on",
      value: "2026-11-01",
      type: "date",
    },
    {
      id: "customer",
      label: "Customer ID",
      value: "cus_Q8f2LmXv01",
      type: "mono",
      copy: true,
    },
  ],
});

Usage

import { KeyValueList } from "@antelopejs/interface-dms/base/key-value-list";

static subscription = KeyValueList({
  title: "$saas.subscription.title",
  fetchUrl: "/api/workspaces/{{params.id}}/subscription", // answers { items }
});

Options

A row (KeyValueListItem) carries a label and a value, plus optional type, tone, to, detail, currency, copy and copyValue. An empty value shows a dash.

Recipes

Copy a value

copy: true draws a copy button after the value, which copies it as shown. copyValue copies another text instead — the full URL behind a short label — and draws the button on its own.

{ id: "endpoint", label: "Public endpoint", value: "https://api.example.com/v1", type: "mono", copy: true },
{ id: "thumb", label: "Thumbnail", value: "thumb · 320×320", copyValue: "https://cdn.example.com/m/42/thumb.webp" },

Inside a card

Set card: false to place the list inside a Card or a Section; dense: true tightens the rows for a side panel.

Pitfalls

• money values are amounts in the currency's unit as you send them; a composed text money parameter, by contrast, takes minor units.
• A composed value is drawn as text whatever the row's type: its parameters already say how each value is written.

Next steps