Components
PropertyList
Dense label/value rows for detail panels and settings summaries.
PropertyList renders dense label/value rows as a <dl> for detail panels and
settings summaries. Feed it an items array of { label, value }, or pass
PropertyItem children when a value needs custom markup. Control the layout with
orientation (horizontal puts label and value side by side, vertical stacks
them), toggle divided rules, and set the label column width with labelWidth.
Example
Preview
- Workspace
- Acme Operations
- Plan
- Growth
- Owner
- ada@acme.test
import { PropertyList } from '@officina/ui';
<PropertyList
items={[
{ label: 'Workspace', value: 'Acme Operations' },
{ label: 'Plan', value: 'Growth' },
{ label: 'Owner', value: 'ada@acme.test' },
]}
/>;API
PropertyList
The label/value list container.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | `PropertyItem` children; alternative to `items`. |
| divided | boolean | true | Add dividing lines between rows. |
| items | PropertyListItem[] | — | Data-driven rows; alternative to passing `PropertyItem` children. |
| labelWidth | string | 10rem | Width of the label column when horizontal. |
| orientation | enum | horizontal | `horizontal` puts label and value side by side; `vertical` stacks them. |
PropertyItem
A single label/value row, for custom value markup.
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Row value. |
| label* | ReactNode | — | Row label. |
| divided | boolean | true | Draw a divider above the row. |
| labelWidth | string | 10rem | Width of the label column when horizontal. |
| orientation | enum | horizontal | Layout of label vs value; inherited from the list by default. |