_multiselect.html.erb

<div x-data="multiselect()" x-init="loadOptions()">
  <%= form.select field,
    options_for_select(@team_members.map.with_index { |member, index|
      [member.name, member.id, { ':selected' => "options[#{index}].selected" }]
    }, form.object.send(field)),
    { },
    multiple: true,
    class: "hidden",
    "x-ref": "hiddenSelect"
  %>

  <div class="form-group">
    <label class="block text-sm font-medium leading-6 text-gray-900 mb-2"><%= label %></label>

    <div class="flex flex-col items-center relative">
      <div @click="open" class="w-full">
        <div class="p-1 flex shadow-sm ring-1 ring-inset ring-gray-300 rounded-md focus:ring-inset focus:ring-primary-600">
          <div class="flex flex-auto flex-wrap">
            <template x-for="optionIndex in selected" :key="options[optionIndex].value">
              <div class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-indigo-700 bg-indigo-100 border border-indigo-300 ">
                <div class="text-xs font-normal leading-none max-w-full flex-initial" x-model="options[optionIndex]" x-text="options[optionIndex].text">
                </div>

                <div class="flex flex-auto flex-row-reverse">
                  <div class="cursor-pointer" @click="remove(optionIndex)">
                    <%= render_svg "icons/x-mark", styles: "fill-current h-4 w-4 ml-1" %>
                  </div>
                </div>
              </div>
            </template>

            <div x-show="selected.length == 0" class="flex-1">
              <input placeholder="Select a option" class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800 border-0 text-sm">
            </div>
          </div>

          <div class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200">
            <button type="button" x-show="show" @click="open" class="w-6 h-6 text-gray-600 outline-none focus:outline-none">
                <%= render_svg "icons/cheveron-up", styles: "fill-current h-5 w-5" %>
            </button>

            <button type="button" x-show="!show" @click="close" class="w-6 h-6 text-gray-600 outline-none focus:outline-none">
                <%= render_svg "icons/cheveron-down", styles: "fill-current h-5 w-5" %>
            </button>
          </div>
        </div>
      </div>

      <div class="w-full px-4">
        <div x-show.transition.origin.top="show"
          class="absolute shadow top-100 bg-white z-40 w-full left-0 rounded max-h-select overflow-y-auto"
          @click.away="close">
          <div class="flex flex-col w-full">
            <template x-for="(option, index) in options" :key="option.value">
              <div>
                <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-indigo-100"
                  @click="select(index)">
                  <div :class="option.selected ? 'border-indigo-700' : 'border-transparent'"
                    class="flex w-full items-center p-2 pl-2 border-l-2 relative">
                    <div class="w-full items-center flex">
                      <div class="mx-2 leading-6" x-model="option" x-text="option.text"></div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>