SelectDropdown
A dropdown control that allows the user to make selections from a list of values.Prop | Required | Description | Type |
|---|---|---|---|
items | ✅ | Array of items for the user to select from. | (Item | GroupBase<Item>)[] | Promise<(Item | GroupBase<Item>)[]> |
label | — | Button label for the default trigger (SelectDropdownButton). Can not be used in conjunction with the trigger prop. | string |
block | — | Make the default trigger fill its container. | false | trueSupports responsive prop syntax |
trigger | — | Render-prop to pass in an element (e.g. Button or AdornmentButton) as the custom trigger for the dropdown. ref needs to be passed to your button component for positioning. isOpen can be passed if you want to change something in the button when the dropdown is open. disabled can be passed if the trigger need to be disabled. Can not be used in conjunction with the label prop. | (ref: RefObject<HTMLButtonElement>, isOpen?: boolean, disabled?: boolean) => Element |
disabled | — | Disables the input. | boolean |
getOptionLabel | — | Resolves option data to a string to be displayed as the label by components. | GetOptionLabel<Item> |
getOptionValue | — | Resolves option data to a string to compare options and specify value attributes. | GetOptionValue<Item> |
inputValue | — | The value of the input. | string |
isLoading | — | When true, shows a loading indicator in the dropdown instead of results. Use if awaiting async items before passing to component. | boolean |
itemOverride | — | Render items in the menu with a custom component. | (props: OptionProps<Item, boolean, GroupBase<Item>>) => Element |
itemOverrideCheckIcon | — | Display CheckIcon on selected item(s) when using itemOverride (CustomOption). | boolean |
onInputChange | — | Called whenever the input value changes. Use to filter the items. | (inputValue: string, actionMeta: InputActionMeta) => void |
onBlur | — | Called when the select input is blurred. | FocusEventHandler<HTMLInputElement> |
onFocus | — | Called when the select input is focused. | FocusEventHandler<HTMLInputElement> |
placeholder | — | The text that appears in the form control when it has no value set. | string |
value | — | The selected item. | Item | Item[] |
isMulti | — | Whether the select value is multi-selectable. | boolean |
onChangeMulti | — | Called when an item is selected. Use in conjunction with isMulti. | (value: Item[]) => void |
limit | — | Limit the items to be displayed when multi-selectable. | number |
onChange | — | Called when an item is selected. | (value: Item) => void |
align | — | Alignment of the dropdown. Defaults to start. | "start" | "center" | "end" |
side | — | Define which side of the trigger the SelectDropdown will be displayed. Defaults to bottom. | "top" | "right" | "bottom" | "left" |
hideSearchInput | — | Hide the search input. @deprecated This prop will be removed in the next major version, replaced by the searchable prop that will make the search input hidden by default. | boolean |
searchable | — | Display a search input in the dropdown list to filter options by typing. Defaults to false. | boolean |
clearButton | — | Provide a clear button at the end of the dropdown list. | boolean |