Skip to main content
🏠FormDropdown SelectVersion: Next

Dropdown Select

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

Option 1Option 2Option 3
<div class="qtm-dropdown qtm-dropdown-select">
  <div class="qtm-dropdown-trigger">
    <div class="qtm-text-input">
      <input type="text" readonly placeholder="Select an option" />
      <i class="material-icons qtm-icon">expand_less</i>
    </div>
  </div>
  <div class="qtm-dropdown-overlay">
    <ul class="qtm-menu-item-list">
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 1</span>
        </a>
      </li>
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 2</span>
        </a>
      </li>
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 3</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Placement​

You can add the qtm-top and qtm-bottom class to place the dropdown overlay.

Option 1Option 2Option 3
<div class="qtm-dropdown qtm-dropdown-select qtm-top">
  <div class="qtm-dropdown-trigger">
    <div class="qtm-text-input">
      <input type="text" readonly placeholder="Select an option" />
      <i class="material-icons qtm-icon">expand_less</i>
    </div>
  </div>
  <div class="qtm-dropdown-overlay">
    <ul class="qtm-menu-item-list">
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 1</span>
        </a>
      </li>
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 2</span>
        </a>
      </li>
      <li class="qtm-menu-item">
        <a class="qtm-menu-item-label" tabindex="0">
          <span>Option 3</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Disabled​

Add .qtm-disabled to the dropdown container and add disabled attribute to text input in order to disable these elements.

Option 1Option 2Option 3
<div class="qtm-dropdown qtm-dropdown-select qtm-disabled">
  <div class="qtm-dropdown-trigger">
    <div class="qtm-text-input">
      <input type="text" readonly placeholder="Select an option" disabled />
      <i class="material-icons qtm-icon">expand_less</i>
    </div>
  </div>
</div>