Skip to main content

layout

Sets how visible items are arranged in the form body. "columns" splits them into a left and right pane; any other value renders a single column.

Usage​

layout?: string;
  • "columns" - items with column: "left" render in the left pane; all other visible items render in the right pane.
  • any other value (default "default") - renders the single-column form.

Default: "default". Form does not use this prop.

Example​

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

const items = [
  { comp: "text", key: "name", label: "Name", column: "left" },
  { comp: "textarea", key: "bio", label: "Bio", column: "left" },
  { comp: "text", key: "email", label: "Email" },
  { comp: "checkbox", key: "admin", label: "Is Admin" },
];
const values = { name: "John Doe", admin: true };

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