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
<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

qtm-dropdown-select

PropertyTypeDefaultDescription
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
inputIdstringid of the dropdown select
isSearchablebooleanfalseDetermines if the dropdown input is searchable. When set to `true`, the user can type into the dropdown to filter the options based on the search term. If set to `false`, the input is read-only and the user must select from the predefined options without filtering.
namestringname of the dropdown select
nbVisibleOptionsnumberthe number of visible options of a scrollable dropdown select
optionsDropdownSelectOption[][]List of options in dropdown overlay, ex: [{value: "option1", label: "Option 1"},... ]
placeholderstring'Select an option'The short hint displayed in the input before the user enters a value
placement"bottom" | "top"Placement of dropdown overlay
scrollablebooleanif true, the dropdown-overlay is scrollable
size"large" | "medium" | "small"'medium'The size of element
valuestringset attribute 'value' to an option value if you want this option to be active
EventTypeDescription
blurCustomEvent<void>Callback fired when the dropdown select element loses focus.
focusCustomEvent<void>Callback fired when the dropdown select element has focus.
valueChangedCustomEvent<{ valueChanged: string; }>The callback is triggered when a qtm-dropdown-select-option is selected. Upon selection, you can retrieve the event details using 'event.detail.valueChanged'

qtm-dropdown-select-option

PropertyTypeDefaultDescription
activebooleanfalseIf true, the component is active
classesstringlist of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabledbooleanfalseIf true, the component is disabled.
valuestringvalue to submit when that option is selected
EventTypeDescription
clickOptionCustomEvent<any>callback fired when the component is clicked