Skip to main content
HomeFormDropdown Select

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
<QtmDropdownSelect>
  <QtmDropdownSelectOption value="option-1">Option 1</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-2">Option 2</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-3">Option 3</QtmDropdownSelectOption>
</QtmDropdownSelect>
info

The <QtmDropdownSelectOption> 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
<QtmDropdownSelect placement="top"> ... </QtmDropdownSelect>

Disabled​

Add disabled in to disable the dropdown select.

Option 1Option 2Option 3
<QtmDropdownSelect disabled placeholder="Disabled dropdown">
  ...
</QtmDropdownSelect>

A dropdown select option can also be disabled.

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

Value​

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

Option 1Option 2Option 3
<QtmDropdownSelect value="option-1">
  <QtmDropdownSelectOption value="option-1">Option 1</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-2">Option 2</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-3">Option 3</QtmDropdownSelectOption>
</QtmDropdownSelect>

Size​

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

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

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 nbVisibleOptions property.

Option 1Option 2Option 3Option 4Option 5
<QtmDropdownSelect value="option-1" scrollable nbVisibleOptions="2">
  <QtmDropdownSelectOption value="option-1">Option 1</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-2">Option 2</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-3">Option 3</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-4">Option 4</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-5">Option 5</QtmDropdownSelectOption>
</QtmDropdownSelect>

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
<QtmDropdownSelect isSearchable>
  <QtmDropdownSelectOption value="option-1">Option 1</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-2">Option 2</QtmDropdownSelectOption>
  <QtmDropdownSelectOption value="option-3">Option 3</QtmDropdownSelectOption>
</QtmDropdownSelect>

API​

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

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab