حقل رقمي
NumberInputحقل رقمي في React بأزرار زيادة ونقصان، مع min، max، step، ودعم الكسور. يحمل رقماً أو null، ويربط التسمية وحالات الخطأ. يبقى من اليسار إلى اليمين في العربية.
يحمل NumberInput قيمة number | null. يحد min/max القيمة، ويضبط step مقدار الزيادة. يزيل hideControls الزرين.
متى تستخدمه
استخدم NumberInput للكميات والأعداد التي قد يعدلها المستخدم خطوة خطوة: عدد التابعين، العناصر، أو السنوات. يحد min وmax القيمة، ويضبط step مقدار كل زيادة. يناسب هذا الرسوم والمبالغ العشرية.
استخدم TextInput مع inputMode="numeric" للمعرفات مثل رقم الهوية أو الجوال، لأنها أرقام يكتبها المستخدم كما هي، ولا تدخل في أي حساب. فعّل hideControls حين تزيد الأزرار ازدحام النماذج الكثيفة.
أمثلة
الخصائص
الخصائص التي يعرفها NumberInput. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "md" | "lg" | ||
variant | "default" | "filled-lighter" | "filled-darker" | ||
stepperVariant | "solid" | "subtle" | ||
value | number | Controlled value. null represents an empty field. | |
defaultValue | number | Uncontrolled initial value. | |
onValueChange | (value: number | null) => void | Fires with the parsed value, or null when the field is cleared. | |
min | number | Lower bound. Clamped on blur and at the stepper buttons. | |
max | number | Upper bound. Clamped on blur and at the stepper buttons. | |
step | number | Stepper / ArrowUp-Down increment. Defaults to 1. | |
hideControls | boolean | Hide the ＋ / − buttons (keyboard + typing only). | |
decrementLabel | string | Accessible label for the decrement button. Defaults to 'Decrease'. | |
incrementLabel | string | Accessible label for the increment button. Defaults to 'Increase'. | |
label | react.ReactNode | Visible field label, auto-associated to the input via htmlFor/id. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. |
إمكانية الوصول
يربط NumberInput التسمية، النص المساعد، ورسالة الخطأ بالحقل كما يفعل TextInput. يغير مفتاحا ArrowUp وArrowDown القيمة بمقدار step، ولأزرار الزيادة والنقصان أسماء متاحة.
يقيد NumberInput القيمة ضمن الحدود بدل رفضها، حتى لا يفقد المستخدم ما كتبه. تبقى الأرقام من اليسار إلى اليمين داخل التخطيطات العربية لتظهر بترتيبها الصحيح.