Skip to main content
HomeFormDropdown Select
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

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