Array Field - Vextro Docs

The array field creates a repeatable list of sub-fields. Each row contains the same set of fields, and users can add, remove, and reorder rows in the admin editor. Data is stored as an array of objects on the parent document.

Config Options

Option	Type	Default	Description
`fields`	`Record<string, Field>`	required	Sub-field definitions for each row
`minRows`	`number`	—	Minimum number of rows
`maxRows`	`number`	—	Maximum number of rows
`rowLabel`	`string \| function \| object`	—	Label displayed on each collapsed row
`collapsible`	`boolean`	`false`	Whether rows can be collapsed
`collapsed`	`boolean`	`false`	Whether rows start collapsed
`required`	`boolean`	`false`	Whether the array must have at least one row

Example Usage

import { f } from "vextro";

const fields = {
  features: f.array({
    fields: {
      title: f.text({ required: true }),
      description: f.textarea(),
      icon: f.text(),
    },
    minRows: 1,
    maxRows: 10,
    rowLabel: "title",
  }),
};

Row Labels

Row labels control the text displayed on each collapsed row.

Field name -- display the value of a sub-field: rowLabel: "title"
Template string -- interpolate multiple fields: rowLabel: "{label} → {url}"
Function -- full control: rowLabel: (row, i) => \${i + 1}. ${row.name}``
Object config -- with fallbacks:

rowLabel: { field: "title", fallback: "New Step", showIndex: true }

Admin Options

All common admin options are supported including label, description, condition, sidebar, sidebarSection, listColumn, and viewTransition. See Overview for details.

Stored Data

{
  "features": [
    { "title": "Fast", "description": "Blazing speed", "icon": "bolt" },
    { "title": "Secure", "description": "Encrypted", "icon": "lock" }
  ]
}