DXRepeater

A repeatable sub-form (field array) primitive for nested, dynamic collections — order lines, variants, key/value rows, and the like. Each row binds to an array on form.data (e.g. form.data.lines[i]) and renders its sub-fields through DXField, using Laravel-style nested error keys (lines.0.unit_price).

You normally declare a repeater as a field with type: 'repeater' inside a DXForm, which renders DXRepeater for you. It is also exported directly for custom layouts.

Live Examples

Order Line Items

A repeatable sub-form (field array). Add and remove rows; each row binds to form.data.lines[i] with Laravel-style nested error keys.

{
  "reference": "ORD-1001",
  "lines": [
    {
      "description": "Widget",
      "quantity": 2,
      "unit_price": 9.99
    }
  ]
}

Props

Name Click to sort ascending	Type	Required Click to sort ascending	Default	Description
`form`	`UseFormReturn<any>`	Yes	-	Form instance owning the repeater array.
`field`	`FieldDefinition`	Yes	-	The repeater field definition. Provides sub-fields (field.fields), addLabel, minItems, maxItems.
`keyPath`	`string`	No	`field.key`	Dot path into form.data for the array.
`errorKey`	`string`	No	`keyPath`	Base error key for nested validation.
`model`	`any`	No	-	Model passed to predicates from the parent context.

Defining a repeater field

Declare it as a field within a form’s fields array:

const fields = [
  {
    key: 'lines',
    type: 'repeater',
    label: 'Line items',
    addLabel: 'Add line',
    minItems: 1,
    maxItems: 10,
    fields: [
      { key: 'description', type: 'text', label: 'Description' },
      { key: 'quantity', type: 'number', label: 'Qty', default: 1 },
      { key: 'unit_price', type: 'currency', label: 'Unit price' },
    ],
  },
];

New rows are seeded from each sub-field’s default (or a sensible per-type default). Rows keep stable identity across reordering/removal, so editing a row and removing another never shuffles your inputs.

Slots

Name Click to sort ascending	Description	Scoped Props
`row`	Custom layout for a single row. Render your own controls and call remove() to delete the row.	-

Extended Component

This is a custom component that extends beyond simple Bootstrap Vue Next wrappers, providing additional functionality specific to Laravel dashboards.