Skip to main content

children

Renders custom content above the generated fields, inside the editor's content area. Use it to build multi-step or tabbed forms - a tab bar or wizard stepper that switches which group of fields the user sees by driving activeBatch - or to add your own header, instructions, or summary above the fields.

Usage​

children?: ReactNode;

Example​

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

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

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

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

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