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

info

The <DropdownSelectOption> is intended to be used with plain strings. Its usage with complex sub-DOM elements or nested structures is not supported or recommended.

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"> ... </DropdownSelect>

Disabled

Add disabled in to disable the dropdown select.

expand_more

Option 1

Option 2

Option 3

<DropdownSelect disabled placeholder="Disabled dropdown">
  // ...
</DropdownSelect>

A dropdown select option can also be disabled.

expand_more

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

expand_more

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.

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">...</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 nbVisibleOptions property.

expand_more

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.

expand_more

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

DropdownSelect

The DropdownSelect component accepts all the props defined in the Dropdown interface.

Loading API documentation...

DropdownSelectOption

The DropdownSelectOption component accepts all the props defined in the MenuItem interface.

Loading API documentation...