Organizing form layout

The editor provides multiple ways to organize the form layout. You can divide fields into batches for step-by-step navigation, sections for collapsible grouping, or accordion-style sections for single-focus workflows.

Show one batch at a time

Assign a batch key to each item and set activeBatch to control which group of fields appears:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Combo } from "@svar-ui/svelte-core";

   registerEditorItem("combo", Combo);

   const items = [
      {
        comp: "text",
        key: "name",
        batch: "main",
        label: "Name",
      },
      {
        key: "theme",
        batch: "cfg",
        comp: "combo",
        label: "Theme",
        options: [
           { id: "light", label: "Light" },
           { id: "dark", label: "Dark" },
        ],
      },
   ];
   
</script>

<Editor {items} activeBatch="cfg" />

In this example, activeBatch is set to "cfg", so the editor shows only the fields in the "cfg" batch. This approach is ideal for forms with multiple logical sections that need to show one at a time, such as step-by-step forms.

Switch batches with a tab bar

Bind activeBatch to a reactive variable and connect it to a Tabs component to let users navigate between batches:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Tabs, Combo } from "@svar-ui/svelte-core";

   registerEditorItem("combo", Combo);

   const options = [
      {
        id: "main",
        label: "Personal",
      },
      {
        id: "cfg",
        label: "Settings",
      },
   ];

   const items = [
      {
        comp: "text",
        key: "name",
        batch: "main",
        label: "Name",
      },
      {
        key: "theme",
        batch: "cfg",
        comp: "combo",
        label: "Theme",
        options: [
           { id: "light", label: "Light" },
           { id: "dark", label: "Dark" },
        ],
      },
   ];

   const activeBatch = $state("cfg");
</script>

<Editor {items} {activeBatch}>
   <Tabs {options} bind:value={activeBatch}></Tabs>
</Editor>

Here, the Tabs component updates activeBatch when the user selects a tab, and the editor shows the matching batch. This is suitable for forms with multiple sections where users need to navigate between them.

Group fields into collapsible sections

Add a "section" item to the items array to create a collapsible group. Fields that follow the section item belong to it:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";
   
   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

All fields appear inside collapsible sections. Users can collapse or expand sections like "Common settings" and "Comments" to focus on the relevant part of the form.

Use accordion sections

Set sectionMode: "accordion" on section items so only one section can be open at a time:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";
   
   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "section",
        key: "common-section",
        label: "Common settings",
        sectionMode: "accordion",
      },
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
        sectionMode: "accordion",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

Each time you open a section, the previous one closes automatically. Use this for forms where only one section needs attention at a time.

Use modal-style sections

Set sectionMode: "exclusive" to make a section replace the top-level fields when the user opens it:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";
   
   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
        sectionMode: "exclusive",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

The section's fields stay hidden until the user clicks the section header. Clicking it replaces the top-level fields with the section's content. This is ideal for forms where a section needs full focus, reducing distractions from other fields.

Combine always-visible fields with collapsible sections

Place top-level fields before any section items to keep them always visible while other fields collapse into sections:

<script>
   import { Editor, registerEditorItem } from "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";
   
   registerEditorItem("comments", Comments);

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
      },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      {
        comp: "section",
        key: "comments-section",
        label: "Comments",
      },
      {
        comp: "comments",
        key: "comments",
        section: "comments-section",
      }
   ];
</script>

<Editor {items} />

While name and descr are always visible, the remaining fields appear inside a collapsible section. This is appropriate for forms where certain critical fields must remain accessible while others can be grouped and hidden.

Related sample: Layouts