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

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 nb-visible-options 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

QtmDropdownSelect

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
onBlurCustomEvent<void>Callback fired when the dropdown select element loses focus.
onFocusCustomEvent<void>Callback fired when the dropdown select element has focus.
onValueChangedCustomEvent<{ 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'

QtmDropdownSelectOption

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
onClickOptionCustomEvent<any>callback fired when the component is clicked