<div id="reload">
  <!-- Multiple Select  -->
  <div class="vi-multiple-select" data-placeholder-format="{0} features selected" data-saved-elements="name-7051e7|name-11ebb4">
    <label class="vi-multiple-select__label mb-0" for="dropdown-trigger">Label</label>
    <form action="#form-31886e" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate="">
      <div class="custom-select custom-select-sm vi-multiple-select__trigger" id="dropdown-trigger">
        Features
      </div>
      <div class="vi-multiple-select__dropdown">
        <div class="form-group">
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-87b15b1" name="name-7051e7" type="checkbox">
            <label class="custom-control-label" for="control-87b15b1">
              Disrupt cleanse yr.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-33984c1" name="name-77a1bd" type="checkbox">
            <label class="custom-control-label" for="control-33984c1">
              Tilde vinyl farm-to-table.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-178b7a1" name="name-11ebb4" type="checkbox">
            <label class="custom-control-label" for="control-178b7a1">
              Twee gastropub 90's.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-00a7151" name="name-1e62c1" type="checkbox">
            <label class="custom-control-label" for="control-00a7151">
              Semiotics slow-carb aesthetic.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-4f1b0d" name="name-2e5a3" type="checkbox">
            <label class="custom-control-label" for="control-4f1b0d">
              Vegan brunch.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-8a2c9e" name="name-7d4f1" type="checkbox">
            <label class="custom-control-label" for="control-8a2c9e">
              Artisanal coffee.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-3b5d1f" name="name-9e2h8" type="checkbox">
            <label class="custom-control-label" for="control-3b5d1f">
              Craft beer scene.
            </label>
          </div>
          <div class="custom-checkbox custom-control">
            <input class="custom-control-input" id="control-6k9m4n" name="name-5t7p2" type="checkbox">
            <label class="custom-control-label" for="control-6k9m4n">
              Vintage boutique.
            </label>
          </div>
        </div>
        <div class="vi-flexbox">
          <button class="vi-btn-outline vi-btn-outline--no-pointer vi-btn" type="button">Cancel</button>
          <button class="vi-btn-solid vi-btn-solid--no-pointer vi-btn" type="submit">Apply</button>
        </div>
      </div>
    </form>
  </div>
</div>
<hr>
<!-- Button type: solid  -->
<a id="trigger" href="#" class="vi-btn-solid vi-btn">Reload the component via AJAX</a>
<script>
  $(document).ready(function() {
    $('#trigger').click(function() {
      $('#reload').load('/api/multiple-select/reload', () => {
        $('#reload').find('.vi-multiple-select').viMultipleSelect();
      });
    });
  });
</script>

<!-- Multiple Select  -->
<div class="vi-multiple-select" data-placeholder-format="{0} features selected">
  <label class="vi-multiple-select__label mb-0" for="dropdown-trigger">Label</label>
  <form action="#form-31886e" autocomplete="off" class="vi-form vi-form--accent vi-typesystem" data-validate="true" novalidate="">
    <div class="custom-select custom-select-sm vi-multiple-select__trigger" id="dropdown-trigger">
      Features
    </div>
    <div class="vi-multiple-select__dropdown">
      <div class="form-group">
        <div class="custom-radio custom-control">
          <input aria-required="true" class="custom-control-input" id="control-66404d" name="name-b3e502" required="" type="radio">
          <label class="custom-control-label" for="control-66404d">
            Tofu cliche hella.
          </label>
        </div>
        <div class="custom-radio custom-control">
          <input aria-required="true" class="custom-control-input" id="control-91c64c" name="name-b3e502" required="" type="radio">
          <label class="custom-control-label" for="control-91c64c">
            Tacos gluten-free iphone.
          </label>
        </div>
        <div class="custom-radio custom-control">
          <input aria-required="true" class="custom-control-input" id="control-9e08d5" name="name-b3e502" required="" type="radio">
          <label class="custom-control-label" for="control-9e08d5">
            Gentrify kinfolk brooklyn.
          </label>
        </div>
      </div>
      <div class="vi-flexbox">
        <button class="vi-btn-outline vi-btn-outline--no-pointer vi-btn" type="button">Cancel</button>
        <button class="vi-btn-solid vi-btn-solid--no-pointer vi-btn" type="submit">Apply</button>
      </div>
    </div>
  </form>
</div>