BetaVercel UI SDK 0.1.0-beta.2 üzerine kurulu. API’si değişebilir.

Number input

Vercel UI SDK üzerinde basılı tutulunca tekrarlayan düğmeler, her dilde para birimi, yüzde ve birim biçimleri ve sürükleme tutamacı olan bir sayı alanı.

Form bileşenleri
8 parça
13 örnek
14 Kas 2026 tarihinde güncellendi

Bağımlılıklar

@tabler/icons-react
@ui-sdk/core
@ui-sdk/react
class-variance-authority

Quantity

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputScrubArea,
  NumberInputScrubAreaCursor,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputDemo() {
  return (
    <NumberInput defaultValue={1} min={1} max={99} className="max-w-36">
      <NumberInputScrubArea pixelsPerStep={6}>
        <Label htmlFor="demo-quantity">Quantity</Label>
        <NumberInputScrubAreaCursor />
      </NumberInputScrubArea>
      <NumberInputGroup>
        <NumberInputDecrement />
        <NumberInputControl id="demo-quantity" />
        <NumberInputIncrement />
      </NumberInputGroup>
    </NumberInput>
  )
}

export { UiSdkNumberInputDemo }

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Henüz eklemediyseniz tema token'larını global CSS'inize ekleyin.

Bağımlılıkları yükleyin.

pnpm add @ui-sdk/react@0.1.0-beta.2 @ui-sdk/core@0.1.0-beta.2 @tabler/icons-react class-variance-authority cn

3
Aşağıdaki kodu kopyalayıp projenize yapıştırın.
components/ui/ui-sdk-number-input.tsx
"use client" import * as React from "react" import { IconChevronDown, IconChevronUp, IconMinus, IconPlus,
İçe aktarma yollarını proje yapılandırmanıza uyacak şekilde güncelleyin.

Kullanım

UI SDK, ui-sdk adlı bir cascade katmanında kendi CSS’ini biraz ekler. Sınıflarınızın kazanması için bu katmanı genel stil dosyanızın en üstünde, Tailwind import’unun üzerinde tanımlayın.

@layer ui-sdk;

@import "tailwindcss";

import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

<NumberInput defaultValue={1} min={0}>
  <NumberInputGroup>
    <NumberInputDecrement />
    <NumberInputControl aria-label="Quantity" />
    <NumberInputIncrement />
  </NumberInputGroup>
</NumberInput>

Değer bir sayıdır, alan boşken null olur ve alan onu biçimlendirilmiş gösterir. Yazmak, metin geçerli bir sayı olduğu anda değeri günceller. Enter veya alandan çıkmak onu onaylar: metin okunur, min ile max arasında tutulur, adıma oturtulur ve yeniden biçimlendirilir.

Kompozisyon

NumberInput
├── NumberInputScrubArea
│   └── NumberInputScrubAreaCursor
└── NumberInputGroup
    ├── NumberInputDecrement
    ├── NumberInputControl
    ├── NumberInputIncrement
    └── NumberInputStepper
        ├── NumberInputIncrement
        └── NumberInputDecrement

Örnekler

En küçük ve en büyük

Örneği aç

Bir düğme sınırında kapanır. Sınırların dışında yazılan değer onaylanınca içeri çekilir.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputMinMax() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="guests">Guests</Label>
      <NumberInput defaultValue={2} min={1} max={8}>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="guests" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Tables seat 1 to 8 guests.
      </p>
    </div>
  )
}

export { UiSdkNumberInputMinMax }

Adım

Örneği aç

step olağan artıştır. Shift, Page Up ve Page Down largeStep kadar, Alt veya Option ile bir ok tuşu smallStep kadar değiştirir. Tekrarlamak için düğmeyi basılı tutun.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputStep() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="temperature">Temperature</Label>
        <NumberInput
          defaultValue={0.7}
          min={0}
          max={2}
          step={0.1}
          largeStep={0.5}
          smallStep={0.01}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="temperature" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="max-tokens">Max tokens</Label>
        <NumberInput
          defaultValue={4096}
          min={256}
          max={32768}
          step={256}
          largeStep={4096}
        >
          <NumberInputGroup>
            <NumberInputDecrement />
            <NumberInputControl id="max-tokens" />
            <NumberInputIncrement />
          </NumberInputGroup>
        </NumberInput>
      </div>
    </div>
  )
}

