# Key value

Shows labeled values, such as the details of a record. Renders a description list (`<dl>`).

```tsx
// demo.tsx
import {KeyValue} from '@earendil-works/elanor-react';

export default function KeyValueDemo() {
  return (
    <KeyValue.Grid>
      <KeyValue.Key>Status</KeyValue.Key>
      <KeyValue.Value>Active</KeyValue.Value>
      <KeyValue.Key>Owner</KeyValue.Key>
      <KeyValue.Value>Alex Morgan</KeyValue.Value>
      <KeyValue.Key>Created</KeyValue.Key>
      <KeyValue.Value>
        <time dateTime="2026-09-21">21 September 2026</time>
      </KeyValue.Value>
    </KeyValue.Grid>
  );
}
```

## Usage

```tsx
import {KeyValue} from '@earendil-works/elanor-react';

<KeyValue.Grid>
  <KeyValue.Key>Status</KeyValue.Key>
  <KeyValue.Value>Active</KeyValue.Value>
</KeyValue.Grid>;
```

`KeyValue.Grid` aligns keys and values in two columns. Keys get a trailing colon; don't add your own.

## Inline

`KeyValue.Inline` keeps a pair on one line and wraps when space runs out.

```tsx
// inline.tsx
import {KeyValue} from '@earendil-works/elanor-react';

export default function KeyValueInlineExample() {
  return (
    <KeyValue.Inline>
      <KeyValue.Key>Status</KeyValue.Key>
      <KeyValue.Value>Active</KeyValue.Value>
    </KeyValue.Inline>
  );
}
```

## API

### `KeyValue.Grid`

Renders `<dl>`. Accepts its HTML attributes and `ref`.

### `KeyValue.Key`

Renders `<dt>`. Accepts its HTML attributes and `ref`.

### `KeyValue.Value`

Renders `<dd>`. Accepts its HTML attributes and `ref`.

### `KeyValue.Inline`

Renders `<dl>`. Accepts its HTML attributes and `ref`.