@momentum-ui/react-collaboration/scss/components/select/examples/multi-select.html

Cisco Momentum UI Framework for React Collaboration Applications

<div class="md-input-container md-select">
  <button
    class="md-button md-button--36 active"
    alt=""
    type="button"
    aria-labelledby="md-select-69__label"
    tabindex="0"
    name="md-select-69"
    aria-haspopup="listbox"
  >
    <span class="md-button__children" style="opacity: 1;">
      <div class="md-select__label" id="md-select-69__label">
        Select Item Here
        <i class="icon icon-arrow-down_16"></i>
      </div>
    </span>
  </button>
  <div class="md-event-overlay md-event-overlay--bottom">
    <div class="md-event-overlay__children" style="top: 904px; left: 272px;">
      <div class="md-list md-list--vertical md-list" role="listbox" aria-labelledby="md-select-479__label" aria-multiselectable="true"
        style="width: 539px;">
        <div aria-current="false" class="md-list-item" id="md-list-489__so-item" role="option" tabindex="-1" title="test1">
          <div class="md-input-container md-checkbox ">
            <input aria-checked="false" class="md-input md-checkbox__input" type="checkbox" name="" tabindex="0" id="md-list-489__so-item__checkbox"
              value="">
            <label class=" md-checkbox__label" for="md-list-489__so-item__checkbox">
              <span>test1</span>
            </label>
          </div>
        </div>
        <div aria-current="false" class="md-list-item" id="md-list-489__so-item" role="option" tabindex="-1" title="test2">
          <div class="md-input-container md-checkbox ">
            <input aria-checked="true" class="md-input md-checkbox__input" type="checkbox" name="" tabindex="0" id="md-list-489__so-item__checkbox"
              value="">
            <label class=" md-checkbox__label" for="md-list-489__so-item__checkbox">
              <span>test2</span>
            </label>
          </div>
        </div>
        <div aria-current="true" class="md-list-item" id="md-list-489__so-item" role="option" tabindex="0" title="test3">
          <div class="md-input-container md-checkbox ">
            <input aria-checked="true" class="md-input md-checkbox__input" type="checkbox" name="" tabindex="0" id="md-list-489__so-item__checkbox"
              value="">
            <label class=" md-checkbox__label" for="md-list-489__so-item__checkbox">
              <span>test3</span>
            </label>
          </div>
        </div>
        <div aria-current="false" class="md-list-item" id="md-list-489__so-item" role="option" tabindex="-1" title="test4">
          <div class="md-input-container md-checkbox ">
            <input aria-checked="false" class="md-input md-checkbox__input" type="checkbox" name="" tabindex="0" id="md-list-489__so-item__checkbox"
              value="">
            <label class=" md-checkbox__label" for="md-list-489__so-item__checkbox">
              <span>test4</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>