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

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
inputId	string		id of the dropdown select
isSearchable	boolean	false	Determines 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.
name	string		name of the dropdown select
nbVisibleOptions	number		the number of visible options of a scrollable dropdown select
options	DropdownSelectOption[]	[]	List of options in dropdown overlay, ex: [{value: "option1", label: "Option 1"},... ]
placeholder	string	'Select an option'	The short hint displayed in the input before the user enters a value
placement	"bottom" | "top"		Placement of dropdown overlay
scrollable	boolean		if true, the dropdown-overlay is scrollable
size	"large" | "medium" | "small"	'medium'	The size of element
value	string		set attribute 'value' to an option value if you want this option to be active

Event	Type	Description
onBlur	CustomEvent<void>	Callback fired when the dropdown select element loses focus.
onFocus	CustomEvent<void>	Callback fired when the dropdown select element has focus.
onValueChanged	CustomEvent<{ 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

Property	Type	Default	Description
active	boolean	false	If true, the component is active
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
disabled	boolean	false	If true, the component is disabled.
value	string		value to submit when that option is selected

Event	Type	Description
onClickOption	CustomEvent<any>	callback fired when the component is clicked