---
title: "Accordion"
description: "Başlığa tıklayınca açılan bölümler. Liste ya da ayrı kartlar halinde, tek tek veya birlikte açılır."
---

<Callout type="info" title="Ne zaman kullanılır">
SSS, yardım metinleri ve uzun ayar ekranlarını gruplara bölmek. Tek bir açılır alan için [Collapse](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/collapse), açınca ayar gösteren bir özellik için [Toggle Section](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/toggle-section) kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/accordion
```

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

## Örnekler

### Sık sorulan sorular

type="single" ve collapsible: aynı anda bir bölüm açık kalır, açık olana tekrar tıklayınca kapanır.

**Örnek: Sık sorulan sorular** (`accordion/faq`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/accordion/faq)

```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const questions = [
  {
    value: "sync",
    question: "Ürünler ne sıklıkla eşitlenir?",
    answer: "Stok ve fiyat değişiklikleri birkaç dakika içinde, yeni ürünler her saat başı eşitlenir.",
  },
  {
    value: "billing",
    question: "Deneme süresi bitince ne olur?",
    answer: "Plan seçmezseniz uygulama salt okunur moda geçer. Verileriniz 30 gün saklanır.",
  },
  {
    value: "uninstall",
    question: "Uygulamayı kaldırırsam verilerim silinir mi?",
    answer: "Mağazanızdaki ürünler ve siparişler etkilenmez. Yalnızca uygulamanın kendi ayarları silinir.",
  },
]

export default function AccordionFaq() {
  return (
    <Accordion type="single" collapsible defaultValue="sync" className="max-w-lg">
      {questions.map((q) => (
        <AccordionItem key={q.value} value={q.value}>
          <AccordionTrigger>{q.question}</AccordionTrigger>
          <AccordionContent>{q.answer}</AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

### Kartlar

variant="card" her bölümü ayrı bir karta koyar. type="multiple" ile bölümler birbirinden bağımsız açılır.

**Örnek: Kartlar** (`accordion/card`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/accordion/card)

```tsx
import { BellIcon, PackageIcon, TruckIcon } from "lucide-react"

import { Switch } from "@/components/ui/switch"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

const sections = [
  { value: "products", icon: PackageIcon, title: "Ürün eşitleme", rows: ["Stok miktarını eşitle", "Fiyatları eşitle"] },
  { value: "shipping", icon: TruckIcon, title: "Kargo", rows: ["Takip numarasını müşteriye gönder"] },
  { value: "alerts", icon: BellIcon, title: "Bildirimler", rows: ["Eşitleme hatasında e-posta gönder", "Haftalık özet gönder"] },
]

export default function AccordionCard() {
  return (
    <Accordion type="multiple" variant="card" defaultValue={["products"]} className="max-w-lg">
      {sections.map((section) => (
        <AccordionItem key={section.value} value={section.value}>
          <AccordionTrigger>
            <span className="flex items-center gap-2.5">
              <section.icon className="size-4 text-icon" />
              {section.title}
            </span>
          </AccordionTrigger>
          <AccordionContent className="flex flex-col gap-3">
            {section.rows.map((row, i) => (
              <label key={row} className="flex items-center justify-between gap-4 text-foreground">
                {row}
                <Switch defaultChecked={i === 0} />
              </label>
            ))}
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Başlıkları kısa ve taranabilir tutun; içeriği başlıktan tahmin edilebilsin.
- İlk ve en önemli bölümü defaultValue ile açık başlatın.

**Yapmayın:**

- Kullanıcının her zaman görmesi gereken bilgiyi kapalı bölüme saklamayın.
- Accordion içine accordion koymayın.

## API

shadcn/ui ile aynı parçalar: `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`. Radix Accordion prop'larının hepsi çalışır (type, collapsible, value, onValueChange).

### `Accordion`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `variant` | `"list" \| "card"` | `"list"` | list bölümleri çizgiyle ayırır, card her bölümü ayrı yükseltilmiş kart yapar. |