# PropertyList

> Label/value rows for one record's properties, as a `<dl>`: a fixed label column beside each value that stacks once its container narrows, empty values named in words, and an editable row whose value opens an anchored native popover holding the app's own form.

```ts
import { PropertyList } from "@sdxc/ui";
```

Renders the `<dl>`. Each item is a `<div>` grouping one `<dt>` and one `<dd>`, which
keeps the label/value pairing in the accessibility tree; the list measures itself as a
container, so rows stack in a narrow side pane at any viewport width.

## Examples

```tsx
<PropertyList>
	<PropertyList.Item label="Status"><Badge color="success">Up</Badge></PropertyList.Item>
	<PropertyList.Item label="Reviewers" empty="No reviews" />
</PropertyList>
```

```tsx
<PropertyList variant="tiles">
	<PropertyList.Item label="Uptime">99.98%</PropertyList.Item>
</PropertyList>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `variant?` | `"rows" \| "tiles"` |  |

Also accepts everything in `TagProps<"dl">`.


### PropertyList.Item

Renders one property.

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `RemixNode` | The property's name, rendered in the `<dt>`. |
| `empty?` | `RemixNode` | What the row says when `children` is empty, such as "None" or "No reviews". |
| `edit?` | `Edit` | Turns the value into a button opening an anchored edit popover. |
| `children?` | `RemixNode` | The value: text, a link, a badge, an avatar with a name. |

Also accepts everything in `Omit<TagProps<"div">, "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Variant` | `"rows" \| "tiles"` | `"rows"` sets each label beside its value in a ruled-free column; `"tiles"` sets each property in its own bordered tile, two to a row, for a record's headline figures. |