---
title: "Segmented Control"
description: "2–5 seçenekten birini seçtirir. Aktif segment, seçime doğru kayan yükseltilmiş bir pill'dir."
---

<Callout type="info" title="Ne zaman kullanılır">
Görünüm değiştiren sekmeler, kart başlığındaki zaman aralığı, liste/ızgara gibi tekli seçimler. Beşten fazla seçenek için Select kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/segmented-control
```

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

## Örnekler

### Sekmeler ve sayaç

badge, bekleyen iş sayısını gösterir. Aktif segmentte koyu, diğerlerinde soluk.

**Örnek: Sekmeler ve sayaç** (`segmented-control/tabs`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/segmented-control/tabs)

```tsx
import * as React from "react"

import { SegmentedControl } from "@/components/ikas/segmented-control"

export default function SegmentedControlTabs() {
  const [tab, setTab] = React.useState("all")

  return (
    <SegmentedControl
      aria-label="Sipariş filtresi"
      value={tab}
      onValueChange={setTab}
      options={[
        { value: "all", label: "Tümü" },
        { value: "pending", label: "Bekleyen", badge: 3 },
        { value: "done", label: "Tamamlanan" },
      ]}
    />
  )
}
```

### Kart başlığında

size="sm" ve mode="radio". Değer değiştirir, sayfa değiştirmez.

**Örnek: Kart başlığında** (`segmented-control/card-header`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/segmented-control/card-header)

```tsx
import * as React from "react"

import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { SegmentedControl } from "@/components/ikas/segmented-control"

const data = {
  "7": { value: "₺48.210", label: "son 7 gün" },
  "30": { value: "₺184.320", label: "son 30 gün" },
  "90": { value: "₺512.940", label: "son 90 gün" },
} as const

export default function SegmentedControlCardHeader() {
  const [range, setRange] = React.useState<keyof typeof data>("30")

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Ciro</CardTitle>
        <CardAction>
          <SegmentedControl
            size="sm"
            mode="radio"
            aria-label="Zaman aralığı"
            value={range}
            onValueChange={setRange}
            options={[
              { value: "7", label: "7G" },
              { value: "30", label: "30G" },
              { value: "90", label: "90G" },
            ]}
          />
        </CardAction>
      </CardHeader>
      <CardContent className="flex flex-col gap-0.5">
        <span className="text-2xl font-semibold tracking-[-0.02em] tabular-nums">{data[range].value}</span>
        <span className="text-[13px] text-muted-foreground">{data[range].label}</span>
      </CardContent>
    </Card>
  )
}
```

### İkonlu

Yalnızca ikon kullanıyorsanız her seçeneğe aria-label verin.

**Örnek: İkonlu** (`segmented-control/icons`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/segmented-control/icons)

```tsx
import * as React from "react"
import { LayoutGridIcon, ListIcon, MonitorIcon, SmartphoneIcon } from "lucide-react"

import { SegmentedControl } from "@/components/ikas/segmented-control"

export default function SegmentedControlIcons() {
  const [view, setView] = React.useState("list")
  const [device, setDevice] = React.useState("desktop")

  return (
    <div className="flex flex-wrap items-center gap-4">
      <SegmentedControl
        mode="radio"
        aria-label="Görünüm"
        value={view}
        onValueChange={setView}
        options={[
          { value: "list", icon: <ListIcon />, "aria-label": "Liste" },
          { value: "grid", icon: <LayoutGridIcon />, "aria-label": "Izgara" },
        ]}
      />
      <SegmentedControl
        mode="radio"
        aria-label="Önizleme cihazı"
        value={device}
        onValueChange={setDevice}
        options={[
          { value: "desktop", icon: <MonitorIcon />, label: "Masaüstü" },
          { value: "mobile", icon: <SmartphoneIcon />, label: "Mobil" },
        ]}
      />
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Seçenekleri kısa tutun: tek kelime ya da kısaltma.
- Ok tuşlarıyla gezinme hazır gelir; ekstra klavye kodu yazmayın.

**Yapmayın:**

- Aksiyon tetiklemek için kullanmayın; o iş Button'ın.
- Aynı satıra iki segmented control koymayın.

## API

### `SegmentedControl<T>`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `options` (zorunlu) | `SegmentedControlOption<T>[]` | - | Seçenekler. Etiketsiz seçenekler kare ikon butonu olur. |
| `value` (zorunlu) | `T` | - | Kontrollü seçim. |
| `onValueChange` (zorunlu) | `(value: T) => void` | - | Kontrollü seçim. |
| `size` | `"sm" \| "default"` | `"default"` | 32 / 36px. Kart başlıkları ve araç çubuklarında sm. |
| `mode` | `"tabs" \| "radio"` | `"tabs"` | tabs görünüm değiştirir (tablist), radio değer seçer (radiogroup). |
| `className` | `string` | - |  |
| `aria-label` | `string` | - | Grubun erişilebilir adı. |