---
title: Key value
description: Attributes of one event as a two-column list.
---

```tsx
import { KeyValue } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function KeyValueBasic() {
  return (
    <Preview block={true}>
      <KeyValue.Root>
        {Array.from({ length: 3 }, (_, index) => (
          <KeyValue.Item key={index} label={`Key ${index + 1}`}>
            Value {index + 1}
          </KeyValue.Item>
        ))}
      </KeyValue.Root>
    </Preview>
  );
}
```

- Keys are muted and break after a dot, so a long attribute key such as `telemetry.sdk.language` stays readable. Values wrap anywhere, so long IDs never overflow.
- Inside a side panel, pass a narrower `keyWidth`.
- On narrow screens the value moves under its key.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `keyWidth?` | `number` | `188` | On Root. Key column width in px. |
| `label` | `ReactNode` | - | On Item. The key; a string label breaks after each dot. |

Parts: `Root`, `Item`. `Root` renders a `dl`; `Item` renders a `div` with the `dt` and `dd` inside. Other props go to the `dl` and the `div`.