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
<qtm-dropdown-select>
  <qtm-dropdown-select-option value="option-1">
    Option 1
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-2">
    Option 2
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-3">
    Option 3
  </qtm-dropdown-select-option>
</qtm-dropdown-select>

Placement​

You can set placement attribute to top or bottom value to place the dropdown overlay. By default, the dropdown overlay is under input

Option 1Option 2Option 3
<qtm-dropdown-select placement="top"> ... </qtm-dropdown-select>

Disabled​

Add disabled in to disable the dropdown select.

Option 1Option 2Option 3
<qtm-dropdown-select disabled placeholder="Disabled dropdown">
  ...
</qtm-dropdown-select>

A dropdown select option can also be disabled.

Option 1Option 2Option 3
<qtm-dropdown-select placeholder="Disabled dropdown select option 3">
  <qtm-dropdown-select-option value="option-1">Option 1</qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-2">Option 2</qtm-dropdown-select-option>
  <qtm-dropdown-select-option disabled value="option-3">Option 3</qtm-dropdown-select-option>
</qtm-dropdown-select>

Value​

You can control value of the dropdown select by using value attribute

Option 1Option 2Option 3
<qtm-dropdown-select value="option-1">
  <qtm-dropdown-select-option value="option-1">
    Option 1
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-2">
    Option 2
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-3">
    Option 3
  </qtm-dropdown-select-option>
</qtm-dropdown-select>

Size​

The dropdown select component can be render in small, medium and large sizes.

Option 1Option 2Option 3Option 1Option 2Option 3Option 1Option 2Option 3
<qtm-dropdown-select value="option-1" size="small">...</qtm-dropdown-select>
<qtm-dropdown-select value="option-1" size="medium">...</qtm-dropdown-select>
<qtm-dropdown-select value="option-1" size="large">...</qtm-dropdown-select>

Scrollable​

To make the dropdown select scrollable, set the scrollable property to true. By default, a scrollable dropdown select displays 5 options. You can modify the number of displayed options by assigning a different value to the nb-visible-options property.

Option 1Option 2Option 3Option 4Option 5
<qtm-dropdown-select value="option-1" scrollable nb-visible-options="2">
  <qtm-dropdown-select-option value="option-1">
    Option 1
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-2">
    Option 2
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-3">
    Option 3
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-4">
    Option 4
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-5">
    Option 5
  </qtm-dropdown-select-option>
</qtm-dropdown-select>

Autosuggest​

You can activate the Autosuggest to filter through the list of items to give the user a smaller range of options to choose from.

Option 1Option 2Option 3
<qtm-dropdown-select is-searchable="true">
  <qtm-dropdown-select-option value="option-1">
    Option 1
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-2">
    Option 2
  </qtm-dropdown-select-option>
  <qtm-dropdown-select-option value="option-3">
    Option 3
  </qtm-dropdown-select-option>
</qtm-dropdown-select>

API​

Loading API documentation...
Loading API documentation...