Form Layout

A single stacked column works for short forms, but longer records read better when you organize the fields. This guide covers the three ways to do that: split the form into two columns, break it into batches the user switches between like tabs, or group fields under collapsible section headers.

How arrangement works

Each technique combines a hint on individual items with, in some cases, one editor-level prop:

• Columns are turned on by the layout prop. With layout="columns", each item's column hint decides which of the two panes it lands in.
• Batches tag items with a batch name. The activeBatch prop selects which group is visible; everything with a different batch is hidden.
• Sections are "section" items acting as headers. Fields point at a header through their section hint, and the header toggles their visibility.
• Full-height single field stretches one field to fill the whole editor with fill on the item - a special case covered at the end.

The first three are independent and combine freely - a two-column modal can also use sections, and batched fields can live inside sections. Visibility is resolved before anything renders, so readonly and validation apply only to the items a batch or section currently shows.

Two-column layout

Wide surfaces such as modal and fullscreen editors waste space in one column. Set layout to "columns" and assign each item to a column with column. Items marked column: "left" render in the left pane; anything else renders on the right.

import { Editor } from "@svar-ui/react-editor";

const items = [
  { comp: "text", key: "name", label: "Name", column: "left" },
  { comp: "textarea", key: "descr", label: "Description", column: "left" },
  { comp: "checkbox", key: "admin", label: "Is Admin" },
  { comp: "text", key: "email", label: "Email" }
];

<Editor items={items} values={data} layout="columns" placement="modal" />

Here name and descr fill the left pane while admin and email fall to the right. Within each pane the fields keep their order from items. Any layout value other than "columns" renders the ordinary single column and ignores the column hints, so you can add them ahead of time and switch layouts later.

Batches for tabbed forms

A batch splits one form into groups shown one at a time - a natural fit for tabbed dialogs. Give each item a batch name and pass the selected batch to activeBatch. Only items whose batch matches appear; the rest are hidden, and there is no "no batch" fallback that stays visible.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Combo } from "@svar-ui/react-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" }
    ]
  }
];

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

Switching batches with a tab bar

The editor does not draw the tabs itself. Supply the switching control as children - it renders above the fields - and connect it to the same activeBatch state so selecting a tab swaps the visible group.

import { useState } from "react";
import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Tabs, Combo } from "@svar-ui/react-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" }
    ]
  }
];

function App() {
  const [activeBatch, setActiveBatch] = useState("main");

  return (
    <Editor items={items} activeBatch={activeBatch} topBar={false}>
      <Tabs options={options} value={activeBatch} onChange={({ value }) => setActiveBatch(value)}></Tabs>
    </Editor>
  );
}

Because the control is yours, a Tabs bar, a Segmented control, or a toolbar item all work equally well - each just needs to write the chosen batch id back into activeBatch. Setting topBar={false} clears the default toolbar so the tabs sit directly above the fields.

Collapsible sections

Sections keep every field in the same view but gather them under headers the user can collapse. Add a "section" item as the header, then point each field at it with a matching section value.

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

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

<Editor items={items} topBar={false} />

activeSection: true opens a section on first render; without it the section starts collapsed. By default each section toggles independently of the others.

Accordion and exclusive modes

Two modes on the section header change the default independent behavior:

• sectionMode: "accordion" keeps one section open at a time - opening another closes the previous one.
• sectionMode: "exclusive" shows only the active section's header and its fields, hiding the other sections entirely rather than collapsing them.

Apply the same mode to every header you want to behave as a group:

const items = [
  { comp: "section", key: "common-section", label: "Common settings", activeSection: true, sectionMode: "accordion" },
  { comp: "text", key: "name", label: "Name", section: "common-section" },
  { comp: "section", key: "comments-section", label: "Comments", sectionMode: "accordion" },
  { comp: "comments", key: "comments", section: "comments-section" }
];

Exclusive mode is useful when a section needs the user's full attention - activating it replaces the rest of the top-level form with just that section:

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" }
];

Keeping fields always visible

Fields placed before any "section" item - with no section hint of their own - stay on screen regardless of section state. Use this to keep critical fields visible while grouping the rest:

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" }
];

Full-height single field

When a form holds a single item, it can drop its label and stretch to fill the editor's height - a natural fit for a code or rich-text editor that should own the whole surface. Set fill: true on that one item.

import { Editor, registerEditorItem, CodeMirror } from "@svar-ui/react-editor";

registerEditorItem("code-mirror", CodeMirror);

const items = [
  { comp: "code-mirror", key: "source", language: "javascript", fill: true }
];

<Editor items={items} placement="fullscreen" />

The fill layout activates only when the item is the sole visible field; add a second item and fill is ignored, so the field renders normally with its label. The field takes 100% of the available height, so pair it with a placement that provides one - sidebar, modal, or fullscreen - or a sized container.