2.12.2 #Components.dropdown.multiselect Multiselect

Toggle example guides Toggle HTML markup

JavaScript is required for:

  • Checking/Unchecking the checkbox on row click
  • Updating aria-expanded value
  • Updating the button text with the number of selected items
  • Highlighting items

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Markup
<div class="sb-form-control">
  <label class="sb-label" for="dropdown-id-multiselect">Select options</label>
  <div class="sb-dropdown sb-dropdown--open" id="dropdown-id-multiselect">
    <div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
      <button class="sb-input" aria-label="Select options" aria-expanded="true">
        Select options
      </button>
      <svg viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
         <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
      </svg>
    </div>
    <ul class="sb-dropdown__menu" role="listbox">
      <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">
        <div class="sb-checkbox">
          <input type="checkbox" id="checkbox-dropdown-1" class="sb-checkbox__input" tabindex="-1">
          <label class="sb-checkbox__label" for="checkbox-dropdown-1">
            <span class="sb-checkbox__faux">
            <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 1</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo sb-dropdown__menu-item sb-text--milo--selected" tabindex="0" role="option">
        <div class="sb-checkbox">
          <input type="checkbox" id="checkbox-dropdown-2" class="sb-checkbox__input" tabindex="-1" checked>
          <label class="sb-checkbox__label" for="checkbox-dropdown-2">
            <span class="sb-checkbox__faux">
            <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 2</span>
          </label>
        </div>
      </li>
      <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">
        <div class="sb-checkbox">
          <input type="checkbox" id="checkbox-dropdown-3" class="sb-checkbox__input" tabindex="-1">
          <label class="sb-checkbox__label" for="checkbox-dropdown-3">
            <span class="sb-checkbox__faux">
            <svg class="sb-checkbox__checkmark" viewBox="0 0 11 11" focusable="false" aria-hidden="true" role="presentation">
              <path d="M9 2C6.815 3.706 5.258 5.706 4.329 8 3.709 7.081 2.972 6.114 2 5.596" fill="none" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            </span>
            <span class="sb-checkbox__text">Choice 3</span>
          </label>
        </div>
      </li>
    </ul>
  </div>
</div>
Source: components/_dropdown.scss, line 166