export { UiSdkNumberInputStep }

Para birimi, yüzde ve birimler

Örneği aç

format, Intl.NumberFormat seçeneklerini alır. Aynı biçimde yazılabilir ve yüzde bir kesirdir, yani %15 0.15 demektir. variant="stacked" grubu sona küçük oklar koyar.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputStepper,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  {
    id: "price",
    label: "Price",
    defaultValue: 19.99,
    step: 0.01,
    format: { style: "currency", currency: "USD" },
  },
  {
    id: "discount",
    label: "Discount",
    defaultValue: 0.15,
    step: 0.01,
    format: { style: "percent" },
  },
  {
    id: "weight",
    label: "Weight",
    defaultValue: 2.5,
    step: 0.1,
    format: { style: "unit", unit: "kilogram" },
  },
] satisfies {
  id: string
  label: string
  defaultValue: number
  step: number
  format: Intl.NumberFormatOptions
}[]

function UiSdkNumberInputFormat() {
  return (
    <div className="flex w-full max-w-44 flex-col gap-4">
      {fields.map(({ id, label, ...options }) => (
        <div key={id} className="flex flex-col gap-2">
          <Label htmlFor={id}>{label}</Label>
          <NumberInput {...options} min={0} locale="en-US">
            <NumberInputGroup variant="stacked">
              <NumberInputControl id={id} />
              <NumberInputStepper>
                <NumberInputIncrement />
                <NumberInputDecrement />
              </NumberInputStepper>
            </NumberInputGroup>
          </NumberInput>
        </div>
      ))}
    </div>
  )
}

export { UiSdkNumberInputFormat }

Yerel ayar

Örneği aç

locale gösterim ve yazım için ayırıcıları, simgeleri ve basamak gruplamasını seçer. Olmadığında alan etkileşimli hale gelince sayfanın dilini izler ve sunucu İngilizce çizer.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  {
    id: "preis",
    label: "Preis",
    locale: "de-DE",
    defaultValue: 1234.5,
    step: 0.01,
    format: { style: "currency", currency: "EUR" },
  },
  {
    id: "budget",
    label: "Budget",
    locale: "en-IN",
    defaultValue: 1234567,
    step: 1000,
    format: { style: "currency", currency: "INR", maximumFractionDigits: 0 },
  },
  {
    id: "kakaku",
    label: "価格",
    locale: "ja-JP",
    defaultValue: 2980,
    step: 10,
    format: { style: "currency", currency: "JPY" },
  },
] satisfies {
  id: string
  label: string
  locale: string
  defaultValue: number
  step: number
  format: Intl.NumberFormatOptions
}[]

function UiSdkNumberInputLocale() {
  return (
    <div className="flex w-full max-w-52 flex-col gap-4">
      {fields.map(({ id, label, ...options }) => (
        <div key={id} className="flex flex-col gap-2">
          <Label htmlFor={id}>{label}</Label>
          <NumberInput {...options} min={0}>
            <NumberInputGroup>
              <NumberInputDecrement />
              <NumberInputControl id={id} />
              <NumberInputIncrement />
            </NumberInputGroup>
          </NumberInput>
        </div>
      ))}
    </div>
  )
}

export { UiSdkNumberInputLocale }

Sürükleme

Örneği aç

Değeri değiştirmek için bir NumberInputScrubArea öğesini tasarım araçlarındaki gibi yana sürükleyin. Tarayıcının işaretçi kilidine izin verdiği yerlerde sürükleme ekranın kenarını geçebilir ve imleci NumberInputScrubAreaCursor çizer.

import {
  NumberInput,
  NumberInputControl,
  NumberInputGroup,
  NumberInputScrubArea,
  NumberInputScrubAreaCursor,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  { label: "X position", handle: "X", defaultValue: 120 },
  { label: "Y position", handle: "Y", defaultValue: 48 },
  { label: "Width", handle: "W", defaultValue: 320, min: 0 },
  { label: "Height", handle: "H", defaultValue: 240, min: 0 },
]

