items

Describes the controls the editor renders. Each entry maps a control to a value in values and carries its label, validation, and layout options.

Usage

items?: IItemConfig[];

Each IItemConfig has the following shape:

interface IItemConfig {
	comp?: string;
	key?: TID;
	keys?: TID[];
	id?: TID;
	label?: string;
	column?: string;
	batch?: string;
	section?: string;
	sectionMode?: "exclusive" | "accordion";
	activeSection?: boolean;
	hidden?: boolean;
	required?: boolean;
	validation?: (value: any) => boolean;
	validationMessage?: string;
	config?: Record<string, any>;
	getter?: (obj: any) => any;
	setter?: (obj: any, value: any) => void;
	css?: string;
	fill?: boolean;
	[key: string]: any;
}

Field	Type	Description
comp	string	Renderer key. Built-in: "text", "textarea", "checkbox", "readonly", "section". Omitted falls back to "text"; "hidden" removes the item. See built-in controls.
key / keys	TID / TID[]	Use key to map the item to a single values[key] (dotted strings address nested paths - see value mapping). Use keys instead to bind one control to several fields, receiving and emitting a composite object - see multi-field items. The two are mutually exclusive.
id	TID	Item identifier, used for action targeting. See onaction.
label	string	Field label text.
column	string	"left" places the field in the left pane under layout="columns"; any other value goes right. See two-column layout.
batch	string	Group tag; the item shows only when activeBatch matches. See batches for tabbed forms.
section	string	Section header key this item belongs to. See collapsible sections.
hidden	boolean	Hides the item.
required	boolean	Marks the field invalid when its value is falsy. See required fields and custom validation.
validation	(value: any) => boolean	Custom validator; return false to mark the field invalid. See required fields and custom validation.
validationMessage	string	Message shown under the field on validation failure. See required fields and custom validation.
config	Record<string, any>	Extra props promoted onto the item before rendering; on conflict, config wins over the top-level value. See item specific configuration.
getter	(obj: any) => any	Reads the item value from a custom record shape. See value mapping.
setter	(obj: any, value: any) => void	Writes the item value back into a custom record shape. See value mapping.
css	string	Extra CSS class on the item.
fill	boolean	Renders edge-to-edge with no label; effective only as the single visible item. See full-height single field.

Unlisted properties are forwarded to the rendered component. TID is string | number.

Section header properties

These apply only to a comp: "section" header item. See collapsible sections.

Field	Type	Description
sectionMode	"exclusive" | "accordion"	Collapse behavior for the header. See accordion and exclusive modes.
activeSection	boolean	Whether the section starts expanded.

Example

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

const items = [
	{ comp: "text", key: "name", label: "Name", required: true },
	{ comp: "textarea", key: "notes", label: "Notes" },
	{ comp: "checkbox", key: "admin", label: "Is Admin" },
];

const values = { name: "Alex", notes: "", admin: false };

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

Related articles

• Items
• Input Controls
• Data Handling