Installation
npx sdaia-ui@latest add form-section
Usage
import { FormSection } from '@/components/ui/FormSection';<FormSection title="Personal information" description="Use the details that appear on your official ID.">
<FieldGroup legend="Full name" layout="horizontal">…</FieldGroup>
</FormSection>RTL
Side by side in Arabic: the title column moves to the right.
Loading demo: form-section-rtl
Examples
Stacked
The title sits above the fields.
Loading demo: form-section-default
Side by side
The title sits in a column next to the fields on wide screens.
Loading demo: form-section-side-by-side
Without description
Turn the description off when the title is enough.
Loading demo: form-section-without-description
Settings page
Each topic gets its own section in a narrow page.
Loading demo: form-section-settings
When to use
- Long forms split into topics
- Settings pages with several groups
- Edit pages with personal, account and security parts
- Any form with more than six fields