function UiSdkNumberInputScrub() {
  return (
    <div
      role="group"
      aria-labelledby="scrub-frame"
      className="flex w-full max-w-64 flex-col gap-2"
    >
      <p id="scrub-frame" className="m-0 text-xs font-medium">
        Frame
      </p>
      <div className="grid grid-cols-2 gap-2">
        {fields.map(({ label, handle, ...options }) => (
          <NumberInput key={label} {...options}>
            <NumberInputGroup variant="plain">
              <NumberInputScrubArea pixelsPerStep={1}>
                <span aria-hidden="true">{handle}</span>
                <NumberInputScrubAreaCursor />
              </NumberInputScrubArea>
              <NumberInputControl aria-label={label} />
            </NumberInputGroup>
          </NumberInput>
        ))}
      </div>
    </div>
  )
}

export { UiSdkNumberInputScrub }

Fare tekerleği

Örneği aç

wheel ile odaktaki alanın üzerinde kaydırmak değeri değiştirir. Varsayılan olarak kapalıdır, böylece alanın üzerinden kaydırılan bir sayfa onu hiç değiştirmez.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputWheel() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="hover-delay">Hover delay</Label>
      <NumberInput
        defaultValue={300}
        min={0}
        max={2000}
        step={50}
        wheel
        format={{ style: "unit", unit: "millisecond" }}
        locale="en-US"
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="hover-delay" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">
        Focus it, then scroll over it.
      </p>
    </div>
  )
}

export { UiSdkNumberInputWheel }

Kontrollü

Örneği aç

onValueChange her geçerli değişiklikte, onValueCommit ise bir etkileşim bitince çalışır; kaydetmek için o kullanılır. Bir denetleyici değeri herhangi bir düğmeden değiştirir veya ayarlar.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  createNumberInputController,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputControlled() {
  const [seats, setSeats] = React.useState<number | null>(5)
  const [saved, setSaved] = React.useState<number | null>(5)
  const [controller] = React.useState(createNumberInputController)

  return (
    <div className="flex w-full max-w-56 flex-col gap-2">
      <Label htmlFor="seats">Seats</Label>
      <NumberInput
        controller={controller}
        value={seats}
        min={1}
        max={50}
        onValueChange={(value) => setSeats(value)}
        onValueCommit={(value) => setSaved(value)}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="seats" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <div className="flex items-center gap-2 pt-1">
        <Button
          size="sm"
          variant="outline"
          onClick={() => controller.increment({ large: true })}
        >
          Add 10
        </Button>
        <Button
          size="sm"
          variant="ghost"
          onClick={() => controller.setValue(1)}
        >
          Reset to 1
        </Button>
      </div>
      <p className="m-0 text-xs text-muted-foreground tabular-nums">
        {`Showing ${seats ?? "nothing"}, saved ${saved ?? "nothing"}.`}
      </p>
    </div>
  )
}

export { UiSdkNumberInputControlled }

Form

Örneği aç

Bir name ile sayı olduğu gibi, örneğin 1250 olarak gönderilir, asla biçimlendirilmez. required boş alanı engeller ve form sıfırlanınca varsayılana döner.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputForm() {
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <form
      className="flex w-full max-w-48 flex-col gap-2"
      onSubmit={(event) => {
        event.preventDefault()
        setSubmitted(String(new FormData(event.currentTarget).get("amount")))
      }}
      onReset={() => setSubmitted(null)}
    >
      <Label htmlFor="amount">Amount</Label>
      <NumberInput
        name="amount"
        required
        min={1}
        step={0.01}
        defaultValue={1250}
        locale="en-US"
        format={{ style: "currency", currency: "USD" }}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="amount" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <div className="flex items-center gap-3 pt-1">
        <Button type="submit" size="sm">
          Submit
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="m-0 text-xs text-muted-foreground tabular-nums">
        {submitted === null
          ? "Nothing submitted yet."
          : `Submitted amount=${submitted}`}
      </p>
    </form>
  )
}

