---
title: "Number Stepper"
description: "−/+ butonlu sayı girişi. Değer yön duyarlı olarak kayar; tıklayınca doğrudan yazılabilir."
---

<Callout type="info" title="Ne zaman kullanılır">
Stok, adet, eşik gibi küçük tam sayılar. Para ve ondalık değerler için Input kullanın.
</Callout>

## Kurulum

```bash
npx shadcn@latest add @ikas/number-stepper
```

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

## Örnekler

### Form içinde

Enter veya odaktan çıkınca kaydeder, Esc vazgeçer. min/max dışına çıkılamaz.

**Örnek: Form içinde** (`number-stepper/stock`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/number-stepper/stock)

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

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { NumberStepper } from "@/components/ikas/number-stepper"

export default function NumberStepperStock() {
  const [stock, setStock] = React.useState(24)

  return (
    <Field className="w-fit">
      <FieldLabel>Stok adedi</FieldLabel>
      <div>
        <NumberStepper label="Stok adedi" value={stock} onValueChange={setStock} min={0} max={9999} />
      </div>
      <FieldDescription>Değere tıklayıp doğrudan yazabilirsiniz.</FieldDescription>
    </Field>
  )
}
```

### Satır içinde

size="sm" ile 28px; tablo ve sepet satırlarına sığar.

**Örnek: Satır içinde** (`number-stepper/table-row`) · [Canlı önizleme](https://builders.ikas.com/ui-preview/demo/number-stepper/table-row)

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

import { NumberStepper } from "@/components/ikas/number-stepper"

const items = [
  { id: "1", name: "Keten gömlek", variant: "Ekru / M" },
  { id: "2", name: "Geniş paça pantolon", variant: "Siyah / 38" },
  { id: "3", name: "Kanvas çanta", variant: "Doğal" },
]

export default function NumberStepperTableRow() {
  const [qty, setQty] = React.useState<Record<string, number>>({ "1": 2, "2": 1, "3": 5 })

  return (
    <div className="w-full max-w-md divide-y rounded-xl bg-card shadow-card">
      {items.map((item) => (
        <div key={item.id} className="flex items-center justify-between gap-4 px-4 py-2.5">
          <div className="flex min-w-0 flex-col">
            <span className="truncate text-sm font-medium">{item.name}</span>
            <span className="text-[13px] text-muted-foreground">{item.variant}</span>
          </div>
          <NumberStepper
            size="sm"
            label={`${item.name} sipariş adedi`}
            value={qty[item.id]}
            min={1}
            max={50}
            onValueChange={(value) => setQty((q) => ({ ...q, [item.id]: value }))}
          />
        </div>
      ))}
    </div>
  )
}
```

## Kullanım ilkeleri

**Yapın:**

- Satır içinde her stepper'a ürün adını içeren bir label verin.

**Yapmayın:**

- Tam sayılar için <Input type="number"> kullanmayın.

## API

### `NumberStepper`

| Prop | Tip | Varsayılan | Açıklama |
| --- | --- | --- | --- |
| `value` (zorunlu) | `number` | - | Kontrollü değer. |
| `onValueChange` (zorunlu) | `(value: number) => void` | - | Kontrollü değer. |
| `min` | `number` | `0` | Sınırda ilgili buton devre dışı kalır. |
| `max` | `number` | `100000` | Sınırda ilgili buton devre dışı kalır. |
| `step` | `number` | `1` | Her tıklamadaki artış; yazılan değer de buna yuvarlanır. |
| `size` | `"sm" \| "default"` | `"default"` | 28 / 36px. |
| `label` (zorunlu) | `string` | - | Erişilebilir ad, ör. "Stok adedi". |
| `className` | `string` | - |  |