Guide
Build create/edit forms with native array editors, validation, and nested collection support
Use type: "collection" when a form value is an array and users need to manage its items visually. Good fits: Navigation menus stored as JSON, with links, groups, toggles, and nested links. Feature lists where each featu...
The form value is always the source of truth. 1. CollectionField reads the current form value from TanStack Form. 2. If the value is not an array, it is normalized to []. 3. Every add, edit, delete, or reorder action cr...
This creates a small features editor with add, edit, delete, reorder, row validation, and submit blocking. const FeatureSchema = z.object( features: z.array( z.object(
What this page covers
The original MDX source has been condensed into CMS-native cards so the page can be edited and republished from the control plane.
Use type: "collection" when a form value is an array and users need to manage its items visually. Good fits: Navigation menus stored as JSON, with links, groups, toggles, and nested links. Feature lists where each featu...
The form value is always the source of truth. 1. CollectionField reads the current form value from TanStack Form. 2. If the value is not an array, it is normalized to []. 3. Every add, edit, delete, or reorder action cr...
This creates a small features editor with add, edit, delete, reorder, row validation, and submit blocking. const FeatureSchema = z.object( features: z.array( z.object(
CollectionFieldDefinition extends the normal field definition with array-editor options. | Property | Purpose | |---|---| | type: "collection" | Selects the native collection field. |
Use createActions when users need to create different item shapes from the same array. const createLink = () = ( type: "link", label: "",
Nested collections are supported by using the lower-level CollectionEditor inside an item form. This is useful for one-level menu groups: the top-level collection edits menu items, and a group item contains a nested col...
Implementation notes
Props and usage reference for the unified DataTable component
$ const FeatureSchema = z.object({
$ features: z.array(
$ z.object({
$ label: z.string().min(1),
$ enabled: z.boolean(),