Repeater · Panel

Basic Usage

Click "Add item" to clone the input block into the container. A limit of 3 is set so the trigger disables after three clones.

<div class="max-w-xs w-full">
  <div id="repeater-wrapper-basic" class="space-y-3">
    <div id="repeater-target-basic">
      <input type="text" class="mv-input" placeholder="Enter item">
    </div>
  </div>
  <p class="mt-3 text-end">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm inline-flex items-center gap-x-1" data-mv-repeater="true" data-mv-repeater-target="#repeater-target-basic" data-mv-repeater-wrapper="#repeater-wrapper-basic" data-mv-repeater-limit="3">
      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path></svg>Add item
    </button>
  </p>
</div>

Predefined Markup

The template lives in a hidden container; only clones appear in the wrapper when you click "Add row".

<div class="max-w-xs w-full">
  <div id="repeater-wrapper-predefined" class="space-y-3"></div>
  <p class="mt-3 text-end">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm inline-flex items-center gap-x-1" data-mv-repeater="true" data-mv-repeater-target="#repeater-template-inner" data-mv-repeater-wrapper="#repeater-wrapper-predefined" data-mv-repeater-limit="3">
      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path></svg>Add row
    </button>
  </p>
  <div id="repeater-template-predefined" class="hidden">
    <div id="repeater-template-inner">
      <input type="text" class="mv-input" placeholder="Enter value">
    </div>
  </div>
</div>

With Delete

Each cloned block includes a remove control. Use data-MV-repeater-delete on the element that should remove its block.

<div class="max-w-xs w-full">
  <div id="repeater-wrapper-delete" class="space-y-3">
    <div id="repeater-target-delete" class="relative">
      <input type="text" class="mv-input pe-8" placeholder="Enter tag"><button type="button" class="mv-btn mv-btn-icon mv-btn-ghost size-6 absolute end-1 top-1/2 -translate-y-1/2 text-destructive" data-mv-repeater-delete="true" aria-label="Remove">
        <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="m15 9-6 6"></path>
          <path d="m9 9 6 6"></path>
        </svg>
      </button>
    </div>
  </div>
  <p class="mt-3 text-end">
    <button type="button" class="mv-btn mv-btn-outline mv-btn-sm inline-flex items-center gap-x-1" data-mv-repeater="true" data-mv-repeater-target="#repeater-target-delete" data-mv-repeater-wrapper="#repeater-wrapper-delete" data-mv-repeater-limit="3">
      <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M5 12h14"></path>
        <path d="M12 5v14"></path></svg>Add tag
    </button>
  </p>
</div>

On Modal

Use a repeater inside a modal to collect multiple items (e.g. guests) before submitting. Open the modal, add or remove rows, then submit or cancel.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#repeater-modal">
    Add guests
  </button>
  <div class="mv-modal" data-mv-modal="true" id="repeater-modal">
    <div class="mv-modal-content max-w-[400px] top-[5%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Add guests</h3>
        <button type="button" class="mv-modal-close" aria-label="Close modal" data-mv-modal-dismiss="#repeater-modal">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body">
        <div id="repeater-wrapper-modal" class="space-y-3">
          <div id="repeater-target-modal" class="relative">
            <input type="text" class="mv-input pe-8 w-full" placeholder="Enter Name"><button type="button" class="mv-btn mv-btn-icon mv-btn-ghost size-6 absolute end-1 top-1/2 -translate-y-1/2 text-destructive" data-mv-repeater-delete="true" aria-label="Remove">
              <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <path d="m15 9-6 6"></path>
                <path d="m9 9 6 6"></path>
              </svg>
            </button>
          </div>
        </div>
        <p class="mt-3 text-end">
          <button type="button" class="mv-btn mv-btn-outline mv-btn-sm inline-flex items-center gap-x-1" data-mv-repeater="true" data-mv-repeater-target="#repeater-target-modal" data-mv-repeater-wrapper="#repeater-wrapper-modal" data-mv-repeater-limit="5">
            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M5 12h14"></path>
              <path d="M12 5v14"></path></svg>Add guest
          </button>
        </p>
      </div>
      <div class="mv-modal-footer">
        <div></div>
        <div class="flex gap-2">
          <button type="button" class="mv-btn mv-btn-secondary" data-mv-modal-dismiss="#repeater-modal">
            Cancel</button><button type="button" class="mv-btn">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>