قسم النموذج (FormSection)

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

التثبيت

bash

npx @smicolon/cli add form-section

قبل إضافة أي مكوّن، شغّل الأمر init مرة واحدة في مشروعك. التفاصيل في صفحة التثبيت.

معاينة

المعلومات الشخصية

حدّث بياناتك الشخصية.

الاسم الأول*

اسم العائلة*

مع رسالة خطأ

البريد الإلكتروني*

هذا البريد الإلكتروني مستخدم من قبل

أزرار النموذج

الخصائص (props)

يضم الجدول خصائص (props) الأجزاء FormSection، FormField، FormActions.

الخاصية	النوع	الافتراضي	الوصف
`title`	`string`	لا يوجد	عنوان القسم.
`description`	`string`	لا يوجد	نص تحت العنوان أو التسمية.
`divider`	`boolean`	`true`	يُظهر فاصلًا في الأسفل.
`label`	`string`	لا يوجد	تسمية الحقل.
`error`	`string`	لا يوجد	رسالة خطأ تحت الحقل.
`required`	`boolean`	`false`	يعلّم الحقل بأنه مطلوب.
`htmlFor`	`string`	لا يوجد	يربط التسمية بحقلها.
`align`	`"left" \| "right" \| "center" \| "between"`	`"right"`	محاذاة أزرار الإجراءات.
`sticky`	`boolean`	`false`	يثبّت الأزرار في أسفل الصفحة.
`className`	`string`	لا يوجد	أصناف (class) إضافية للجزء.

الاستخدام

tsx

import { FormSection, FormField, FormActions } from "@/components/blocks/form-section"

<FormSection title="الحساب" description="حدّث إعدادات حسابك.">
  <FormField label="البريد الإلكتروني" required>
    <Input type="email" />
  </FormField>
</FormSection>

<FormActions>
  <Button variant="outline">إلغاء</Button>
  <Button>حفظ</Button>
</FormActions>