التثبيت
npx sdaia-ui@latest add field-group
الاستخدام
import { FieldGroup } from '@/components/ui/FieldGroup';<FieldGroup legend="Contact details" hint="We use these details to reach you about your request.">
<TextInput label="Email" type="email" required />
<TextInput label="Mobile number" inputMode="tel" required />
</FieldGroup>الاتجاه من اليمين إلى اليسار
ينعكس العنوان والتلميح والحقول للغة العربية. يستخدم هذا المثال النمط ذا الإطار.
جارٍ تحميل العرض التوضيحي: field-group-rtl
أمثلة
عمودي، عادي
الحقول مرصوصة تحت العنوان. هو الخيار الافتراضي.
جارٍ تحميل العرض التوضيحي: field-group-default
عمودي، بإطار
توضع المجموعة داخل حاوية بإطار خاص بها.
جارٍ تحميل العرض التوضيحي: field-group-bordered
أفقي، عادي
حقلان قصيران مترابطان في صف واحد، وينتقلان إلى سطرين على الجوال.
جارٍ تحميل العرض التوضيحي: field-group-horizontal
أفقي، بإطار
حاوية بإطار والحقول في صف واحد.
جارٍ تحميل العرض التوضيحي: field-group-horizontal-bordered
بدون تلميح
التلميح اختياري. تضم المجموعة هنا سؤالًا بأزرار اختيار.
جارٍ تحميل العرض التوضيحي: field-group-without-hint
متى تستخدمه
- بيانات التواصل أو العنوان أو الهوية
- حقلان أو ثلاثة مترابطة في صف واحد
- مجموعات أزرار الاختيار وخانات الاختيار التي تجيب عن سؤال واحد
- تقسيم النموذج الطويل إلى أجزاء سهلة التصفح
متى لا تستخدمه
- حقل واحد — التسمية تكفي
- حقول غير مترابطة جُمعت للتخطيط فقط
- مجموعات داخل مجموعات
- بديلًا عن عنوان الصفحة أو القسم
الخصائص
الخاصية | النوع | القيمة الافتراضية | مطلوبة |
|---|---|---|---|
legend | ReactNode | — | اختيارية |
hint | ReactNode | — | اختيارية |
layout | "vertical" | "horizontal" | "vertical" | اختيارية |
variant | "plain" | "bordered" | "plain" | اختيارية |
dir | "ltr" | "rtl" | inherited | اختيارية |
disabled | boolean | false | اختيارية |
children | ReactNode | — | اختيارية |
إمكانية الوصول
- تُعرض بعنصرَي <fieldset> و<legend>، فتعلن قارئات الشاشة العنوان عند دخول التركيز إلى المجموعة.
- يرتبط التلميح بالمجموعة عبر aria-describedby، مع الإبقاء على قيمة aria-describedby التي تمررها.
- يحتفظ كل حقل بتسميته المرئية؛ ضع علامة الحقل المطلوب في التسمية لا في العنوان.
- تعطيل المجموعة بالخاصية disabled يعطّل كل الحقول داخلها.
السلوك المتجاوب
- تستخدم المسافات والخطوط الرموز المتجاوبة، فتتدرج المجموعة من الجوال إلى سطح المكتب.
- التخطيط الأفقي شبكة أعمدة متساوية لا يقل كل منها عن 12rem، وينتقل إلى حقل في كل سطر عند ضيق المجموعة.
- تملأ المجموعة حاويتها؛ حدّد العرض من تخطيط الصفحة.