مجموعة الإدخال
حقل إدخال بإضافات ملتصقة به: نص قبله أو بعده، أيقونة مع اختصار لوحة المفاتيح، زر إجراء في نهايته، أو عملة. كلها خصائص في حقل الإدخال.
المعاينة
«معكوس» هو المحتوى الإنجليزي نفسه من اليمين إلى اليسار، ليفصل خطأ الاتجاه عن خطأ الترجمة.
التثبيت
أضف المكوّن
npx ritla add inputويعمل أيضًا مع shadcn:
npx shadcn@latest add @ritla/inputالاعتماديات التي يضيفها
@base-ui/react@phosphor-icons/reactأو انسخه يدويًا
التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.
الاستخدام
import { Input } from "@/components/ui/input";<Input label="Website" dir="ltr" prefix="https://" defaultValue="example.com" />مرجع الخصائص
Input
الأنواع الخمسة في Figma وما يقابلها: Prefix ← prefix، وSuffix ← suffix، وIcon and shortcut ← leadingIcon مع shortcut، وTrailing icon ← action، وCurrency ← prefix برمز العملة. لزر بجانب الحقل استخدم مجموعة الأزرار.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
prefix | ReactNode | لا يوجد | نص قبل القيمة («https://»، «JOD»). |
suffix | ReactNode | لا يوجد | نص بعد القيمة («@example.com»). |
leadingIcon | IconComponent | لا يوجد | أيقونة في بداية الحقل. |
shortcut | ReactNode[] | لا يوجد | مفاتيح الاختصار في نهاية الحقل، تلميح فقط: ضع aria-keyshortcuts على الحقل وتولَّ المفاتيح بنفسك. |
action | ReactNode | لا يوجد | زر في نهاية الحقل، مثل زر أيقونة شبحي صغير ينسخ القيمة. |
إمكانية الوصول
لوحة المفاتيح
المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.
| المفتاح | ما يفعله |
|---|---|
| Tab | إلى الحقل ثم إلى زر الإجراء إن وُجد. |
ARIA
- النصوص قبل القيمة وبعدها لا تدخل في القيمة: اذكر الصيغة في النص المساعد إن احتاجها القارئ.
- الاختصار المعروض مخفي عن قارئات الشاشة؛
aria-keyshortcutsعلى الحقل هو ما يُعلَن. - زر الإجراء يحتاج اسمًا («انسخ الرمز»)، ونتيجته تُذكر في النص المساعد.
ملاحظات العربية والاتجاه
ينعكس
- في الحقول العربية تنتقل البادئة إلى اليمين واللاحقة إلى اليسار.
لا ينعكس
- الروابط والبريد والرموز والمبالغ
dir="ltr": يبقى «https://» و«JOD» قبل القيمة في النماذج العربية أيضًا. - الاختصار يبقى من اليسار إلى اليمين («⌘ K»).
- الأرقام
- المبالغ كما يكتبها المستخدم؛ للأرقام المنسّقة استخدم حقل الأرقام.
- الخط العربي
- البادئة
label-16واللاحقةlabel-12، كما في Figma. - النص ثنائي الاتجاه
- البادئة واللاحقة في
<bdi>، فلا تختلط بالقيمة.
الفحوص التي يجتازها
فحوص ريتلا التي يجتازها هذا المكوّن بطريقة بنائه. إن استُخدم كما هو موثّق، لا يحمل هذه الأخطاء إلى صفحتك.