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

Carbon Components is a component library for IBM Cloud

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<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">
    <div role="button" class="bx--list-box__selection bx--list-box__selection--multi"
      tabindex="0" title="Clear all selected items">
      1
      <svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
        <title>Close Modal</title>
        <path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"
          fill-rule="nonzero" />
      </svg>
    </div>
    <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>
  <fieldset class="bx--list-box__menu">
    <legend class="bx--assistive-text">Description of form elements within the fieldset</legend>
    <div class="bx--list-box__menu-item">
      <div class="bx--form-item bx--checkbox-wrapper">
        <label title="Option 1" class="bx--checkbox-label">
          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-0" value="on"
             checked>
          <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">
      <div class="bx--form-item bx--checkbox-wrapper">
        <label title="Option 2" class="bx--checkbox-label">
          <input type="checkbox" name="Option 1" readonly="" 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">
      <div class="bx--form-item bx--checkbox-wrapper">
        <label title="Option 3" class="bx--checkbox-label">
          <input type="checkbox" name="Option 1" readonly="" 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">
      <div class="bx--form-item bx--checkbox-wrapper">
        <label title="Option 4" class="bx--checkbox-label">
          <input type="checkbox" name="Option 1" readonly="" 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 class="bx--list-box__menu-item">
      <div class="bx--form-item bx--checkbox-wrapper">
        <label title="An example option that is really long to show what should be done to handle long text" class="bx--checkbox-label">
          <input type="checkbox" name="Option 1" readonly="" class="bx--checkbox" id="downshift-1-item-4" value="on"
            >
          <span class="bx--checkbox-appearance"></span>
          <span class="bx--checkbox-label-text">An example option that is really long to show what should be done to handle long text</span>
        </label>
      </div>
    </div>
  </fieldset>
</div>