البناء · جديد

حقل الأرقام

حقل رقمي بزرّي زيادة ونقصان وبادئة عملة اختيارية. يكتب القيمة بأرقام الصفحة (123 أو ١٢٣) ويقبل النوعين عند الكتابة.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/number-input

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

import { NumberInput } from "@/components/ui/number-input";

<NumberInput label="Amount" prefix="$" defaultValue={100} min={0} step={50} />

format يمرّر خيارات Intl.NumberFormat (الكسور والتجميع). في حالة القراءة فقط تختفي الأزرار.

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label.
`value / defaultValue`	`number`		القيمة الرقمية (لا النص المنسّق).
`onValueChange`	`(value: number \| null) => void`		عند تغيّر القيمة.
`min / max / step`	`number`	`step 1`	الحدود والخطوة. Shift يضاعف الخطوة ×10.
`format`	`Intl.NumberFormatOptions`		تنسيق القيمة.
`prefix`	`ReactNode`		‏_Leading content: عملة أو وحدة.
`stepper`	`boolean`	`true`	إظهار زرّي الزيادة والنقصان.
`decrementLabel / incrementLabel`	`string`		اسما الزرّين لقارئ الشاشة. الافتراضي بلغة الصفحة.
`required / helperText / error / disabled / readOnly`	`…`		كما في حقل الإدخال.

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

الرقم يُقرأ من اليسار إلى اليمين (dir="ltr") فلا تنقلب إشارة السالب، ويُحاذى إلى بداية الحقل.

الأرقام: يتبع numerals من KanzProvider: ‏١٬٢٣٤ أو 1,234. الأرقام العربية والفارسية المكتوبة تُفهم كأرقام.
الخط العربي: label-16 كبقية الحقول.