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.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

Placement

You can set placement attribute to top or bottom value to place the dropdown overlay. By default, the dropdown overlay is under input.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  placement="top"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

Disabled

Add disabled to disable the dropdown select.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  disabled
  placeholder="Disabled dropdown"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

A dropdown select option can also be disabled.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  placeholder="Disabled dropdown select option 3"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3", disabled: true }
  ]}
/>

Value

You can control value of the dropdown select by using value attribute.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  value="option-1"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

Size

The dropdown select component can be rendered in small, medium and large sizes.

expand_more

Option 1

Option 2

Option 3

expand_more

Option 1

Option 2

Option 3

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  value="option-1"
  size="small"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>
<DropdownSelect
  value="option-1"
  size="medium"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>
<DropdownSelect
  value="option-1"
  size="large"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

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.

expand_more

Option 1

Option 2

Option 3

Option 4

Option 5

<DropdownSelect
  value="option-1"
  scrollable
  nbVisibleOptions={2}
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" },
    { value: "option-4", label: "Option 4" },
    { value: "option-5", label: "Option 5" }
  ]}
/>

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.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  isSearchable
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

Event handling

The DropdownSelect component provides several event handlers to manage user interactions:

onValueChanged

Triggered when a user selects an option from the dropdown. The callback receives the value of the selected option as a parameter.

const handleValueChange = (value) => {
  console.log('Selected value:', value);
  
  // You can update state or perform other actions based on the selection
  setSelectedOption(value);
  loadDataForOption(value);
};

<DropdownSelect
  onValueChanged={handleValueChange}
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

onBlur

Triggered when the dropdown select loses focus.

const handleBlur = (event) => {
  console.log('Dropdown select lost focus');
  validateField(event.target.value);
};

<DropdownSelect
  onBlur={handleBlur}
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

onFocus

Triggered when the dropdown select receives focus.

const handleFocus = (event) => {
  console.log('Dropdown select gained focus');
};

<DropdownSelect
  onFocus={handleFocus}
  options={[...]}
/>

onClose

Triggered when the dropdown menu closes.

const handleClose = () => {
  console.log('Dropdown menu closed');
};

<DropdownSelect
  onClose={handleClose}
  options={[...]}
/>

Note that when a dropdown select is disabled (disabled={true}), these events will not be triggered.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

expand_more

Option 1

Option 2

Option 3

<DropdownSelect
  classes="shadow-m-light"
  options={[
    { value: "option-1", label: "Option 1" },
    { value: "option-2", label: "Option 2" },
    { value: "option-3", label: "Option 3" }
  ]}
/>

API

QtmDropdownSelect

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component.
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.
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
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.