repeater

Rows of fields people can add, remove and reorder, such as notification channels.

Example

Notification channels
Up to 4 channels.

Laravel

<x-admin::repeater id="g-repeater" label="Notification channels" :max="4" add-label="Add channel" reorder hint="Up to 4 channels.">
    <x-admin::repeater-row reorder>
        <x-admin::form-grid>
            <x-admin::select name="g_channels2[0][type]" label="Type" :options="['email' => 'Email', 'slack' => 'Slack']" />
            <x-admin::input name="g_channels2[0][to]" label="Send to" value="ops@example.com" />
        </x-admin::form-grid>
    </x-admin::repeater-row>
    <x-slot:template>
        <x-admin::form-grid>
            <x-admin::select name="g_channels2[__INDEX__][type]" label="Type" :options="['email' => 'Email', 'slack' => 'Slack']" />
            <x-admin::input name="g_channels2[__INDEX__][to]" label="Send to" />
        </x-admin::form-grid>
    </x-slot:template>
</x-admin::repeater>

Props

PropRequiredDefaultOptions
labelnull
hintnull
errornull
min0
maxnull
add-labelnull
reorderfalse
optionalfalse
requiredfalse

Slots: template

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Repeater } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<fieldset class="adm-fieldset adm-repeater" id="g-repeater" data-adm-repeater data-min="0"  data-max="4" >
            <legend class="adm-label">Notification channels</legend>
        <div class="adm-repeater__rows" data-adm-repeater-rows><div class="adm-repeater__row">
    <div class="adm-repeater__fields"><div class="adm-form-grid"><div class="adm-field">
            <label class="adm-label" for="g_channels2_0_type">Type</label>
        <select
         name="g_channels2[0][type]"          id="g_channels2_0_type"                                 class="adm-select"
    >
                                        <option value="email" >Email</option>
                                <option value="slack" >Slack</option>
                
    </select>
        </div>
            <div class="adm-field">
            <label class="adm-label" for="g_channels2_0_to">Send to</label>
        <input
        type="text"
         name="g_channels2[0][to]"          id="g_channels2_0_to"          value="ops@example.com"                                 class="adm-input"
    >
        </div></div></div>
    <div class="adm-repeater__actions">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-up aria-label="Move up"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
            <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-down aria-label="Move down"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg></button>
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-remove aria-label="Remove row"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg></button>
    </div>
</div></div>
            <template data-adm-repeater-template><div class="adm-repeater__row">
    <div class="adm-repeater__fields"><div class="adm-form-grid"><div class="adm-field">
            <label class="adm-label" for="g_channels2___INDEX___type">Type</label>
        <select
         name="g_channels2[__INDEX__][type]"          id="g_channels2___INDEX___type"                                 class="adm-select"
    >
                                        <option value="email" >Email</option>
                                <option value="slack" >Slack</option>
                
    </select>
        </div>
            <div class="adm-field">
            <label class="adm-label" for="g_channels2___INDEX___to">Send to</label>
        <input
        type="text"
         name="g_channels2[__INDEX__][to]"          id="g_channels2___INDEX___to"                                         class="adm-input"
    >
        </div></div></div>
    <div class="adm-repeater__actions">
                    <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-up aria-label="Move up"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
            <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-down aria-label="Move down"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7"/></svg></button>
                <button type="button" class="adm-btn adm-btn--ghost adm-btn--square adm-btn--sm" data-adm-repeater-remove aria-label="Remove row"><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M6 6l1 15h10l1-15"/></svg></button>
    </div>
</div>
</template>
        <div><button type="button" class="adm-btn adm-btn--secondary adm-btn--sm adm-repeater__add" data-adm-repeater-add="data-adm-repeater-add" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>Add channel</button>
</div>
    <span class="adm-sr-only" aria-live="polite" data-adm-repeater-live></span>
    <span class="adm-hint">Up to 4 channels.</span>    </fieldset>