Components

Repeater

Addable / removable field rows (a form field-array) that submit as an array.

php artisan blatui:add repeater

{{-- A single text field per row — e.g. a list of tags. Submits as tags[0][value], tags[1][value]… --}}
<div class="w-full max-w-sm">
    <x-ui.repeater
        name="tags"
        :fields="[['key' => 'value', 'label' => 'Tags', 'placeholder' => 'e.g. laravel']]"
        :value="[['value' => 'blade'], ['value' => 'alpine']]"
        add-label="Add tag"
    />
</div>

Multi Field

{{-- Two columns per row (name + email). Submits as guests[0][name], guests[0][email], … --}}
<div class="w-full max-w-xl">
    <x-ui.repeater
        name="guests"
        :fields="[
            ['key' => 'name', 'label' => 'Name', 'placeholder' => 'Ada Lovelace'],
            ['key' => 'email', 'label' => 'Email', 'placeholder' => '[email protected]', 'type' => 'email'],
        ]"
        :value="[
            ['name' => 'Ada Lovelace', 'email' => '[email protected]'],
            ['name' => 'Alan Turing', 'email' => '[email protected]'],
        ]"
        add-label="Add guest"
    />
</div>

With Max

{{-- Capped at 3 rows: the Add button disables once the ceiling is hit, with a live count. --}}
<div class="w-full max-w-sm">
    <x-ui.repeater
        name="phones"
        :fields="[['key' => 'value', 'label' => 'Phone numbers', 'placeholder' => '+1 555 0100', 'type' => 'tel']]"
        :value="[['value' => '+1 555 0100']]"
        :min="1"
        :max="3"
        add-label="Add number"
    />
</div>

API Reference

Props, slots and exposed methods for <x-ui.repeater>.

Props

Prop	Type	Default	Description
`name`	`string`	`'items'`	Base form field name. Rows submit as name[index][key] (e.g. items[0][value], items[1][value]).
`fields`	`array`	`[]`	Column schema describing the inputs in each row. Defaults to a single text column keyed "value" when omitted. See Each field (column) below.
`value`	`array`	`[]`	Seed rows: an array of associative arrays keyed by the field keys (e.g. [["name"=>"Ada","email"=>"[email protected]"]]). Padded up to "min" rows.
`min`	`int`	`1`	Minimum number of rows. Remove is disabled once this floor is reached.
`max`	`int`	—	Maximum number of rows. Add is disabled at this ceiling and a count badge is shown. Defaults to unlimited.
`addLabel`	`string`	`'Add row'`	Text on the Add button.

Each field (column)

Prop	Type	Default	Description
`key`*	`string`	—	Key used in the submitted name (name[index][key]) and to read/write the value on each row.
`label`	`string`	—	Column label, shown above the first row and used as the aria-label on later rows. Defaults to a headline of the key.
`placeholder`	`string`	`''`	Placeholder for the column input.
`type`	`string`	`'text'`	Input type. Use "textarea" for a multi-line field; any other value is passed through as an <input type> (text, email, number, url…).

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`add()`	Appends a blank row and focuses its first input. No-op when at "max".
`remove(index)`	Removes the row at the given index. No-op when at "min".