Skip to main content

activeBatch

Filters visible items by their batch tag. Only items whose batch equals activeBatch are shown; items with any other batch, or no batch, are hidden.

Use it to split one long record into tabbed pages or a multi-step wizard. Tag each field with a batch name, then move activeBatch between those names as the user clicks a tab or advances a step; the editor swaps the visible group while keeping every field's edits in the same draft.

The editor does not draw the tabs itself - you supply the switching control (via children) and bind it to the same activeBatch state. See switching batches with a tab bar for a full example.

Usage​

activeBatch?: string | null;
  • string - shows only items whose batch equals this value.
  • null - (default) no batch filter; all items follow their normal visibility.

Example​

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

const items = [
  { comp: "text", key: "name", batch: "main", label: "Name" },
  { comp: "text", key: "theme", batch: "cfg", label: "Theme" }
];

export default function App() {
  return <Editor items={items} values={values} activeBatch="cfg" />;
}