NumberInput
Artır ve azalt butonlu bir sayı alanı. Değerler Intl.NumberFormat ile biçimlenir, yazılan metin aynı locale'de okunur: tr-TR'de 1.234,5, en-US'de 1,234.5 çalışır.
değer: 1
const [seats, setSeats] = useState<number | null>(1);
<Field label="Koltuk sayısı">
<NumberInput
locale="tr-TR"
incrementLabel="Artır"
decrementLabel="Azalt"
value={seats}
onValueChange={setSeats}
min={1}
max={50}
name="seats"
/>
</Field>Import
import { NumberInput } from "@meridui/react";Örnekler
Para birimi, yüzde ve birim
formatOptions doğrudan Intl.NumberFormat'a gider. Yüzdede değer kesirdir (0.15, %15 olarak görünür).
<NumberInput locale="tr-TR" defaultValue={1499.9} step={0.5} formatOptions={{ style: "currency", currency: "TRY" }} />
<NumberInput locale="tr-TR" defaultValue={0.15} step={0.01} min={0} max={1} formatOptions={{ style: "percent" }} />
<NumberInput locale="tr-TR" defaultValue={2.5} step={0.1} formatOptions={{ style: "unit", unit: "kilogram" }} />Boyutlar ve durumlar
<NumberInput aria-label="Küçük" size="sm" defaultValue={3} />
<NumberInput aria-label="Butonsuz" hideStepper defaultValue={10} />
<NumberInput aria-label="Geçersiz" invalid defaultValue={-1} />
<NumberInput aria-label="Devre dışı" disabled defaultValue={5} />API referansı
type, value, defaultValue, onChange, size, min, max ve step dışındaki tüm <input> attribute'larını kabul eder; ref <input>'a gider. className ve style sarmalayıcıya gider. Field bağlantılarını Input gibi alır.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
value | number | null | – | Controlled değer; null boş demektir. |
defaultValue | number | null | null | Uncontrolled kullanımda başlangıç değeri. |
onValueChange | (value: number | null) => void | – | Onaylanan değerle çağrılır (adımda, Enter'da ya da blur'da). |
min / max | number | – | Sınırlar. Değer sınıra çekilir; sınırda ilgili buton devre dışı kalır. |
step | number | 1 | Butonların ve ok tuşlarının eklediği miktar. |
largeStep | number | step * 10 | Page Up / Page Down'ın eklediği miktar. |
locale | string | çalışma ortamı | Biçimleme ve okuma locale'i. Türkçe arayüzde "tr-TR". |
formatOptions | Intl.NumberFormatOptions | – | Para birimi, yüzde, birim, ondalık hane sayısı… |
size | "sm" | "md" | "lg" | "md" | Yükseklik. |
invalid | boolean | – | aria-invalid ve danger kenarlık. |
hideStepper | boolean | false | Butonları gizler. |
incrementLabel | string | "Increase" | + butonunun erişilebilir adı. Türkçe arayüzde "Artır". |
decrementLabel | string | "Decrease" | − butonunun erişilebilir adı. Türkçe arayüzde "Azalt". |
name | string | – | Biçimlenmemiş sayıyı taşıyan gizli input. |
Stil verme
| Sınıf | Eleman |
|---|---|
.mrd-number-input | Sarmalayıcı (data-size, data-invalid, data-disabled) |
.mrd-number-input__field | <input role="spinbutton"> |
.mrd-number-input__stepper, .mrd-number-input__step | Buton grubu ve her buton |
Erişilebilirlik
Alan aria-valuenow, aria-valuemin, aria-valuemax ve biçimlenmiş bir aria-valuetext taşıyan bir role="spinbutton"'dır. Butonlar tab durağı değildir (tabindex="-1"): klavye yolu ok tuşlarıdır; APG spinbutton desenine uyar. Her buton en az 24×24px'tir.
| Tuş | Ne yapar |
|---|---|
| ArrowUpArrowDown | step kadar artırır / azaltır. |
| PageUpPageDown | largeStep kadar artırır / azaltır. |
| HomeEnd | min / max'a gider (verildiyse). |
| Enter | Yazılan metni onaylar. |