<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="[]"
     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][]-e870">
        Tags
      </label>
    </div>
    <div class="midwest-autocomplete-control" style="anchor-name: --ac-e870" data-action="click->midwest-autocomplete#focusInput">
      <div class="midwest-autocomplete-tokens" data-midwest-autocomplete-target="tokens">
        <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" data-value="ruby" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
          <span class="value">ruby</span>
          <button type="button" class="remove" aria-label="Remove ruby" data-action="click->midwest-autocomplete#removeToken" data-value="ruby">
            <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" name="post[tags][]" value="ruby">
        </span>          <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" data-value="rails" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
          <span class="value">rails</span>
          <button type="button" class="remove" aria-label="Remove rails" data-action="click->midwest-autocomplete#removeToken" data-value="rails">
            <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" name="post[tags][]" value="rails">
        </span>    </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-e878">
          </label>
        </div>
        <input type="text" id="field-e878" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="ac-e870-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-e870-dropdown" popover="manual" class="midwest-popover anchored midwest-autocomplete-dropdown" style="position-anchor: --ac-e870; anchor-name: --ac-e870-dropdown" role="listbox" aria-label="Tags" aria-multiselectable="true" data-midwest-autocomplete-target="dropdown">
      <div class="midwest-autocomplete-dropdown-body">
        <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>
    <p class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-midwest-autocomplete-target="status"></p>
  </div>
</div>