multiselect_async_html.html.erb

<%= tag.style nonce: content_security_policy_nonce do %>
  .custom-chip {
    align-items: center;
    border: var(--hw-border-width--slim) solid var(--hw-border-color);
    border-radius: 9999px;
    display: flex;
    font-size: var(--hw-selection-chip-font-size);
    line-height: var(--hw-line-height);
    padding: 0 1rem;
  }

  .custom-remover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0' /%3E%3C/svg%3E%0A");
  }

  .state {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 100%;
    margin-right: 0.5rem;
    position: relative;
  }

  .state::before {
    content: '';
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(<%= asset_path('us.png') %>);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: 100%;
  }

  .state--alabama::before { background-image: url(<%= asset_path('alabama.png') %>); }
  .state--florida::before { background-image: url(<%= asset_path('florida.png') %>); }
  .state--michigan::before { background-image: url(<%= asset_path('michigan.png') %>); }
  .state--minnesota::before { background-image: url(<%= asset_path('minnesota.png') %>); }
  .state--mississippi::before { background-image: url(<%= asset_path('mississippi.png') %>); }
  .state--missouri::before { background-image: url(<%= asset_path('missouri.png') %>); }
<% end %>

<%= combobox_tag "state", states_path(page: 0),
      id: "states-field",
      label: "States",
      multiselect_chip_src: html_state_chips_path,
      value: State.limit(2).ids.join(","),
      placeholder: "Select states" %>