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>

{{-- 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>

{{-- 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>