Arrays & Groups

Repeatable sections controlled by minOccurs / maxOccurs, with per-item titling and an empty-state message.

What It Demonstrates

• minOccurs / maxOccurs to control how many times a section can repeat
• autoAddMinOccurs: false for opt-in (empty by default) arrays
• array.itemName, array.itemNamePlural for friendly add/remove labels
• array.itemFieldForTitle to use a child field value as the item title
• array.noItemsMessage for an empty-state prompt

Example

Systems to connect

Any external tools we'll integrate with during onboarding.

0 systems

No systems added yet

Skip this step if there's nothing to integrate.

IsDirty: false
Touched: false
Valid: true

// form values:
{}
    

Array Field Options

The array behaviour is configured directly on the heading field:

array: {
  noItemsMessage: `Skip this step if there's nothing to integrate.`,
  itemName: 'system',
  itemNamePlural: 'systems',
  itemFieldForTitle: 'systemName',
},
minOccurs: 0,
maxOccurs: 4,
autoAddMinOccurs: false,

Full Metadata

const metadata: Metadata[] = [
  {
    name: 'systems',
    type: 'heading',
    fieldOptions: { label: 'Systems to connect' },
    description: `Any external tools we'll integrate with during onboarding.`,
    helpText: 'What needs to connect?',
    array: {
      noItemsMessage: `Skip this step if there's nothing to integrate.`,
      itemName: 'system',
      itemNamePlural: 'systems',
      itemFieldForTitle: 'systemName',
    },
    minOccurs: 0,
    maxOccurs: 4,
    autoAddMinOccurs: false,
    colSpan: 'full',
    children: [
      {
        name: 'systemName',
        fieldOptions: { label: 'System name' },
        placeholder: 'e.g. Salesforce, HubSpot',
      },
      {
        name: 'purpose',
        fieldOptions: { label: 'Purpose in the rollout' },
        placeholder: 'e.g. source of CRM records',
      },
    ],
  },
];

Related Source

• FormExampleArrayFields.vue
• StarterFormTemplate.vue