SelectDropdown
A dropdown control that allows the user to make selections from a list of values.If you're building a form and need a select, prefer using the SelectInput as it supports the FieldContext.
Use the <SelectDropdown /> component when the user needs to choose a single or multiple options from a group of options, and horizontal space is limited. The most common implementation is when building an experience to filter large sets of data.
The SelectDropdown comes with a default trigger button when you pass the label prop. On selection, it will automatically display the selected value inside the button label. This is the most common and easiest way of implementing the SelectDropdown.
Optionally, a custom trigger component can be passed via the trigger prop.
The <SelectDropdown /> component can also be used for multiple options selection by passing in the isMulti prop. Instead of using the onChange prop, use onChangeMulti to handle the selected items. The value prop should be an array of selected items.
NOTE: If using the label prop, the trigger button will display the selected value for a single selection, e.g. "Australia" in the example below, and multiple selected values as "X selected" etc.
The search input inside the dropdown can be hidden by setting the hideSearchInput prop to true. This is useful when the list of items is short and the user can easily find the item they are looking for.
A clear button can be added to the dropdown by passing in the clearButton prop. Clearing the selected option(s) closes the dropdown list immediately.
If you need to disable an item in the dropdown list, you can add isDisabled: true to the item object.
A custom trigger component can be passed via the trigger prop. This can be any HTML button element, but it's recommended to use either <Button /> or <AdornmentButton /> for consistency and the best user experience. You have to pass on ref for positioning to work, and can also opt to pass the dropdown's open state to your trigger button.
NOTE: You can not use the label prop and the trigger prop at the same time.
The opening and closing of the dropdown relies on ref being passed to your button element. The ref itself is created and owned locally by the component, using a render-prop API. All you need to do is pass it on in a callback function to your trigger component.
The render-prop API of the trigger also gives you a second argument (boolean), to hook in to the open state of the dropdown. This can be useful if you need to conditionally switch a chevron icon, for example.
The side prop is used to define the position of the dropdown. The supported values are: "top" | "right" | "bottom" | "left". Defaults to bottom.
The align prop is used to define the alignment of the dropdown. The supported values are: "start" | "center" | "end". Defaults to start.
In addition, the <SelectDropdown /> supports most of the SelectInput props.