export { UiSdkNumberInputForm }

Geçersiz

Örneği aç

invalid, stok gibi kendi denetimleriniz için alanı işaretler ve girişe aria-invalid ekler.

"use client"

import * as React from "react"

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

const stock = 12

function UiSdkNumberInputInvalid() {
  const [quantity, setQuantity] = React.useState<number | null>(14)
  const invalid = quantity !== null && quantity > stock

  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="order-quantity">Quantity</Label>
      <NumberInput
        defaultValue={14}
        min={1}
        invalid={invalid}
        onValueChange={(value) => setQuantity(value)}
      >
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl
            id="order-quantity"
            aria-describedby="order-quantity-message"
          />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p
        id="order-quantity-message"
        className={
          invalid
            ? "m-0 text-xs text-destructive"
            : "m-0 text-xs text-muted-foreground"
        }
      >
        {invalid ? `Only ${stock} left in stock.` : `${stock} in stock.`}
      </p>
    </div>
  )
}

export { UiSdkNumberInputInvalid }

Devre dışı

Örneği aç

Devre dışı bir alana odaklanılamaz, değiştirilemez ve gönderilmez.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputDisabled() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="sold-out">Quantity</Label>
      <NumberInput defaultValue={3} disabled>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="sold-out" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">Sold out.</p>
    </div>
  )
}

export { UiSdkNumberInputDisabled }

Salt okunur

Örneği aç

Salt okunur bir alana odaklanılabilir ve gönderilir, ancak düğmeler, sürükleme ve yazma onu değiştirmez.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputReadOnly() {
  return (
    <div className="flex w-full max-w-40 flex-col gap-2">
      <Label htmlFor="included-seats">Seats included</Label>
      <NumberInput defaultValue={5} readOnly>
        <NumberInputGroup>
          <NumberInputDecrement />
          <NumberInputControl id="included-seats" />
          <NumberInputIncrement />
        </NumberInputGroup>
      </NumberInput>
      <p className="m-0 text-xs text-muted-foreground">Set by your plan.</p>
    </div>
  )
}

export { UiSdkNumberInputReadOnly }

Sağdan sola

Örneği aç

Düğmeler yer değiştirir; rakamları ve para birimini yerel ayar belirler.

import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
} from "@/components/ui/ui-sdk-number-input"

function UiSdkNumberInputRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-44 flex-col gap-2">
      <Label htmlFor="rtl-amount">المبلغ</Label>
      <NumberInput
        defaultValue={250}
        min={0}
        step={5}
        locale="ar-EG"
        format={{ style: "currency", currency: "EGP" }}
      >
        <NumberInputGroup>
          <NumberInputDecrement aria-label="إنقاص" />
          <NumberInputControl id="rtl-amount" />
          <NumberInputIncrement aria-label="زيادة" />
        </NumberInputGroup>
      </NumberInput>
    </div>
  )
}

export { UiSdkNumberInputRtl }

Klavye

Tuş	Action
`↑↓`	Değeri step kadar değiştirir.
`ShiftPageUpPageDown`	largeStep kadar değiştirir, varsayılan on adımdır. Shift oklarla, düğmelerle, tekerlekle ve sürüklemeyle çalışır.
`Alt`	Bir ok tuşuyla smallStep kadar değiştirir, varsayılan adımın onda biridir.
`HomeEnd`	Tanımlıysa en küçük ya da en büyük değere gider.
`Enter`	Yazılanı onaylar ve biçimlendirir.

Erişilebilirlik

Alan, yerel bir metin girişi üzerinde WAI-ARIA spinbutton kalıbının klavyesini izler, böylece normal metin düzenleme çalışmaya devam eder. Girişi bir etiketle veya aria-label ile adlandırın. Düğmeler varsayılan olarak “Increase” ve “Decrease” adını taşır, girişi gösterir ve ok tuşları aynı işi yaptığı için sekme sırasının dışında kalır.

Ondalıklı bir alan telefonlarda ondalık tuş takımı ister ve düğmeler dokunmatik ekranlarda büyür. Yalnızca harekete izin verildiğinde basınca küçülürler.

