حقل رقمي
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. |
إمكانية الوصول
تُربط التسمية والنص المساعد ورسالة الخطأ بالطريقة نفسها في TextInput. يغيّر مفتاحا ArrowUp وArrowDown القيمة بمقدار step، ولأزرار الزيادة والنقصان أسماء متاحة.
تُقيَّد القيم بدل رفضها حتى لا يفقد المستخدم ما كتبه. تبقى الأرقام من اليسار إلى اليمين داخل التخطيطات العربية لتُقرأ بشكل صحيح.