---
metaTitle: MultiBlockBuilder component | AwesCode UI
meta:
  - name: description
    content: The <AwMultiBlockBuilder /> component is used to render MultiBlockBuilder - UI Vue component for AwesCode UI.
title: MultiBlockBuilder
---

# AwMultiBlockBuilder

**Category:** Organism | **Import:** Dynamic

The `AwMultiBlockBuilder` component is used to visualize and manage vue-mc collections with multiple models. It provides a builder interface for adding, removing, and editing multiple related models in a form.

## Overview

`AwMultiBlockBuilder` provides a multi-block form builder with:
- Dynamic model blocks
- Add/remove model functionality
- Form fields per model
- Collection save functionality
- Auto-fetch on mount
- Enter key navigation between fields

## Usage

### Basic Example

```markup
<AwMultiBlockBuilder title="Manager" :collection="managers">
    <template #default="{ model }">
        <AwInput
            v-model="model.first_name"
            :error="model.errors.first_name"
            label="First name"
        />
        <AwInput
            v-model="model.last_name"
            :error="model.errors.last_name"
            label="Last name"
        />
    </template>
</AwMultiBlockBuilder>
```

### With Max Limit

```markup
<AwMultiBlockBuilder
    title="Manager"
    :collection="managers"
    :max="5"
>
    <template #default="{ model }">
        <!-- form fields -->
    </template>
</AwMultiBlockBuilder>
```

### Auto-fetch

```markup
<AwMultiBlockBuilder
    title="Manager"
    :collection="managers"
    fetch
>
    <template #default="{ model }">
        <!-- form fields -->
    </template>
</AwMultiBlockBuilder>
```

### Custom Slots

```markup
<AwMultiBlockBuilder title="Manager" :collection="managers">
    <template #title="{ title, iteration, remove }">
        <h5>
            {{ title }} #{{ iteration }}
            <AwButton @click="remove">Remove</AwButton>
        </h5>
    </template>
    
    <template #default="{ model }">
        <!-- form fields -->
    </template>
    
    <template #add="{ add, title }">
        <AwButton @click="add">Add {{ title }}</AwButton>
    </template>
    
    <template #save="{ collection }">
        <AwButton @click="collection.save()">Save All</AwButton>
    </template>
</AwMultiBlockBuilder>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| collection | vue-mc Collection instance | `Object` | `true` | - |
| title | Title for blocks and buttons | `String` | `false` | `''` |
| max | Maximum number of items | `Number` | `false` | `Infinity` |
| fetch | Fetch collection on mount | `Boolean` | `false` | `false` |

**Collection Requirements:**
Collection must have these methods/properties:
- `fetch()` - Fetch collection
- `save()` - Save collection
- `add()` - Add new model
- `remove(model)` - Remove model
- `models` - Array of models

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Form fields for each model | `{ model, remove }` | - |
| title | Block title | `{ title, iteration, collection, model, collectionCount, remove }` | Default title with remove button |
| add | Add button | `{ collection, title, add }` | Default "+ Add {title}" link |
| save | Save button | `{ collectionChanged, collection }` | Default "Save" button |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| add:model | `collection` | Emitted when model is added |
| remove:model | `collection` | Emitted when model is removed |
| fetch:collection | `collection`, `event` | Emitted on collection fetch |
| save:collection | `collection`, `event` | Emitted on collection save |

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| add | - | Add new model to collection |
| remove | `model` (required) | Remove model from collection |

### Mixins

- `enterNextFieldMixin` - Provides Enter key navigation between fields

## Related Components

- `AwInput` - Input component (typically used in default slot)
- `AwButton` - Button component (used in slots)
- `AwLink` - Link component (used in add slot)

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Requires vue-mc Collection instance
- Collection must implement required methods
- Models are displayed as separate blocks
- Each block has a title with iteration number
- Remove button appears in each block title
- Add button is hidden when max limit is reached
- Save button is disabled when collection hasn't changed
- Enter key moves focus to next field
- Component tracks collection changes for save button state
- Models are keyed by `id` or `new-block-{index}`