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

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

التثبيت

bash

npx @smicolon/fasla-ui@latest 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"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

export function AccountForm() {
  return (
    <form>
      <FormSection title="الحساب" description="حدّث إعدادات حسابك.">
        <FormField label="البريد الإلكتروني" htmlFor="email" required>
          <Input id="email" name="email" type="email" required />
        </FormField>
      </FormSection>

      <FormActions>
        <Button type="reset" variant="outline">إلغاء</Button>
        <Button type="submit">حفظ</Button>
      </FormActions>
    </form>
  )
}