<div class="p-8 max-w-sm">
  <div class="midwest-autocomplete midwest-form-group midwest-autocomplete is-multiple is-free-form"
     data-controller="midwest-autocomplete"
     data-midwest-autocomplete-multiple-value="true"
     data-midwest-autocomplete-options-value="[{"value":"ruby","label":"Ruby"},{"value":"rails","label":"Rails"},{"value":"javascript","label":"JavaScript"},{"value":"typescript","label":"TypeScript"},{"value":"css","label":"CSS"},{"value":"html","label":"HTML"}]"
     data-midwest-autocomplete-url-value=""
     data-midwest-autocomplete-turbo-frame-url-value=""
     data-midwest-autocomplete-free-form-value="true"
     data-name="post[tags][]">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="post[tags][]-e7f0">
        Tags
      </label>
    </div>
    <div class="midwest-autocomplete-control" style="anchor-name: --ac-e7f0" data-action="click->midwest-autocomplete#focusInput">
      <div class="midwest-autocomplete-tokens" data-midwest-autocomplete-target="tokens">
      </div>
      <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="field-e7f8">
          </label>
        </div>
        <input type="text" id="field-e7f8" autocomplete="off" spellcheck="false" aria-describedby="post[tags][]-e7f0-desc" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="ac-e7f0-dropdown" placeholder="Add a tag..." data-midwest-input-target="input" data-midwest-autocomplete-target="input" data-action="input->midwest-autocomplete#search keydown->midwest-autocomplete#navigate focus->midwest-autocomplete#open paste->midwest-autocomplete#pasteTag" />
      </div>
    </div>
    <template data-midwest-autocomplete-target="multipleTokenTemplate">
      <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
        <span class="value"></span>
        <button type="button" class="remove" aria-label="Remove" data-action="click->midwest-autocomplete#removeToken">
          <div class="midwest-icon ">
            <div class="midwest-icon-inner">
              <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Close"><title>Close</title>
                <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
            </div>
          </div>
        </button>    <input type="hidden">
      </span>  </template>
    <template data-midwest-autocomplete-target="singleTokenTemplate">
      <span class="midwest-badge size-default theme-primary midwest-autocomplete-token">
        <span class="value"></span>
        <input type="hidden">
      </span>  </template>
    <div id="ac-e7f0-dropdown" popover="manual" class="midwest-popover anchored midwest-autocomplete-dropdown" style="position-anchor: --ac-e7f0; anchor-name: --ac-e7f0-dropdown" role="listbox" aria-label="Tags" aria-multiselectable="true" data-midwest-autocomplete-target="dropdown">
      <div class="midwest-autocomplete-dropdown-body">
        <div class="midwest-autocomplete-loader" hidden aria-hidden="true" data-midwest-autocomplete-target="loader">
          <div class="midwest-loading-icon" role="img" aria-label="Loading">
            <div class="midwest-loading-icon-inner">
              <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
              <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                <circle cx="15" cy="15" r="15">
                  <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
                <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                  <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
                <circle cx="105" cy="15" r="15">
                  <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
              </svg>
            </div>
          </div>
        </div>
        <ul class="midwest-autocomplete-list" data-midwest-autocomplete-target="list"></ul>
        <ul class="midwest-autocomplete-list" hidden
              data-midwest-autocomplete-target="freeFormHintList">
          <li class="midwest-autocomplete-free-form-hint"
                data-action="mousedown->midwest-autocomplete#addFreeFormTagFromHint">
            Hit <kbd class="midwest-kbd">Enter</kbd>
            to add
            <span class="midwest-autocomplete-free-form-hint-value"
                    data-midwest-autocomplete-target="freeFormHintValue"></span>
          </li>
        </ul>
      </div>
    </div>
    <div id="post[tags][]-e7f0-desc" class="midwest-form-group__bottom ">
      <span class="midwest-label description">
        Choose from suggestions or type your own
      </span>
    </div>
    <p class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-midwest-autocomplete-target="status"></p>
  </div>
</div>