---
title: "Wheel Picker"
description: "Sürüklenen, fırlatılan ya da klavyeyle adım adım çevrilen iOS tarzı seçim çarkı. Seçilen satıra yaylanarak oturur."
---

<Callout type="info" title="Ne zaman kullanılır">
Kısa ve sıralı bir listeden tek değer: saat, dakika, gün sayısı, adet. Özellikle mobilde ve [Drawer](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/drawer) içinde. Tarih için hazır [Date Wheel Picker](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/date-wheel-picker) kullanın; uzun ya da aranması gereken listeler için [Combobox](https://builders.ikas.com/tr/docs/app-development/ui-kit/components/combobox) daha uygundur.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/wheel-picker
```

Registry tanımı yoksa önce [Kurulum](https://builders.ikas.com/tr/docs/app-development/ui-kit/installation) adımlarını tamamlayın. Ek npm paketi kurulmaz; animasyon da bileşenin içindedir.

Sürükleme, fırlatma, fare tekerleği ya da trackpad, soluk bir satıra tıklama ve klavye (↑ ↓, PageUp, PageDown, Home, End) ile çalışır. Kullanıcı hareketi azaltmayı seçtiyse (`prefers-reduced-motion`) çark satıra animasyonsuz geçer.

## Örnekler

### Tek çark

options string ya da `{ value, label }` dizisi alır. Tek başına kullanıldığında kendi çerçevesini çizer; className bu çerçeveye gider. Etiketi aria-labelledby ile FieldLabel'a bağlayın.

**Örnek: Tek çark** (`wheel-picker/basic`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/wheel-picker/basic)

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

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { WheelPicker } from "@/components/ui/wheel-picker"

const days = Array.from({ length: 14 }, (_, i) => ({ value: String(i + 1), label: `${i + 1} gün` }))

export default function WheelPickerBasic() {
  const [value, setValue] = React.useState("3")

  return (
    <Field className="max-w-48">
      <FieldLabel id="prep-time-label">Hazırlık süresi</FieldLabel>
      <WheelPicker aria-labelledby="prep-time-label" options={days} value={value} onValueChange={setValue} />
      <FieldDescription>Sipariş {value} iş günü içinde kargoya verilir.</FieldDescription>
    </Field>
  )
}
```

### Saat seçimi

WheelPickerGroup birden fazla çarkı tek çerçevede ve tek seçim şeridinin arkasında yan yana dizer. size, visibleCount ve disabled gruptan gelir. Her çarka ayrı aria-label verin.

**Örnek: Saat seçimi** (`wheel-picker/time`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/wheel-picker/time)

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

import { WheelPicker, WheelPickerGroup } from "@/components/ui/wheel-picker"

const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, "0"))
const minutes = Array.from({ length: 12 }, (_, i) => String(i * 5).padStart(2, "0"))

export default function WheelPickerTime() {
  const [hour, setHour] = React.useState("14")
  const [minute, setMinute] = React.useState("30")

  return (
    <div className="grid w-full max-w-56 gap-3 rounded-xl bg-card p-4 shadow-card">
      <div className="flex items-baseline justify-between">
        <span className="text-sm font-medium">Yayın saati</span>
        <span className="text-sm text-muted-foreground tabular-nums">
          {hour}:{minute}
        </span>
      </div>
      <WheelPickerGroup aria-label="Yayın saati">
        <WheelPicker aria-label="Saat" options={hours} value={hour} onValueChange={setHour} />
        <span aria-hidden className="flex items-center font-medium text-muted-foreground">
          :
        </span>
        <WheelPicker aria-label="Dakika" options={minutes} value={minute} onValueChange={setMinute} />
      </WheelPickerGroup>
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Her çarka aria-label verin ("Saat", "Dakika"); grup için de bir ad verin.
- visibleCount'u tek sayı verin; seçim şeridi ortada kalır.
- Birlikte okunan değerleri (saat ve dakika) WheelPickerGroup içinde toplayın.

**Yapmayın:**

- Onlarca satırlık ya da aranması gereken listelerde kullanmayın; Combobox kullanın.
- Masaüstü formda tarih için tek başına kullanmayın; Date Picker ya da Date Wheel Picker kullanın.
- onValueChange içinde ağır iş yapmayın; sürüklerken her satırda çağrılır.

## API

### `WheelPicker`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `options` (zorunlu) | `WheelPickerOption[]` | - | Seçenekler. String hem değer hem etikettir; { value, label } ayrı etiket verir. |
| `value` | `string` | - | Seçili değer. Kontrolsüz kullanım için defaultValue verin. |
| `defaultValue` | `string` | - | Kontrolsüz kullanımda ilk değer. |
| `onValueChange` | `(value: string) => void` | - | Şeridin altındaki değerle çağrılır: sürüklerken anlık, fırlatmada çark durunca. |
| `size` | `WheelPickerSize` | - | Tek başına kullanımda satır yüksekliği: sm 32px, default 36px. Grup içinde grup belirler. |
| `visibleCount` | `number` | - | Tek başına kullanımda görünen satır sayısı. Grup içinde grup belirler. |
| `disabled` | `boolean` | - | Sürükleme, tekerlek ve klavyeyi kapatır. |
| `aria-label` | `string` | - | Çarkın erişilebilir adı, örneğin "Saat". |

### `WheelPickerGroup`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `size` | `WheelPickerSize` | `"default"` | Satır yüksekliği: sm 32px, default 36px. |
| `visibleCount` | `number` | `5` | Görünen satır sayısı. Tek sayı verin. |
| `disabled` | `boolean` | `false` | Grubu soluklaştırır ve içindeki bütün çarkları kapatır. |