# DescriptionList

Semantic key/value display using `<dl>` / `<dt>` / `<dd>`. Compose with `DescriptionList.Item` or an `items` array; optionally collapse with `maxItems`.

## Examples

### Default

A titled single-column metadata block.

```tsx
import { DescriptionList } from '@var-ui/react';

<DescriptionList title="Details">
  <DescriptionList.Item label="Owner">Ada</DescriptionList.Item>
  <DescriptionList.Item label="Status">Active</DescriptionList.Item>
</DescriptionList>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Horizontal multi-column

Set `columns="multi"` with `labelPosition="start"` for side-by-side label/value pairs in a multi-column grid.

```tsx
import { DescriptionList } from '@var-ui/react';

<DescriptionList columns="multi" labelPosition="start" title="Project">
  <DescriptionList.Item label="Owner">Ada Lovelace</DescriptionList.Item>
  <DescriptionList.Item label="Status">Active</DescriptionList.Item>
  <DescriptionList.Item label="Region">us-west-2</DescriptionList.Item>
  <DescriptionList.Item label="Plan">Pro</DescriptionList.Item>
</DescriptionList>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| columns | number \| "single" \| "multi" \| undefined | no |  |  |
| items | DescriptionListItemData[] \| undefined | no |  |  |
| labelPosition | "top" \| "start" \| undefined | no |  |  |
| maxItems | number \| undefined | no |  |  |
| title | ReactNode | no |  |  |

## Accessibility

Uses native description-list semantics (`dl`/`dt`/`dd`). Keep labels short and unique within the list. When `maxItems` enables “Show more”, the toggle is a real button for keyboard users.