NumberField

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

NumberField.tsx

Storybook

NumberField · Playground

NumberField, @bigbang/ui paketindedir.

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

<NumberField label="Gün sayısı" unit="gün" min={1} max={30} value={days} onValueChange={setDays} />;

Özellikler

labelZorunlu

Açıklama

Alanın görünen etiketi; <label> ile alana bağlanır. Yer tutucu etiketin yerini tutmaz.

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile bağlanır. Aralık önemliyse burada yazın ('1 ile 30 arası').

Tür

ReactNode

error

Açıklama

Verilirse alan geçersiz olur ve mesaj alanla birlikte okunur.

Tür

string

invalid

Açıklama

Alanı mesajsız geçersiz işaretler, ör. mesaj bir hata özetindeyse.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: alan required alır ve etiket işaretlenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: 'required' zorunluları, 'optional' diğerlerini.

Tür

'required' | 'optional'

Varsayılan

'required'

size

Açıklama

Alan yüksekliği: 32, 36 ve 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

value

Açıklama

Kontrollü değer; boşken null. onValueChange ile birlikte verin.

Tür

number | null

defaultValue

Açıklama

Kontrolsüz alanın ilk değeri.

Tür

number

onValueChange

Açıklama

Kullanıcı yazarken ya da adım atarken çözümlenen sayı ya da null ile çağrılır.

Tür

(value: number | null, details: NumberFieldRootChangeEventDetails) => void

onValueCommitted

Açıklama

Değer işlendiğinde bir kez çağrılır: odak ayrılınca, Enter ile ya da adım bitince. Doğrulamayı ya da kaydı burada yapın.

Tür

(value: number | null, details: NumberFieldRootCommitEventDetails) => void

min

Açıklama

İzin verilen en küçük değer. Altında yazılan değer odak ayrılınca ona yükseltilir ve bu duyurulur.

Tür

number

max

Açıklama

İzin verilen en büyük değer. Üstünde yazılan değer odak ayrılınca ona indirilir ve bu duyurulur.

Tür

number

step

Açıklama

Adım düğmeleri ve ok tuşlarıyla eklenen ya da çıkarılan miktar.

Tür

number

Varsayılan

1

largeStep

Açıklama

Page Up, Page Down ve Shift ile ok tuşu için miktar.

Tür

number

Varsayılan

10

format

Açıklama

{ style: 'percent' } ya da ondalık basamak gibi sayı biçimi, Provider dilinde. Para için değildir: AmountInput kullanın.

Tür

Omit<NumberFormatOptions, 'style' | 'currency'> & { style?: 'unit' | 'decimal' | 'percent'; }

unit

Açıklama

Sayının ardından gelen kısa birim, ör. 'gün' ya da 'adet'. Erişilebilir ada parantez içinde eklenir.

Tür

string

stepper

Açıklama

Azaltma ve artırma düğmelerini alanın içinde gösterir.

Tür

boolean

Varsayılan

true

placeholder

Açıklama

Alan boşken görünen metin, ör. örnek bir değer.

Tür

string

readOnly

Açıklama

Değer okunabilir, odaklanabilir ve kopyalanabilir ama değiştirilemez.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır; değer formla gönderilmez.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderildiğinde kullanılan alan adı.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="number-field": kök öğe üzerinde.
• data-part: label, box, control, unit, stepper, decrement, increment, description, error.
• data-disabled, data-readonly, data-invalid: Base UI’dan, kökte ve parçalarda.