carbon-components/html/multi-select/multi-select.html

Carbon Components is a component library for IBM Cloud

<div class="bx--form-item bx--multi-select bx--list-box">
  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
    <span class="bx--list-box__label">Label</span>
    <div class="bx--list-box__menu-icon">
      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Open menu">
        <title>Open menu</title>
        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
      </svg>
    </div>
  </div>
</div>
<div class="bx--form-item bx--multi-select bx--list-box">
  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
    <span class="bx--list-box__label">Label</span>
    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Close menu">
        <title>Close menu</title>
        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
      </svg>
    </div>
  </div>
  <div class="bx--list-box__menu">
      <div class="bx--list-box__menu-item" id="downshift-1-item-0">
        <div class="bx--form-item bx--checkbox-wrapper">
          <label for="downshift-1-item-0" class="bx--checkbox-label">
            <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
            <span class="bx--checkbox-appearance"></span>
            <span class="bx--checkbox-label-text">Option 1</span>
          </label>
        </div>
      </div>
      <div class="bx--list-box__menu-item" id="downshift-1-item-1">
        <div class="bx--form-item bx--checkbox-wrapper">
          <label for="downshift-1-item-1" class="bx--checkbox-label">
            <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
            <span class="bx--checkbox-appearance"></span>
            <span class="bx--checkbox-label-text">Option 2</span>
          </label>
        </div>
      </div>
      <div class="bx--list-box__menu-item" id="downshift-1-item-2">
        <div class="bx--form-item bx--checkbox-wrapper">
          <label for="downshift-1-item-2" class="bx--checkbox-label">
            <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
            <span class="bx--checkbox-appearance"></span>
            <span class="bx--checkbox-label-text">Option 3</span>
          </label>
        </div>
      </div>
      <div class="bx--list-box__menu-item" id="downshift-1-item-3">
        <div class="bx--form-item bx--checkbox-wrapper">
          <label for="downshift-1-item-3" class="bx--checkbox-label">
            <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
            <span class="bx--checkbox-appearance"></span>
            <span class="bx--checkbox-label-text">Option 4</span>
          </label>
        </div>
      </div>
  </div>
</div>