NumberField

Ne zaman kullanılır

NumberField para olmayan sayılar içindir: adet, gün sayısı, yüzde, sıra numarası. Değer küçük adımlarla değişiyorsa artırma ve azaltma düğmeleri işi hızlandırır.

Ne zaman kullanılmaz

• Tutar için: AmountInput kullanın; para kuruş cinsinden bigint olarak taşınır, asla kayan noktalı sayı olarak değil.
• Telefon, IBAN, kimlik numarası gibi rakam dizileri için: bunlar sayı değil metindir; TextInput, PhoneInput ya da IbanInput kullanın.
• Geniş bir aralıkta kaba bir değer için: Slider kullanın.

Anatomi

Gün sayısı (gün)

gün

1 ile 30 arası bir değer girin.

AçıkKoyu

Kodu kopyala

import { NumberField } from '@bigbang/ui';

export default function WithUnit() {
  return (
    <NumberField
      className="max-w-xs"
      label="Gün sayısı"
      unit="gün"
      defaultValue={7}
      min={1}
      max={30}
      stepper={false}
      description="1 ile 30 arası bir değer girin."
    />
  );
}

1. Etiket: label-md; alanın görünen ve erişilebilir adı.
2. Kutu: TextInput kutusuyla aynı; 32, 36 ya da 40 px.
3. Birim: İsteğe bağlı kısa metin, ör. “gün”; erişilebilir ada parantez içinde eklenir.
4. Adım düğmeleri: Azalt ve Artır; kutunun sonunda, ince bir çizgiyle ayrılır.
5. Açıklama ve hata: Alanın altında.

Davranış

• Yazılan metin Provider dilinde okunur: Türkçede 1.234,5, İngilizcede 1,234.5.
• Ok tuşları step kadar, Page Up ve Page Down largeStep kadar değiştirir; Home ve End min ve max değerine atlar.
• Aralığın dışındaki bir değer odak ayrılınca sınıra çekilir ve “Değer 30 olarak düzeltildi” bir kez duyurulur.
• Sınırdaki adım düğmesi devre dışı kalır. Düğmeler sekme sırasında değildir; klavyede ok tuşları aynı işi yapar.
• onValueChange yazarken, onValueCommitted odak ayrılınca ya da adım bitince çağrılır.

Yönergeler

• Aralık önemliyse açıklamada yazın: “1 ile 30 arası bir değer girin.” Kullanıcı sınırı yazmadan önce bilsin.
• Birimi etikete değil unit özelliğine yazın; etiket kısa kalır.
• Adımı değerin doğal artışına göre seçin: adet için 1, yüzde için 0,5 puan.
• Kaydırma tekerleğiyle değiştirme kapalıdır; sayfa kayarken değer yanlışlıkla değişmez.

İçerik

• Etiket ölçülen şeyin adıdır: “Gün sayısı”, “Adet”.
• Hata mesajı aralığı söyler: “Değer 1 ile 30 arasında olmalı.”

Türkçe	İngilizce
Artır	Increase
Azalt	Decrease
Sayı alanı	Number field
Değer {value} olarak düzeltildi	Value changed to {value}

İlgili bileşenler

• TextInput: Serbest metin.
• AmountInput: Para tutarı.
• Slider: Bir aralıkta kaba değer.