API referansı

Her parça aynı adlı UI SDK parçasını sarar ve render ile parçanın durumuna bağlı bir fonksiyon olabilen className dahil tüm prop’larını kabul eder.

NumberInput

Prop	Tür	Varsayılan
`value`	`number \| null`	`–`
`defaultValue`	`number \| null`	`–`
`onValueChange`	`(value: number \| null, details) => void`	`–`
`onValueCommit`Bir etkileşim bitince çalışır. Kaydetmek için.	`(value: number \| null, details) => void`	`–`
`min`	`number`	`–`
`max`	`number`	`–`
`step`	`number`	`1`
`largeStep`	`number`	`step × 10`
`smallStep`	`number`	`step ÷ 10`
`format`	`Intl.NumberFormatOptions`	`–`
`locale`Varsayılan olarak sayfanın dili.	`string`	`–`
`wheel`	`boolean`	`false`
`invalid`	`boolean`	`false`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`name`	`string`	`–`
`form`	`string`	`–`
`controller`createNumberInputController() ile oluşturulur.	`NumberInputController`	`–`

Öznitelik	Açıklama
`data-slot="number-input"`	CSS'te sayı alanını hedeflemek için.
`data-scrubbing`	Sürükleme değeri değiştirirken bulunur.
`data-invalid`	Geçersiz olduğunda bulunur.
`data-disabled`	Devre dışıyken bulunur.
`data-readonly`	Salt okunur olduğunda bulunur.
`data-required`	Zorunlu olduğunda bulunur.

NumberInputGroup

Prop	Tür	Varsayılan
`variant`İki yanda düğmeler, sonda üst üste oklar ya da sürükleme tutamacı için düğmesiz.	`"split" \| "stacked" \| "plain"`	`"split"`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Öznitelik	Açıklama
`data-slot="number-input-group"`	CSS'te alanın kutusunu hedeflemek için.
`data-variant`	Varyant: split, stacked veya plain.

NumberInputControl

Prop	Tür	Varsayılan
`id`	`string`	`–`
`placeholder`	`string`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

NumberInputIncrement

Prop	Tür	Varsayılan
`aria-label`	`string`	`"Increase"`
`disabled`Yalnızca bu düğmeyi kapatır.	`boolean`	`–`
`children`Varsayılan olarak artı, stacked varyantında ok.	`ReactNode \| (state) => ReactNode`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Öznitelik	Açıklama
`data-slot="number-input-increment"`	CSS'te düğmeyi hedefler.
`data-at-bound`	Değer max olduğunda bulunur.
`data-disabled`	Düğme değeri değiştiremediğinde bulunur.

NumberInputDecrement

Prop	Tür	Varsayılan
`aria-label`	`string`	`"Decrease"`
`disabled`Yalnızca bu düğmeyi kapatır.	`boolean`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`–`

Öznitelik	Açıklama
`data-slot="number-input-decrement"`	CSS'te düğmeyi hedefler.
`data-at-bound`	Değer min olduğunda bulunur.

NumberInputStepper

stacked grubunun sonunda artırma düğmesini azaltmanın üstüne dizer.

NumberInputScrubArea

Prop	Tür	Varsayılan
`orientation`Sağa ve yukarı değeri artırır.	`"horizontal" \| "vertical"`	`"horizontal"`
`pixelsPerStep`Bir adım için işaretçinin ne kadar hareket ettiği.	`number`	`–`
`controller`Sayı alanının dışındaki bir sürükleme alanını bağlar, örneğin araç çubuğundaki bir simge.	`NumberInputController`	`–`

Öznitelik	Açıklama
`data-slot="number-input-scrub-area"`	CSS'te sürükleme alanını hedeflemek için.
`data-orientation`	horizontal veya vertical.
`data-scrubbing`	Bir sürükleme değeri değiştirirken bulunur.

NumberInputScrubAreaCursor

Prop	Tür	Varsayılan
`children`Varsayılan olarak işaretçiye ortalanmış yatay bir ok.	`ReactNode`	`–`