Components / Property List

Property List

A read-only set of label/value facts about ONE subject: what a connection is bound to, what an API key’s prefix is, what a post scored. Use it wherever you were about to hand-roll a two-column <dl>.

import { PropertyList } from '@layers/ui/property-list'

Rendered stock

House rules

• One subject, many attributes. DataTable owns the other shape — many rows sharing the same columns. If you find yourself rendering a PropertyList per row, you wanted a table.
• Read-only by definition. The moment a value becomes editable it belongs to the Field family with an explicit Save; never drop an input into this list.
• Labels are muted, values take the foreground. A column of labels should read as scaffolding so the eye lands on the facts.
• Values are NOT mono. Ids, emails and URLs are mixed-case, and mono is scoped to ALL-CAPS text and code (rules.md). An account id is a value, not a code block.
• It renders a real <dl>, so each value is announced with its label. That is the reason to reach for this over two divs.
• Values accept a node, so a status can be a Badge and a timestamp can be a <time>. Keep them short — a value that needs a paragraph is not a property.
• An empty items array renders nothing, so a caller never has to guard it.
• A label accepts a node, for the one case a row needs it: a (?) tooltip explaining what the row measures. The explanation sits on the label, never beside the value. Give such a row a key, since a node cannot key itself.