ComboboxMultiSelect API
API reference docs for theComboboxMultiSelectcomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
children | ((menuState: { isMenuOpen: boolean }) => React.ReactNode) | React.ReactNode | Accepts either a React node or a render function. The render function provides the menu's state (isMenuOpen). | _ |
closeButtonPropsForMobile? | { label: string, onClick: function, size: 'large' | 'standard' | 'small' } | If closeButtonPropsForMobile is provided then the mobile version of the component will have a close button | _ |
inputValue? | string | Value of the combobox input. | _ |
menuTrigger? | 'focus'| 'input' | Interaction type to display the Combobox menu. | input |
mobileFriendly? | boolean | Indicates if the opened element should be rendered as a Sheet in mobile viewports | true |
onClearAll? | () => void | Handler that is called when the Combobox input value is cleared. | _ |
onClearInput? | () => void | Function to be invoked for clearing the Combobox input value. | _ |
onClose? | () => void | Handler that is called when the Combobox is closed | _ |
onInputChange | (value: string) => void | Function to be invoked when the input value changes. | _ |
onRemoveLast? | () => void | Function to remove the last item in the selection options list. Invoked when user presses backspace. | _ |
onSelectionChange | (option: object) => void | Function to be invoked when the selection changes. | _ |
popoverMatchReferenceWidth? | boolean | Match the width of the popover with the reference element. | false |
popoverMaxHeight? | number | The max height of the popover. | 356 |
popoverMaxWidth? | number | The max width of the popover. | 400 |
popoverOffset? | number | The offset of the combobox popover. | 4 |
popoverPlacement? | 'bottom' | 'bottom-start' | 'bottom-end' | The placement of the popover relative to the combobox Input. | 'bottom-start' |
selectedKey | keyOf object | Key for identifying the selected option. | _ |
selectedOptions | object[] | undefined | Currently selected options from the list. | _ |
strategy? | 'absolute' | 'fixed' | The strategy used to position the floating element. | 'absolute' |
titleForMobile? | string | On mobile ComboboxMultiSelect renders a Sheet component. If titleForMobile is provided then the Sheet will have a Header with title rendered | _ |