Multiple Combobox

<div class="multi-combobox-container">
  <label for="topics-combobox">Choose topics:</label>

  <!-- Each selected value appears as a chip in the field; clicking a chip deselects it -->
  <sv-combobox id="topics-combobox" class="topics-combobox" multiple placeholder="Type to search">
    <sv-flyout>
      <!-- Options -->
      <button class="option" aria-selected="true" value="a11y">Accessibility</button>
      <button class="option" value="animation">Animation</button>
      <button class="option" value="build">Build tools</button>
      <button class="option" value="css">CSS</button>
      <button class="option" value="forms">Forms</button>
      <button class="option" value="perf">Performance</button>
      <button class="option" value="testing">Testing</button>

      <!-- Shown by the component only while the query matches nothing -->
      <p class="empty" data-combobox-no-results>No topic matches your search</p>
    </sv-flyout>
  </sv-combobox>
</div>

<style>
  .multi-combobox-container {
5 collapsed lines
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    max-inline-size: 400px;
    margin: auto;

    label {
      align-self: flex-start;
      cursor: pointer;
    }

    /* Size the supplied flyout through its own content part. */
    sv-flyout::part(content) {
      inline-size: var(--sv-anchor-width);
      min-block-size: 50px;
      max-block-size: min(var(--sv-anchor-available-height), 400px);
    }

    .empty {
3 collapsed lines
      padding: 0.5em;
      margin: 0;
      color: var(--sv-gray-3);
    }
  }
</style>