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
• arrayItemName, arrayItemNamePlural for friendly add/remove labels
• arrayItemFieldForTitle to use a child field value as the item title
• arrayNoItemsMessage 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:

arrayNoItemsMessage: `Skip this step if there's nothing to integrate.`,
arrayItemName: 'system',
arrayItemNamePlural: 'systems',
arrayItemFieldForTitle: '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?',
    arrayNoItemsMessage: `Skip this step if there's nothing to integrate.`,
    arrayItemName: 'system',
    arrayItemNamePlural: 'systems',
    arrayItemFieldForTitle: 'systemName',
    minOccurs: 0,
    maxOccurs: 4,
    autoAddMinOccurs: false,
    fullWidth: true,
    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
• AdvancedFormTemplate.vue