Number Input

التثبيتنسخ رابط العنوان

ويثبّت Input وField أيضًا.

الاستخدامنسخ رابط العنوان

import { Field, FieldLabel } from "@/components/ui/field";
import { NumberInput } from "@/components/ui/number-input";

export function QuantityField() {
  return (
    <Field name="quantity">
      <FieldLabel>الكمية</FieldLabel>
      <NumberInput
        defaultValue={1}
        min={1}
        max={10}
        decrementLabel="إنقاص"
        incrementLabel="زيادة"
      />
    </Field>
  );
}

استخدم Number Input للكميات والمبالغ التي يزيدها المستخدم وينقصها. وللمعرّفات التي هي أرقام وليست كميات (رقم الهوية أو الهاتف) استخدم Input مع inputMode="numeric". وترجم دائمًا decrementLabel وincrementLabel في الصفحات العربية.

البنيةنسخ رابط العنوان

• الإطار: الحد والتعبئة نفسهما في Input.
• زر الإنقاص (−): في جهة البداية.
• الحقل: الرقم، في الوسط بين الزرين، بـ dir="ltr" وunicode-bidi: isolate.
• زر الزيادة (+): في جهة النهاية.

أمثلةنسخ رابط العنوان

الحد الأدنى والأقصى والخطوةنسخ رابط العنوان

يوقف min وmax الزرين ومفتاحي السهمين عند الحدين، ويُعطَّل الزر عند الحد. ويحدد step مقدار تغيّر القيمة مع كل ضغطة. والقيمة التي تستلمها هي دائمًا number.

الحالاتنسخ رابط العنوان

الافتراضية والمعبأة وللقراءة فقط والمعطّلة وحالة الخطأ، والحجم المتوسط مع التعبئة الأغمق.

التنسيقنسخ رابط العنوان

يقبل format خيارات Intl.NumberFormat للعملة والنسبة المئوية والوحدات. والقيمة الافتراضية لـ locale هي en-u-nu-latn، فالأرقام غربية في كل الصفحات.

<NumberInput
  defaultValue={250}
  format={{ style: "currency", currency: "SAR", currencyDisplay: "code" }}
/>

RTLنسخ رابط العنوان

يتبادل الزران الجهتين: − على اليمين (البداية) و+ على اليسار (النهاية). ولا تتحرك الأرقام ولا يُعاد ترتيبها: الحقل dir="ltr" ومعزول عن النص العربي حوله. كتابة ٣ تعطي 3، والفاصلة العشرية ٫ تعطي نقطة.

إمكانية الوصولنسخ رابط العنوان

• الحقل إدخال نصي بالسمة inputmode="numeric" وaria-roledescription="Number field"، فيعرض الهاتف لوحة أرقام وتعلنه قارئات الشاشة حقل رقم.
• للزرين − و+ اسمان (decrementLabel وincrementLabel) ومساحة نقر 24px، ويُعطَّلان عند الحدين.
• يحافظ dir="ltr" وunicode-bidi: isolate على ترتيب الأرقام والإشارات داخل النص العربي.
• تُقبل الأرقام الهندية والفارسية عند الكتابة أو اللصق وتصبح أرقامًا غربية؛ وتقرأ قارئات الشاشة القيمة الغربية.

مرجع APIنسخ رابط العنوان

الاختلافات عن DGAنسخ رابط العنوان

• الأرقام دائمًا غربية ومن اليسار إلى اليمين ومعزولة. ولا يصف Figma الصفحات العربية.
• زرّا − و+ زرّان حقيقيان في جهتي البداية والنهاية المنطقيتين.

التبايننسخ رابط العنوان