Field Section
Group root fields and configure collapsible sections.
A section groups fields visually, for example account information and profile details. Set section on each root field in fieldConfig, then configure the group through the same key in sectionConfig. Try opening and closing the Profile section above.
Usage
Use your form instance from useForm. See the initial setup.
const schema = z.object({ username: z.string(), email: z.email() });
<ErlForm
form={form}
schema={schema}
fieldConfig={{
username: { section: "account" },
email: { section: "account" },
}}
sectionConfig={{
account: { title: "Account", collapsible: true, defaultOpen: true },
}}
/>Matching keys
| Part | Example | Role |
|---|---|---|
| Schema field | username, email | Data and validation |
| fieldConfig.username.section | account | Assign a root field to a group |
| sectionConfig.account | title: "Account information" | Configure that group |
Section names are arbitrary, but the field section value and sectionConfig key must match. Defining a sectionConfig title alone does not assign fields to that section.
Section options
| Option | Purpose |
|---|---|
| title | Group heading |
| description | Help text below the heading |
| collapsible | Use native details/summary for expansion |
| defaultOpen | Initial state of a collapsible section |
| className | Section wrapper class |
| headerClassName | Header class |
| contentClassName | Content wrapper class |
Sections only affect presentation. Submitted values still follow the schema: account/profile group names do not create objects. Section grouping happens at the root; a section option on a nested child does not create another section in 1.0.0.