Multiselect

Dropdown multiselect allow users to select multiple items from a list of predefined items in a dropdown menu. Items are displayed as checkboxes items to make the user understand the multiselection capability.

Note: this component is composed of other TDS elements (Dropdown, Menu, Text Input and Checkbox) and therefore we recommend you refer to the documentation of those components to ensure that you use the component in the most appropriate way.

<div class="qtm-dropdown qtm-multiselect">
  <div class="qtm-dropdown-trigger">
    <div class="qtm-text-input qtm-medium">
      <input type="text" placeholder="Select an option" readonly />
      <i class="qtm-icon material-icons">expand_less</i>
    </div>
  </div>
  <div class="qtm-dropdown-overlay">
    <ul class="qtm-menu-item-list qtm-medium">
      <li class="qtm-menu-item">
        <label class="qtm-menu-item-label qtm-checkbox qtm-medium">
          <input type="checkbox" id="france" />
          France
        </label>
      </li>
      <li class="qtm-menu-item">
        <label class="qtm-menu-item-label qtm-checkbox qtm-medium">
          <input type="checkbox" id="italy" />
          Italy
        </label>
      </li>
      <li class="qtm-menu-item">
        <label class="qtm-menu-item-label qtm-checkbox qtm-medium">
          <input type="checkbox" id="spain" />
          Spain
        </label>
      </li>
    </ul>
  </div>
</div>

Disabled

Add .qtm-disabled in text input wrapper and input to disable these elements.

<div class="qtm-dropdown qtm-multiselect qtm-disabled">
  <div class="qtm-dropdown-trigger">
    <div class="qtm-text-input qtm-medium">
      <input type="text" placeholder="Select an option" readonly />
      <i class="qtm-icon material-icons">expand_less</i>
    </div>
  </div>
</div>