Dropdown Select

warning

Form input bindings (v-model) is not supported.

This component is composed of other TDS 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>

info

The <qtm-dropdown-select-option> is intended to be used with plain strings. Its usage with complex sub-DOM elements or nested structures is not supported or recommended.

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

DropdownSelect

Loading API documentation...

DropdownSelectOption

Loading API documentation...