Skip to main content
🏠FormDropdown SelectVersion: 2.0.0-beta.6

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>