---
title: "Description List"
description: "Detay ekranları için etiket ve değer çiftleri."
---

<Callout type="info" title="Ne zaman kullanılır">
Sipariş, müşteri ve ödeme detayları. Etiket/değer satırlarını elle hizalayacağınız her yer.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/description-list
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın.

## Örnekler

### Yatay

Etiket solda, değer sağda, ayrılmış satırlar.

**Örnek: Yatay** (`description-list/horizontal`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/description-list/horizontal)

```tsx
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DescriptionList } from "@/components/ikas/description-list"

export default function DescriptionListHorizontal() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Ödeme</CardTitle>
      </CardHeader>
      <CardContent>
        <DescriptionList
          items={[
            { label: "Durum", value: <Badge status="success" dot>Ödendi</Badge> },
            { label: "Yöntem", value: "Kredi kartı · •••• 4242" },
            { label: "Taksit", value: "3" },
            { label: "İşlem numarası", value: <span className="font-mono text-[13px]">TRX-20261006-4821</span> },
          ]}
        />
      </CardContent>
    </Card>
  )
}
```

### Alt alta

Dar yan sütunlar için.

**Örnek: Alt alta** (`description-list/stacked`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/description-list/stacked)

```tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DescriptionList } from "@/components/ikas/description-list"
import { customer } from "@/demos/_data"

export default function DescriptionListStacked() {
  return (
    <Card className="w-full max-w-xs">
      <CardHeader>
        <CardTitle>Müşteri</CardTitle>
      </CardHeader>
      <CardContent>
        <DescriptionList
          layout="stacked"
          items={[
            { label: "Ad soyad", value: customer.name },
            { label: "E-posta", value: customer.email },
            { label: "Teslimat adresi", value: customer.address },
          ]}
        />
      </CardContent>
    </Card>
  )
}
```

## API

### `DescriptionList`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `layout` | `"horizontal" \| "stacked"` | `"horizontal"` | Yan sütunda stacked kullanın. |
| `items` (zorunlu) | `DescriptionListItem[]` | - | Eksik değerler uzun tire olarak gösterilir. |