DescriptionList

Record facts

Owner: Ada Lovelace
Stage: Proposal
Created: 3 March
Source: Inbound
Notes: Follow up after the product review.

import { DescriptionItem, DescriptionList } from '@rookcom/monarch-react';

<DescriptionList columns={2} style={{ width: '100%' }}>
  <DescriptionItem term="Owner">Ada Lovelace</DescriptionItem>
  <DescriptionItem term="Stage">Proposal</DescriptionItem>
  <DescriptionItem term="Created">3 March</DescriptionItem>
  <DescriptionItem term="Source">Inbound</DescriptionItem>
  <DescriptionItem term="Notes" wide>
    Follow up after the product review.
  </DescriptionItem>
</DescriptionList>

Usage examples

Copyable values and empty placeholders

import { DescriptionItem, DescriptionList } from '@rookcom/monarch-react';

<DescriptionList columns={2} style={{ width: '100%' }}>
  <DescriptionItem term="Workspace ID" copyable>
    ws_8f2a91c4
  </DescriptionItem>
  <DescriptionItem term="Webhook URL" copyable>
    https://hooks.example.com/w/8f2a91c4
  </DescriptionItem>
  <DescriptionItem term="Phone">{null}</DescriptionItem>
  <DescriptionItem term="Tax ID" placeholder="Not provided">
    {''}
  </DescriptionItem>
</DescriptionList>

Inline layout with a clamped value

import { DescriptionItem, DescriptionList } from '@rookcom/monarch-react';

<DescriptionList
  layout="inline"
  columns={1}
  style={{ width: '100%', maxWidth: '32rem' }}
>
  <DescriptionItem term="Page title">
    Pricing plans for teams of every size
  </DescriptionItem>
  <DescriptionItem term="Meta description" truncate={2}>
    Compare plans side by side, see what each includes, and start a free trial. Every
    plan includes unlimited projects, guest access and priority support during business
    hours, with annual billing available at a discount.
  </DescriptionItem>
  <DescriptionItem term="Canonical">{null}</DescriptionItem>
</DescriptionList>

Responsive columns

import { DescriptionItem, DescriptionList } from '@rookcom/monarch-react';

<DescriptionList columns="auto" style={{ width: '100%' }}>
  <DescriptionItem term="Plan">Team</DescriptionItem>
  <DescriptionItem term="Seats">12 of 15</DescriptionItem>
  <DescriptionItem term="Renews">1 June</DescriptionItem>
  <DescriptionItem term="Billing">Annual</DescriptionItem>
</DescriptionList>

Purpose

Key/value facts on a detail page (owner, stage, created, …), as a semantic <dl>. Items can offer a copy button, show a placeholder for empty values, and clamp long values behind "Show more".

Use when

Showing read-only fields of one record.
Ids, keys and URLs people copy: use copyable.
Values that may be missing: the placeholder replaces hand-rolled em dashes.

Avoid when

Comparing many records: use a table.
Editable fields: use a form with Field, or InlineEditText per value.

Design principles

Semantic markup: each item is a <dt>/<dd> pair.
Values wrap anywhere so long ids and URLs never overflow.
An empty value is visibly empty (a muted dash) and audibly named ("Not set"), never a blank cell.
Truncation never hides data: the full value is one "Show more" away, not only in a tooltip.

API reference

import { DescriptionItem, DescriptionList } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`DescriptionItem`	component	server-safe	`.mn-dl-min-column`
`DescriptionList`	component	server-safe	`.mn-dl-min-column`

DescriptionList renders a <dl>; DescriptionItem a <div> with <dt> and <dd>. Both forward their ref.

Server-safe: the list and items have no state. The copy button and the clamp toggle are client components rendered only when used.

--mn-dl-min-column sets the minimum column width of columns="auto" (default 12rem).

Generated from the TypeScript declarations of packages/react/src/components/data-display/description-list.

Properties

`DescriptionItem`

Prop	Type	Description
`term` required	`ReactNode`
`children`	`ReactNode`	The value. `null`, `undefined`, `false` and `''` render the `placeholder`.
`className`	`string`
`collapseLabel`	`string`	Label of the collapse button. Default "Show less".
`copyable`	`string \| boolean`	Adds an icon CopyButton after the value. `true` copies the value when it is a string or number; pass a string to copy something else (the full id behind a shortened one). Not shown for an empty value.
`copyLabel`	`string`	Accessible name of the copy button. Default "Copy" followed by the term when it is text.
`emptyLabel`	`string`	Screen-reader text for the default placeholder. Default "Not set".
`expandLabel`	`string`	Label of the expand button. Default "Show more".
`placeholder`	`ReactNode`	Shown for an empty value. Default an em dash, read as `emptyLabel`.
`truncate`	`number \| boolean`	Clamp the value to this many lines (`true` is 1) with a "Show more" button that expands it. The button appears only when the text overflows.
`wide`	`boolean`	Span all columns.