البناء · جديد

حقل الإدخال

حقل نصي بتسمية ظاهرة ونص مساعد، بالحالات نفسها في كل حقول كنز: افتراضي وتمرير وتركيز وخطأ ومعطّل وللقراءة فقط وتعبئة تلقائية.

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/input-field

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

الاستخدام

import { InputField } from "@/components/ui/input-field";

<InputField label="Full name" required name="name" autoComplete="name" helperText="We use it on your receipts." />

أمثلة

الحالات

الحقل الفارغ رمادي والممتلئ أبيض. error برسالة يحلّ محل النص المساعد ويضع aria-invalid على الحقل. التمرير والتركيز والتعبئة التلقائية من المتصفح.

المحتوى البادئ والتابع

leadingIcon وprefix في بداية الحقل، وsuffix وtrailingIcon وstatus في نهايته، وتتبدّل أماكنها في العربية. في حقول dir="ltr" (البريد والروابط) يبقى الصف من اليسار إلى اليمين.

نص بلغتين

الحقل يأخذ dir="auto": كل قيمة تجري باتجاهها، فتبقى علامة الترقيم في آخر الجملة الإنجليزية داخل نموذج عربي. البريد والروابط والرموز دائمًا من اليسار إلى اليمين: مرّر dir="ltr".

مرجع الخصائص

InputField

يقبل كل خصائص <input> أيضًا (type وname وvalue وplaceholder وautoComplete وinputMode…).

الخاصية	النوع	الافتراضي	الوصف
`label`	`ReactNode`		خاصية Label. مطلوبة وظاهرة دائمًا.
`required`	`boolean`	`false`	خاصية Required: النجمة و`required` على الحقل.
`helperText`	`ReactNode`		خاصية Helper text.
`error`	`ReactNode \| boolean`		State = Error. الرسالة تحلّ محل النص المساعد؛ `true` يلوّن النص المساعد بالأحمر.
`disabled`	`boolean`	`false`	State = Disabled.
`readOnly`	`boolean`	`false`	State = Read-only.
`leadingIcon`	`IconComponent`		‏_Leading content، النوع Icon.
`prefix`	`ReactNode`		‏_Leading content، النوع Text only أو Currency.
`suffix`	`ReactNode`		‏_Trailing content، النوع Text.
`trailingIcon`	`IconComponent`		‏_Trailing content، النوع Icon.
`status`	`"success" \| "loading" \| "warning" \| "error" \| "disabled"`		‏Show Field Status. زخرفية: اذكر الحالة في النص المساعد أيضًا.

إمكانية الوصول

لوحة المفاتيح

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

المفتاح	ما يفعله
`Tab`	ينقل التركيز إلى الحقل، مع حلقة التركيز حول الإطار (حلقة الخطأ في حالة الخطأ).

ARIA

التسمية <label> مرتبطة بالحقل، والنص المساعد أو رسالة الخطأ عبر aria-describedby.
الخطأ يضع aria-invalid على الحقل، ويُقرأ نص الخطأ الجديد بهدوء (aria-live="polite").
النجمة زخرفية؛ required على الحقل هو ما يُعلَن.
استخدم type وinputMode وautoComplete المناسبة (email، tel، numeric).

ملاحظات العربية والاتجاه

ينعكس

التسمية والنص المساعد والأيقونة البادئة في بداية السطر (اليمين)، والحالة واللاحقة في نهايته.
الأيقونات الاتجاهية تنعكس.

لا ينعكس

مع dir="ltr" (البريد والروابط والرموز) يصير صف الحقل كله من اليسار إلى اليمين، كحقل الهاتف في Figma: تبقى «https://» قبل القيمة و«.ritla.app» بعدها.
أيقونات الحالة لا تنعكس.

الأرقام: ما يكتبه المستخدم يبقى كما كتبه. للأرقام استخدم حقل الأرقام، فهو يتبع خاصية numerals.
الخط العربي: النص label-16 والتسمية والنص المساعد label-12، بارتفاع سطر أطول في العربية؛ الحقل بارتفاع 48px ثابت يتسع لهما.
النص ثنائي الاتجاه: الحقل يأخذ dir="auto" افتراضيًا، فتجري كل قيمة باتجاه لغتها.

كل المكونات ›