Skip to main content
🏠FormDropdown Select

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

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 1
Option 2
Option 3
<DropdownSelect placement="top"> ... </DropdownSelect>

Disabled​

Add disabled in to disable the dropdown select.

Option 1
Option 2
Option 3
<DropdownSelect disabled placeholder="Disabled dropdown">
  ...
</DropdownSelect>

A dropdown select option can also be disabled.

Option 1
Option 2
Option 3
<DropdownSelect value="option-3" placeholder="Disabled dropdown select option 3">
  <DropdownSelectOption value="option-1">Option 1</DropdownSelectOption>
  <DropdownSelectOption value="option-2">Option 2</DropdownSelectOption>
  <DropdownSelectOption disabled value="option-3">Option 3</DropdownSelectOption>
</DropdownSelect>

Value​

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

Option 1
Option 2
Option 3
<DropdownSelect value="option-1">
  <DropdownSelectOption value="option-1">Option 1</DropdownSelectOption>
  <DropdownSelectOption value="option-2">Option 2</DropdownSelectOption>
  <DropdownSelectOption value="option-3">Option 3</DropdownSelectOption>
</DropdownSelect>

Size​

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

Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
Option 1
Option 2
Option 3
<DropdownSelect value="option-1" size="small">...</DropdownSelect>
<DropdownSelect value="option-1" size="medium">...</DropdownSelect>
<DropdownSelect value="option-1" size="large">...</DropdownSelect>

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 1
Option 2
Option 3
Option 4
Option 5
<DropdownSelect value="option-1" scrollable nbVisibleOptions="2">
  <DropdownSelectOption value="option-1">Option 1</DropdownSelectOption>
  <DropdownSelectOption value="option-2">Option 2</DropdownSelectOption>
  <DropdownSelectOption value="option-3">Option 3</DropdownSelectOption>
  <DropdownSelectOption value="option-4">Option 4</DropdownSelectOption>
  <DropdownSelectOption value="option-5">Option 5</DropdownSelectOption>
</DropdownSelect>

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 1
Option 2
Option 3
<DropdownSelect isSearchable>
  <DropdownSelectOption value="option-1">Option 1</DropdownSelectOption>
  <DropdownSelectOption value="option-2">Option 2</DropdownSelectOption>
  <DropdownSelectOption value="option-3">Option 3</DropdownSelectOption>
</DropdownSelect>

API​

Loading API documentation...
Loading API documentation...