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?: Snippet;

Example​

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

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

  let activeBatch = $state("main");
</script>

<Editor {items} {values} {activeBatch} topBar={false}>
  <Tabs options={tabs} bind:value={activeBatch} />
</Editor>