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

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
blur	CustomEvent<void>	Callback fired when the dropdown select element loses focus.
focus	CustomEvent<void>	Callback fired when the dropdown select element has focus.
valueChanged	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'

qtm-dropdown-select-option

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